Performance: packing or minifying your javascript?

One thing I love about writing jQuery plug-ins is that every line of code counts towards performance. Its like real programming again. There are lots of difference ways in which you can improve performance but one must have is reducing the size of the JavaScript that comes down the wire from the server.

There are two options to use when reducing JavaScript file size – packing and minifying. Packing uses a compression algorithm such as gzip to physical compress the file to it’s smallest possible size, whilst a decent minifyer removes whitespace, renames variables and internal functions and removes unreachable code.

A while ago I came across this post by John Resig pointing out that although packing reduces the file size, it takes longer to ultimately execute, due to the repeated unpacking process every time the script is used.

After reading this I started using the Yahoo YUI Compressor to minify all of my plug-ins, and it worked well, typically reducing file sizes by 70% or more. Looking through the jQuery 1.4 release notes I noticed that the jQuery team have switched to Google Closure Compiler. This really is a great tool because the code is compiled and rewritten, instead of just applying a regex filter. You can use in in your build process as a Java jar, or online using the Closure Compiler Service. In tests I have been getting a consistently higher compression ratio with Google Closure, and the added benefit that I know the code is syntactically correct.

Performance: packing or minifying your javascript?