Five Javascript Compressors Compared

Dietrich Kappe, Friday, August 11, 2006 @ 9:00 am

Without a doubt Ajax application are becomming more powerful. That also means that Javascript files are getting bigger and more complex. One solution is to use mod_gzip and mod_deflate (Apache) or HTTP compression (IIS). This means adding extra processing time both at the server and the client, however. One other way to cut down on bandwidth and memory is to compress the Javascript, after all, the browser doesn't need the nicely formated Javascript with white space and comments. You can just trim all of that out and save tons of space.

With that in mind, I decided to test out some of the better known Javascript compression algorithms. My test consisted of compressing three files: ClientEngine.js from the Echo2 framework, prototype.js from Prototype version 1.4.0, and a GWT ( Google Web Toolkit) compiled file from a small widget project. The GWT file was edited slightly to turn it from an HTML file into a Javascript file.

The compression tools tested were:

1. Memtronic's Javascript/HTML Cruncher-Compressor v1.0k - Does a straighforward whitespace/comment crunching and a more fundamental transformation, aka compression.
2. Dojo Shrinksafe - Rhino based. Supposed to be "safe."
3. Creativyst Javascript Compressor - Pretty standard whitespace/comment stripper.
4. Dean Edward's Packer - takes a little different tack, transforming and evaluation the Javascript as a string. Allows the compression of Javascript keywords, like 'function.'
5. Douglas Crockford's JSMin - Also a pretty standard whitespace/comment stripper.

The results of my test are in the table below.

The GWT file is already partially compressed, so a more fundamental transformation needs to happen in order to squeeze it some more. The Echo2 file was the largest and also was formatted for human consumption with comments, indentation, descriptive identifiers, etc., so it showed the greatest compression ratio.

Of the three "advanced" compressors, all of them had issues with prototype.js (syntax errors in the resulting code), but Dojo Shrinksafe didn't have any issues with the other two files. Packer seemed to work OK in IE6, but not in Firefox. Memtronic seemed to have problems in all three in both IE6 and Firefox.

The lesson? Test your compressed Javascript in all browser versions you plan to support (JsUnit, anyone?) or just use mod_deflate and company to handle your compression needs.

Technorati : compression, javascript, performance

Related posts:

1. The Difference Between a Compiler and a Compressor
2. Javascript Library – JQuery
3. TDD and Javascript with JsMock
4. Javascript Library – JSGraphics
5. Javascript debugging and testing in the wild (Prototype bug when using array.flatten in IE)

Comments (9)

Software Development

Comments: 9 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Here’s another compressor: http://verens.com/archives/2006/04/17/jsquash-a-javascipt-compressor/

   I’d be interested to see how it compares.

   Comment by Kae Verens, Friday, August 18, 2006 @ 3:06 am

2. 

   just tried compressing prototype with my own compressor – it takes ten minutes just to replace “element” with “Z”. on the plus side, it doesn’t hang up your browser while it’s working.

   Comment by Kae Verens, Friday, August 18, 2006 @ 3:25 am

3. 

   I use Memtronic’s on a regular basis, and it works great for me… however, I also use http://www.jslint.com to make sure that there are no errors in the code to begin with. Because these compressors often put everything on one line, it makes JavaScript statements that do not end with a semi-colon invalid. I used prototype about a six months ago with an earlier version of Memtronic’s compressor – it took me a week to get it right, but I was able to compress it.

   Comment by Jeremy Nicoll, Saturday, August 26, 2006 @ 10:26 am

4. 

   There are serious errors in these compressors, many of them won’t let prorotype-1.4.0 pass without errors.

   Comment by Michal Till, Thursday, October 19, 2006 @ 8:41 pm

5. 

   This one let prototype-1.4.0 pass without errors and it beats all the above compressors in efficiency too: http://www.bananascript.com/

   Comment by Michael, Saturday, January 6, 2007 @ 4:12 am

6. 

   Ripper Not Allowed Here…!
   Just Go To Hell…!
   HaHaHa…!

   Comment by danielscreamo, Friday, April 18, 2008 @ 9:45 am

7. 

   Just had to use some pre-made JS code, a 615Kb file for my website. Creativyst Javascript Compressor Was the only one that worked for me, not a very good compression, but, there were no problems with the “;” errors. 278 kb now, If it just had a variable shrinker option…

   Comment by Wolfgang Amadeus Laser Cubria Amador, Tuesday, October 28, 2008 @ 6:32 am

8. [...] You can read about CSS Compressors here, and about JavaScript compressors here. [...]

   Pingback by 9 Ways to a Faster WordPress Blog « WP TOY, Wednesday, March 25, 2009 @ 9:08 am

9. 

   For all of you complaining about compressors failing maybe you should focus on writing clean code first. The phrase “There are serious errors in these compressors” just sounds weak. I would suggest JSLint like Jeremy said, or even Opera’s error console.

   Comment by Jimmy, Friday, July 17, 2009 @ 5:48 pm

Leave a comment