Valentin Agachi

freelance web developer

request quote!

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 GzipWith Gzip
JSMin30076 bytes9587 bytes
Packer18923 bytes9731 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]

Comments

at 17:54 on 21/Dec/2007

tre

Comment by tre

Thanks, just in time. Anyway, great site for web dev. I will definitely come back to check again.

at 21:40 on 24/Jan/2008

James Logsdon

Comment by James Logsdon

Thanks for the PHP code, I'll definitely be using that to pack my js on the fly.

at 19:02 on 08/Feb/2008

Steve

Comment by Steve

I installed your code; it seems to work in Firefox, but not IE7. I'm using Apache in a WAMP installation (AppServ). Any ideas?

at 03:15 on 23/May/2008

Russell

Comment by Russell

Hi

Does this require PHP4 or PHP5?

Thanks

at 14:06 on 31/Aug/2009

maximus

Comment by maximus

Simple, straightforward and brilliant :) Thanks for this man.

at 09:32 on 16/Nov/2009

Frank

Comment by Frank

There is an error in the ECMAScriptPacker.php file:

Line 120:
PACKER_ENCODING.HIGHASCII should be
PACKER_ENCODING_HIGHASCII

at 17:26 on 30/Dec/2009

pdfone.com

Comment by pdfone.com

Is this method works if i host my javascript files with http://www.yourjavascript.com ?

Who's this guy?

Hello! I am Valentin Agachi, an ambitious web developer, and you are viewing my site and weblog.

If you care to find more details about me, you can check out my CV page, or you can contact me.

Valentin Agachi's profile on LinkedIn Download vCard

© 2003-2014 Valentin Agachi. All rights reserved.