Tech Note: Minifying Javascript Quickly and Easily
Sun, Aug 3, 2008 at 4:01:24 pm PDT
A technique I use at LGF to speed up the loading of Javascript files is to run them through a “minifier” script that removes spaces and extraneous formatting such as comments. Combined with server-side gzip compression, this produces the smallest possible download size. (There’s another technique for compressing Javascript called “packing” that results in smaller JS files — but they don’t compress as well with gzip.)
So here’s a method to semi-automate the “minifying” process, assuming you have root (or sudo) access to your web server and some experience with Linux commands and simple shell scripting. This method is cool because it lets you keep both original and compressed copies of your Javascript easily accessible on the server, and quickly generate the minified versions whenever you make a change.
The first step is to download the C source code for the Javascript minimizer by Douglas Crockford, available here: JSMIN, The JavaScript Minifier. (Scroll to the bottom of the page for the link to the C source.)
We’ll log in with SSH, change to the directory where we’re going to put the minifier, then use the wget command to get the C source code directly from crockford.com. Then we’ll compile the C code into a small executable file named jsmin.
cd /usr/local/me
wget http://www.crockford.com/javascript/jsmin.c
gcc -o jsmin ./jsmin.c
You now have a Linux command that takes Javascript code from standard input, minifies it, and sends the result to standard output. Assuming you’ve properly edited the include paths in your bash login scripts (which is a bit beyond the scope of this little tech note), you should be able to call the command from anywhere.
Now we’re set up. If you’ve just edited a Javascript file and you want to minify it, here’s how: log in, navigate to the directory where your edited file is located, and use the following command line to pipe the original Javascript file through jsmin and write out the compressed code to a new file.
cat my.js | jsmin > my.min.js
To get even trickier, put these commands in a shell script that calls jsmin repeatedly to add a series of Javascript files to one “master” minified file, like this:
#!/bin/bash
cd /path/to/site/js/
cat my.js | /usr/local/me/jsmin > my.min.js
cat my.extra1.js | /usr/local/me/jsmin >> my.min.js
cat my.extra2.js | /usr/local/me/jsmin >> my.min.js
I use this technique to combine several jQuery plugins into one minified file.
If you saved this shell script with a name like minify, you could make changes in a series of Javascript files, save or upload them, then just type:
minify
...and all your Javascript code would be minified and concatenated into one file, for the smallest possible download. And the compiled C version of jsmin is exceedingly fast.
UPDATE at 8/5/08 3:28:32 pm:
To squeeze a few more bytes out of the minified code, you can also try stripping out line breaks by piping jsmin’s output through the tr command:
cat my.js | jsmin | tr -d "\n" > my.min.js
Some poorly-formed Javascript code breaks when you strip out newlines, however. Here’s an example of one bit of code I’ve encountered that needs a newline to work properly:
if (variable) {
dosomething();
} else
somethingelse();
Technically, this is not illegal code, but it relies on the newline to provide space between the else statement and the call to somethingelse(). When you strip newlines, the code ends up like this:
if(variable){dosomething();}elsesomethingelse();
A better way is to add the technically unnecessary set of braces around the else condition:
if (variable) {
dosomething();
} else {
somethingelse();
}
