Compressors work by removing all comments and whitespace (line breaks), and in some cases they will actually analyze your code and shrink variable names. Using compression can result in up to a 60% decrease in file size! So lets get started in learning how to use the YUI compressor!
First, it’s probably a good idea to read about YUI, so check out the video introducing it at http://developer.yahoo.com/yui/compressor/
Now, lets go and download the latest version: http://www.julienlecomte.net/yuicompressor/ – also since this runs on Java, make sure you have Java installed and updated.
Open up the folder that was downloaded and grab the file in the “build” folder named
yuicompressor-x.x.x.jar and you can delete everything else since we won’t need it just to use the compressor.
For this example I’m going to compress jQuery and jQuery UI, first go download them and be sure to get the uncompressed version of each, since we can’t really further compress an already compressed file. Just open these two files, select all of jQuery UI and copy/paste that to the end of the jQuery file. The resulting uncompressed file is 436k and over 13,000 lines of code!
If you’re using a Mac, you’ll need to open up the terminal (found by navigating to
/Applications/Utilities/Terminal.app), and if you’re using Windows you’ll need to open the command line (Start > Run > type “cmd” and hit enter).
Now in the Terminal/Command Line here’s the syntax for basic compressing with YUI:
java -jar /path/to/yuicompressor.jar path/to/original.js -o path/to/output.js
Instead of typing all these file paths, luckily we can just drag files onto the terminal/Command line and it will write the path out for us. So here’s what you need to do:
java -jar(type a space after) and then drag the
yuicompressor.x.x.x.jarfile into the window – this tells it that we want to run java code from a .jar file, and then we give it the file to run.
- Type another space and drag the file you want to compress into the window.
- Another space then type
-oto specify that you want to write the compressed output into a new file.
- Now you need the path to the output destination file that does not yet exist. So what I usually do is drag the same file into the window, and then use the arrow keys to go back a few characters and rename the file.
- Just hit enter and that should do it!
As you can see, we went from 436k down to 264k – which is a 60.5% decrease! Also, it now has no comments and it’s all on a single line of code which makes it next to impossible to read, so be sure to keep a backup. This is especially true if you are compressing a script that you wrote, if you don’t keep a backup you will forever loose your comments and formatting.