31

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.

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Steve Steiner
  • 5,299
  • 4
  • 32
  • 43
  • 2
    this is really easy to check...and you should with your actual files; or don't worry about it and just gzip – Michael Haren Apr 07 '10 at 03:54
  • I just tried this on a file I have here. It's 160kb unpacked, 56kb packed. Gzipped using the same settings, the unpacked one become 28kb, and the packed one 23kb. – nickf Apr 07 '10 at 04:02
  • 1
    @Steve, give a look to Compressor Rater, you can compare your code with various popular minification tools, both with and without the effects of additional gzip compression: http://compressorrater.thruhere.net/ – Christian C. Salvadó Apr 07 '10 at 04:28
  • 1
    The *question* isn't an exact duplicate, but the *answers* at [Gzip versus minify](http://stackoverflow.com/questions/807119/gzip-versus-minify) include some people's benchmarks that address this question thoroughly. Basically, what you describe here as "highly unlikely" turns out, contrary to your intuition, to be the truth: minified-and-gzipped code *is* significantly smaller than merely gzipped code. – Mark Amery Nov 03 '15 at 16:50

5 Answers5

27

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.

Thilo
  • 257,207
  • 101
  • 511
  • 656
22

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.

Jim Ferrans
  • 30,582
  • 12
  • 56
  • 83
Wolph
  • 78,177
  • 11
  • 137
  • 148
  • 3
    gzip will also make the repeated "this_is_my_variable" shorter. Your three examples gzip to 98, 70, and 51 bytes. – Thilo Apr 07 '10 at 03:57
  • 3
    True that the minifier helps by zapping comments; not really true that shortening long variable names helps since gzip's deflate already deals with that just fine (only thing that will benefit from minifying in this case is the dictionary size.) – vladr Apr 07 '10 at 04:00
  • Probably not the same extent though. – armandino Apr 07 '10 at 04:01
  • Some types of Lossy compression have a larger opportunity cost for diagnosing problems. Are the extra bytes of space worth it in practice? Or is it possible to get both? (e.g. Stripping comments can be done without removing whitespace or formatting, both of which help in debugging and should gzip fine*.) I do agree that removing code, and Code transformation is a valid possibility for meaningful space saving over gzip. (*In theory ...and of course in theory there is no difference between practice and theory.) – Steve Steiner Apr 07 '10 at 04:10
  • 9
    Minifyers can sometimes be *too* smart. The "smartly minified" version above does not always produce the same result as the untouched version (try sending in a string, or no parameters at all). One must be careful with the options used when invoking the minifyer if it is known to try being "super-smart". Personally, if I minify at all, I rarely use the more aggressive settings. gzip takes me a long way :) – npup Apr 07 '10 at 06:16
  • 1
    @npup: definately true, some minifiers also break on the lack of a trailing `;`. Personally I always minify my files with the YUI compressor. Minifies enough but doesn't cause any problems. – Wolph Apr 07 '10 at 13:07
3

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).

Ignacio Vazquez-Abrams
  • 776,304
  • 153
  • 1,341
  • 1,358
3

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)

Dean Harding
  • 71,468
  • 13
  • 145
  • 180
1

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.

goat
  • 31,486
  • 7
  • 73
  • 96