What do you do to your JavaScript code before deployment?

Question

Do you have a step in your deployment process that minifies JS? Do you have any sort of preprocessor for your JavaScript that allows you to leave in comments and console.logs and then have them automatically stripped out? Is your JavaScript machine generated by GWT or Script#? Do you use ANT or another tool to automate deployment?

I see a lot of JavaScript that looks like it comes right out of the editor, complete with lots of white space and comments. How much of that is due to not caring about the state of the deployed code, and how much is due to the spirit of the open web?

Answer 1

My steps include:

1. I write Javascript using TextMate with the Javascript Tools bundle installed. This JSLint's my files on every save and notifies me when errors occur.
2. I use Sprockets to automatically concatenate my various Javascript files.
3. I run the resulting concatenation through jsmin to generate a minified version.

I end up with a concatenated lib.js file and a minified lib.min.js file. One I use for development, one for production. TextMate commands help automate it all.

I'm still looking for a good solution to actually (unit) test my scripts.

Answer 2

I usually check it out with JSLint to make sure it is bug-free, then pack it/encode it with YUI compressor.

Answer 3

Check out YUI Compressor its a console app that you can use to minify (strip out comments, whitespace etc..) and also obfuscate your javascript files.

Answer 4

JSMin it from Douglas Crockford. We've got it hooked up as a macro in Studio as well as a post build item for some of our larger projects

Answer 5

FWIW, here's an interesting mini-benchmark on various ways you can minimize your Javascript source:

http://www.ericmmartin.com/comparison-of-javascript-compression-methods/

In short:

• gzip compression in HTTP protocol really makes a difference (although you need to pay a CPU cost at the server side)
• minification (removal of whitespace/comments, change of variable names etc.) also helps, and if you want best result, use it together with gzip compression
• js-based decompressors are most likely useless - while you might get smaller size, the CPU overhead on the client is significant.

Answer 6

For one of our products, we concatenate all Javascript files together (most files are used on most pages, so this makes sense for us) and use Javascript::Minifier. This has given us a pretty nice speed boost.

Answer 7

A lot of it is probably due to not caring about people that might be viewing your pages on slower machines with slower connections and assuming that everyone has a 50Mbps line and three Gigs of RAM.

We are minifying our (hand-written + plugins, jQuery, etc.) JS as a part of the build process in .NET environment. No preprocessor, this is something we should definitely be doing once time permits.

P.S. By the way, we're not using console.log, as this will break IE. Instead we have a simple wrapper function, something like:

function log(stuff) {
    if (window.console && window.console.log) {
        console.log(stuff);
    }
};

Answer 8

I have a PHP script that does it on the server side and keeps a cache of whatever it pulls from the source folder(s).

Answer 9

One word- packer

Answer 10

Light a candle, whisper a prayer against IE6 errors, and click "go". Does that count? :)

Answer 11

1. I don't minify my own javascript code since text tends to gzip/compress well.
2. I would minify a very large (say > 100 kb) javascript library (but then again I probably would not want to be using such a large library (or just ship what i use)).

I tend to believe that a lot of the javascript-minification is (in reality) done to achieve some sort of (futile) obfuscation of javascript code instead of the proclaimed end-user performance gain.

Answer 12

There's also a .NET port of YUI Compressor which allows you to:-

• intergrate the minification/file combining into Visual Studio post-build events
• intergrate into a TFS Build (including CI)
• if you wish to just use the dll's in your own code (eg. on the fly minification).

Answer 13

I thought I would share my approach to js deployments. Have a look at this blog post: http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

This also includes code to compile (using google's closure compiler) at runtime (when needed).

Thanks Guido