Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uglify-js doesn't mangle variable names

Trying to prepare good build environment for my js library. According to reviews on the web UglifyJS seems to be one of the best compressing modules out there, working under NodeJS. So here is best recommended way of minifying the code:

var jsp = require("uglify-js").parser;
var pro = require("uglify-js").uglify;

var orig_code = "... JS code here";
var ast = jsp.parse(orig_code); // parse code and get the initial AST
ast = pro.ast_mangle(ast); // get a new AST with mangled names
ast = pro.ast_squeeze(ast); // get an AST with compression optimizations
var final_code = pro.gen_code(ast); // compressed code here

As seen here, pro.ast_mangle(ast) should mangle variable names, but it doesn't. All I get out of this pipe is javascript code, with no spaces. At first I thought that my code was not optimized for compression, but then I tried it with Google Closure and got quite a compression (with mangled variable names and everything).

UglifyJS experts, any hint to what I'm doing wrong?

UPDATE:

Actual code is too large to reference here, but even a snippet like this doesn't get mangled:

;(function(window, document, undefined) {

    function o(id) {
        if (typeof id !== 'string') {
            return id;  
        }
        return document.getElementById(id);
    }   

    // ...

    /** @namespace */
    window.mOxie = o;

}(window, document));

This is what I get (only spaces get stripped I guess):

(function(window,document,undefined){function o(id){return typeof id!="string"?id:document.getElementById(id)}window.mOxie=window.o=o})(window,document)
like image 351
jayarjo Avatar asked Jun 09 '12 07:06

jayarjo


People also ask

Does Uglify minify?

Some libraries like UglifyJS does minification when used, by removing unnecessary parts. But in general Uglifying is making the code unreadable. Minifying your code speeds up your page loading, making visitors and search engines happy and it is also readable. Most major browsers minify the code before execution.

What is Uglify in JavaScript?

Uglify JS is a JavaScript library for minifying JavaScript files. To 'uglify' a JavaScript file is to minify it using Uglify. Uglification improves performance while reducing readability. Encryption: This is the process of translating data, called plain data, into encoded data.

What is JavaScript mangle?

(Usually Terser would compress whitespace too, but for ease of reading, allow me to keep the whitespace) Your code still behaves the same, even though the variable name has changed. This behavior of renaming variable name to compress JavaScript code is called Mangle.

Does Uglify support ES6?

uglify-es is no longer maintained and uglify-js does not support ES6+.


2 Answers

Ok, it seems that the latest version of Uglify JS requires mangle option to be explicitly passed as true, otherwise it won't mangle anything. Like this:

var jsp = require("uglify-js").parser;
var pro = require("uglify-js").uglify;

var orig_code = "... JS code here";
var options = {
    mangle: true
};

var ast = jsp.parse(orig_code); // parse code and get the initial AST
ast = pro.ast_mangle(ast, options); // get a new AST with mangled names
ast = pro.ast_squeeze(ast); // get an AST with compression optimizations
var final_code = pro.gen_code(ast); // compressed code here
like image 60
jayarjo Avatar answered Oct 14 '22 23:10

jayarjo


By default uglify won't mangle toplevel names, maybe thats what you seen?

Try: -mt or --mangle-toplevel — mangle names in the toplevel scope too (by default we don’t do this).

like image 21
axkibe Avatar answered Oct 15 '22 00:10

axkibe