Pack your Javascript

With all these Javascript frameworks coming out recently and the move to a more dynamic web, your page size will increase due to the Javascript files. Now you can compress them on-the-fly with PHP.

Update: I strongly advise against using this packing method on a production site. The Packer library introduces an overhead for the browser's time and CPU spent in decoding the packed javascript code, before running the actual code. The recommended way to serve JavaScript files is using simple minifing tools or, even better, tools similar to Google Closure.

There has been written a lot on the subject of Javascript file size and how to reduce it. One of the recent article I recall is Yahoo's Weighing in on Pageweights, in which they propose the source to be minified using a couple of techniques, out of which I prefer Douglas Crockford's JSMin. This tool only removes comments, whitespace and newlines, making your file as compressed as it could be without modifying any code.

However, if you prefer to make your source a bit more obfuscated, the tool you can use would be Dean Edward's Packer. This tool obfuscates your script, saving thus quite a fraction of the file size. However there's only one rule your scripts need to obey to use this tool:

The packing algorithm is forgiving of all forms of JavaScript with one exception. You must correctly terminate all JavaScript statements with semi-colons. This includes function declarations.

I've conducted a test to see which technique is better to use, file size wise. I've tested the jQuery framework's latest version available 1.0.3 (original size 51120 bytes including comments). This is what I came up with:

	No Gzip	With Gzip
JSMin	30076 bytes	9587 bytes
Packer	18923 bytes	9731 bytes

You can see on the results that using Gzip the file size won't differ that much. It's up to you which tool you decide to use.

All you needed to compress your Javascript scripts with PHP transparently are a few files: an .htaccess to tell Apache to process your .js files with PHP, and two other PHP files which will be prepended and appended to each .js file processed by PHP. I've taken a command-line PHP implementation of JSMin and transformed it in a simple PHP class. As for the Packer, I've taken the .NET application sources from Dean Edward's site and rewrote it in PHP.

I advise against using this packing method on a production site. read more

Download all files needed to compress your Javascript on-the-fly [11 Kb]