With all of the performance advances in JavaScript engines in modern browsers, it's easy to forget that we still need to do some legwork ourselves. Squeezing every bit of performance out is something that will make our apps perform better as well as make <a href="http://stevesouders.com/">Steve Souders</a>, <a href="http://getify.com/">Kyle Simpson</a> & <a href="http://www.nczonline.net/">Nicholas Zakas</a> very happy. :)

I used to use the <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a> but based on John Resig's findings during the release of jQuery 1.4, I've switched to using Google's <a href="http://code.google.com/closure/compiler/">Closure Compiler</a> which seems to get better compression.

<h2>Setting Things Up</h2>

It's incredibly easy to compress files and I'm going to outline the steps. The first thing you need to do is <a href="http://java.com/">download Java</a>. Since the Closure Compiler comes in the form of a .jar binary file, you'll need Java to run it. Also, I'd recommended ensuring that you make Java available via your OS path so that you don't need some long, convoluted command line statement to get to it.

Next, <a href="http://code.google.com/closure/compiler/">download the Closure Compiler .jar file</a> and drop it into a convenient place that's easily accessible.

<a href="http://blog.reybango.com/wp-content/uploads/2010/06/closure.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/06/closure.png" alt="" title="closure" width="575" height="272" class="alignright size-full wp-image-852" /></a>

For this tutorial, I'm going to use the <a href="http://code.jquery.com/jquery-1.4.2.js">uncompressed version of jQuery</a> since it's sizeable and will be a good sample to use to demonstrate the results. Uncompressed, that file comes in at 161kb. Note, though, that jQuery already comes packaged in a compressed, ready-to-use form via the jQuery website and I'm only using the file for demonstrating file compression.

<h2>Compressing the Code</h2>

Actually compressing the code is incredibly easy. Note that I'm using Windows so the steps will differ a little if you're using OSX with terminal.

Go ahead and click on Start->Run and open a command prompt window by typing in "CMD" and hitting Enter. From there, change directories to the directory where you've saved your uncompressed jQuery JavaScript file. If you can't remember the DOS command for it, <a href="http://www.computerhope.com/msdos.htm">look up "CD"</a> which is the command to allow you to change directories. For example, I need to enter the following to go to my directory:

<code>cd \rey\closure</code>

Next, run the following command to run the Closure Compiler:

java -jar compiler.jar --js=jquery-1.4.2.js --js_output_file=jquery-1.4.2-compressed.js

This will run the compiler and create a new, compressed version of the .js file. The results are immediately obvious:

<strong>jQuery Uncompressed: 161kb
jQuery Compresse: 71kb</strong>

Shaving off more than 50% of the file size is a REALLY big savings when your users initially come to the site and you want them to get snappy pages.
