Is there a benefit to minifying Javascript before gzipping it?

Question

Is there some valid purpose to minifying before compressing? It seems highly unlikely that the gzipped file is smaller if it's minified first.

I ask because diagnosing production problems in minified code is substantially more difficult, and I'm wondering if people are subjecting themselves to that for no purpose.

Answer 1

Yes, there is definately a benefit.

Minifying is a lossy compression whereas gzipping is lossless. Ergo, with minifying you remove unneeded data (like comments and long variablenames) which will always help to make your file smaller. Even with gzip there will still be a difference in most cases.

Example:

function foo(this_is_my_variable){
    var this_is_my_other_variable = 0;
    this_is_my_other_variable = this_is_my_other_variable + this_is_my_variable;
    return this_is_my_other_variable;
}

That might be minified to:

function foo(a){
    var b = 0;
    b = b +a;
    return b;
}

Or if the minifier is smart:

function foo(a){
    return a;
}

All code gives the same results, but the size differs a lot.

Answer 2

Maybe. Beyond the removal of whitespace, minifying JavaScript may lead to more repetitions of the same text, which may mean slightly higher compression with gzip. Fortunately it's easy to do a before-and-after since the gzip command line tool, common in *nix and available for Windows uses the same compression algorithm (although not exactly the same format).

Answer 3

I've always seen noticeable reduction in the final number of bytes when I minify before gzip.

I have a 20 minute hack job php script that interfaces with yui compressor, and googles closure compiler. It shows me before and after bytes including after gzip, so pretty easy for me to check.

Answer 4

As for raw file size, here is a sample (jQuery 1.4.2):

$ curl http://code.jquery.com/jquery-1.4.2.js | gzip > jquery.gz
$ curl http://code.jquery.com/jquery-1.4.2.min.js | gzip > jquery-min.gz

$ ls -la jquery*
-rw-r--r--  1 me  staff  24545 Apr  7 12:02 jquery-min.gz
-rw-r--r--  1 me  staff  45978 Apr  7 12:02 jquery.gz

So the minified version is about half the size.

Answer 5

It can also help to speed up parsing of the javascript code in the browser. Depending on the size of your files, the browser may spend significant amounts of time parsing and tokenising the file which will be reduced by minifying.

Of course, only benchmarking and profiling will tell you if that's actually going to be a benefit for your particular situation.

What I find works best is I keep both minified and non-minified versions of all my .js files on my website and just use a configuration switch to switch between the two. That way, normal production can use the minified version and then if I have to debug something, just flip the switch and the non-minified version is served up instead. (The build process ensures that the minified and non-minified versions are in sync, of course)