Very powerful Javascript compressor called Packer announced

A new version of the Packer utility for compressing Javascript has been released by Dean Edwards and David McNab, and it’s amazing how small it can compress javascript code to. I took a compressed version of Dojo‘s main file, dojo.js and compressed it further with Packer, and it went from 201k to 113k! This is a massive difference, especially given the fact that Dojo’s existing compressor is already very effective – the original code, before it was compressed with Dojo’s compressor, was 409k.

Rather than download Rhino separately, I used the version that comes with Dojo, though not in the bundled versions. You have to check out the Dojo source code from the Subversion repository (see here for instructions), and Rhino is in the /buildscripts/lib/custom_rhino.jar file. Alternatively, if you don’t want to download the Dojo source tree, you can just download that single jar file from here. Oh, and you’ll obviously have to have Java installed also, as Rhino is Java based.

Using the compressor is extremely simple. Open a command window and type:

You’ll be in for quite a long wait, as the compression takes a loooonnnnggg time, but believe me it’s worth it. I wouldn’t recommend building this into your build process that you run on a regular basis, but before releasing production code it would be a good idea to run your files through Packer.

One caveat is that, due to the fact that the resulting file is absolutely bloody tiny, no attempt has been made at making it readable. All new line characters have been removed, all non-global variables have been renamed to someting unintelligible etc, so all you have to read is a single line of apparent gibberish. However, it works perfectly well and, as I previously mentioned, is bloody tiny! So, give it a go, you won’t be disappointed.

Here is a link to a discussion on the topic on the Dojo-interest forum.

[…] so… I had made tweaks to ‘quicktags.js’, one of the files used in the WordPress backend at work, but when I copied it here it didn’t take effect. Turns out the wordpressers are now (2.1alpha3) using compression on JavaScript (though that article is about Packer, which from the looks of it is not what is used on the WordPress files). […]

mortsaid

David Stammsaid

Because Packer obfuscates code, it’s very difficult to debug code that runs before compression but not after. If your code is at all modular, try compressing one chunk at a time to locate the offending code.

The two biggest culprits in my own code are:

1) Code that relies on line breaks to be interpreted correctly. Packer removes this whitespace, so use curly braces whenever you can.

2) Missing semicolons. I often forget these when declaring a anonymous functions:

element.onclick = function() {
alert("Hello!");
};

This is an assignment statement, so the semicolon after the closing brace is necessary. When whitespace is removed, the JavaScript interpreter might get confused. When my code breaks after compressing with Packer, this is the reason 95% of the time.

kLsaid

You can use Yahoo!s YUIcompressor instead or in addition to this packer (YUIcompressor has nice property that it’s 100% bulletproof when it comes to handling of semicolons and will add them even if you forget).

Yes, YUI’s compressor is very nice, and a bit more reliable. It’s quite similar to Dojo’s ShrinkSafe compressor. However neither of them shrink the code as well as packer, though packer incurs a performance penalty as it has to be uncompressed on the browser.