JavaScript minification and compression

Question

I am trying to understand JavaScript minification and compression processes and have couple of questions on these:

Since minification makes the code difficult to debug, is it possible to do on-demand de-minification on client-side to cover-up for cases where you actually need to debug and investigate something on the website?
I remember reading somewhere that one can enable compression of all resources (like images, CSS, JavaScript etc.) by setting some options in the Apache Web Server. Is there any difference in the JavaScript compression done at Apache level and, the one done using tools like YUI Compressor?

Can someone help me know the above?

The kind-of cases where I would actually need to de-minify my JavaScript files is let's say a JavaScript error happened at line no. X. With a minified files it would be very tough to know which block of code caused that error in production as the lines are all wrapped up in a minified file. How do you guys investigate and debug in such circumstances? Another user also mentioned this debugging problem in Packed/minified javascript failing in IE6 - how to debug? questions (slightly specific to IE6 though).

score 9 · Answer 1 · answered Dec 28 '11 at 17:09

9

You shouldn't be debugging minified code. Ideally, development process is like this:

You build and debug the site locally. You have full versions of javascripts, stylesheets and everything.
You deploy a version to production machine. You minify and gzip a copy of your assets and push that to the server. Your local development copy is left untouched.
If there's a bug in production, you modify your local version, minify, compress, upload.

Repeat until PROFIT

answered Dec 28 '11 at 17:09

Sergio Tulentsev

226,338
43
373
367

@Sergei Tulentsev, I have given more details on the debugging that I was referring to in the EDIT section of my question above. Could you please take a look at that and give me any inputs on how to go about doing that? Thanks. – peakit Dec 28 '11 at 17:51
I would do one of the following: 1) replicate production environment somewhere and try to reproduce the problem with full javascripts. 2) copy full javascripts to production and render them when **you** log in (and keep using minified version for all others) – Sergio Tulentsev Dec 28 '11 at 17:59

score 5 · Answer 2 · answered Dec 28 '11 at 17:27

5

Chrome Dev Tools can de-obfuscate (and de-minify) javascript code if you want to debug production code (useful when trying to replicate a bug on a live environment you may not be seeing in dev)

enter image description here

answered Dec 28 '11 at 17:27

JaredMcAteer

21,688
5
49
65

Adam Rackis · Answer 3 · 2011-12-28T17:15:01.977

3

Typically developers will develop against the uncompressed script file, compress right before deploying.

If you have to go back and debug your script files, you'd just open up the regular, uncompressed file, do your work, compress, and deploy. If you mean debug something while your website is in production, then no, you can't un-minify your script file on demand.

And yes, Apache, and even IIS, can gzip compress scripts and images automatically for you.

edited Dec 28 '11 at 17:15

answered Dec 28 '11 at 17:09

Adam Rackis

82,527
56
270
393

I like how modern [Rails](http://rubyonrails.org) is handling assets. It gzips and timestamps them. No more burning CPU on production. Also it is cache-friendly. – Sergio Tulentsev Dec 28 '11 at 17:12
In another life I think I was a RoR developer...in this life it's MVC, which is basically Rails with C#...could be worse... :) – Adam Rackis Dec 28 '11 at 17:14
@Adam, checkout one of the answers from 'OriginalSyn', seems like Chrome can help you to _partially_ de-minify javascript files – peakit Dec 28 '11 at 17:37
@peakit - it looks like Chrome is re-formatting the code so it looks nicer - I don't think it's reverting back to the original names for the variables and functions, which is what you'd really need to do anything useful with it. – Adam Rackis Dec 28 '11 at 17:43
yes @Adam i understand that, that's why I said in the previous comment that it is a **partial** de-minification via Chrome. – peakit Dec 28 '11 at 17:48

score 2 · Accepted Answer · 2011-12-28T17:24:07.593

Since minification makes the code difficult to debug, is it possible to do on-demand de-minification on client-side to cover-up for cases where you actually need to debug and investigate something on the website?

Sort of. Minified javascript has the same structure, it just does things like delete extra spaces and shorten variable names. So you can easily make the code readable again, either manually or with a script, but you can't recover variable names, so the code will still be harder to work with. So, if you have the original code, definitely don't get rid of it. Save the minified code separately.

I remember reading somewhere that one can enable compression of all resources (like images, css, javascript etc.) by setting some options in the Apache Web Server.

Yes, it's called gzip compression. It's not unique to apache, but you would need to configure your server to enable it.

Is there any difference in the javascript compression done at Apache level and, the one done using tools like YUI Compressor?

Yes. YUI compressor is a minifier - the output is valid javascript. Server-side compression is more analogous to zipping a file - the browser must decode it before it can be used. Using the two together would yield the smallest filesize.

you answered all my questions, hence accepting this as _the_ answer. Thank you! — peakit, Dec 29 '11 at 19:36

score 1 · Answer 5 · edited May 23 '17 at 12:03

I prefer working with a local unminified copy of the JS-file, and when i deploy the site, I minify all JS-files into one. That way it is easy to debug and improve the code. However, there are tools to revert minification. Have a look at this SO post on revert minification of JavaScript.
Have a look at GZIP compression - This blog describe how to enable GZIP in Apache and how to verify that your server actually is compressing the files.

score 1 · Answer 6 · answered Dec 28 '11 at 17:11

is it possible to do on-demand de-minification on client-side

Some browsers have a "pretty code" view that automatically formats source code. See Firebug's CSS tab.

Is there any difference in the javascript compression done at Apache level and, the one done using tools like YUI Compressor?

YIU Compressor is a actually a minifier. Apache compression is like ZIP-ing up the file before it is sent to the client so the actual file that is sent is smaller than the file on disk. They are two different technologies that are independent of each other.

JavaScript minification and compression

6 Answers6