Java, JavaScript, Technology

Slimming Your JavaScript Files Down

When you have hundreds of thousands of users accessing your website, even a seemingly small difference in file size can add up to eat a LOT of bandwidth. A friend told me that in his company, they even wrote their own JavaScript library from scratch to squeeze away those tens of kilobytes (which amounts to saving a lot of bandwidth money in their case).

Personally, I wouldn’t do such a thing, though. I have more faith on widely tested libraries like this one instead of a homegrown JavaScript library written specifically for size. So I googled around a bit for JavaScript compressors, of which there are many. But in this post I’ll just take a look at two of them.

One Can Never Be Too Slim

Prototype 1.5.0 is 70kb. Prototype 1.5.1 rc2 is 92kb in size. I think it’s quite reasonable to assume that by the time it’s released it’ll probably break the 100kb barrier. Some slimming sessions are certainly in order here! Let’s take a look at a few alternatives. Before slimming down Prototype, I’ll test the minifiers discussed in this article using my own JavaScript-Commons StringUtils, simply because I have the unit test written for it and I can check for the minification accuracy.

JSMin, The JavaScript Minifier

JSMin is written by none other than Douglas Crockford. After you’ve downloaded it, running it is easy. My StringUtil.js is originally 17,415 bytes. After running it:

C:\Documents and Settings\schemer\jsmin>jsmin <StringUtils.js >MinifiedStringUtis.js

C:\Documents and Settings\schemer\jsmin>dir

03/31/2007 11:52 AM 17,415 StringUtils.js
03/31/2007 12:27 PM 7,379 MinifiedStringUtils.js

Ain’t that sweet? JSMin reduces the size of StringUtils by more than half. But a small JS file is of no use if it’s broken…

And turned out JSMin’s output passed all StringUtils’s JSUnit tests with flying colours. Sweet! It surely looks ugly though…

Minified StringUtils

Now let’s try it with Prototype 1.5.0 and 1.5.1. The result:

C:\Documents and Settings\schemer\jsmin>jsmin <prototype-1.5.0.js >prototype-min-1.5.0.js

C:\Documents and Settings\schemer\jsmin>jsmin <prototype-1.5.1_rc2.js >prototype-min-1.5.1_rc2.js

C:\Documents and Settings\schemer\jsmin>dir

03/31/2007 12:47 PM 71,260 prototype-1.5.0.js
03/31/2007 12:49 PM 54,193 prototype-min-1.5.0.js

03/31/2007 12:47 PM 94,024 prototype-1.5.1_rc2.js
03/31/2007 12:49 PM 70,353 prototype-min-1.5.1_rc2.js

Hmmm, not bad. 24% and 25% for 1.5.0 and 1.5.1_rc2, respectively. Douglas Crockford is a very intelligent guy, but the fact that JSMin does its minification using text manipulation means that we can’t be sure that the result of JSMin will be 100% functionally identical to the original file. For minification fidelity, we have Dojo ShrinkSafe.

Shrink Your JavaScript Safely

First of all, if all you care about is just slimming your JavaScript file RIGHT NOW, go here to do it without any download or configuration whatsoever. The compression result of the three files above are shown below (note that the online compressor seems to have a maximum file name length set to 31–as you can see the name of the shrunk prototype 1.5.2 gets truncated in the beginning):

C:\Documents and Settings\schemer\shrinksafe>dir

03/31/2007 11:52 AM 17,415 StringUtils.js
03/31/2007 12:27 PM 7,379 MinifiedStringUtils.js
04/01/2007 10:18 AM 6,762 StringUtils.compressed.js

03/31/2007 12:47 PM 94,024 prototype-1.5.1_rc2.js
03/31/2007 12:49 PM 70,353 prototype-min-1.5.1_rc2.js
04/01/2007 10:22 AM 64,332 ototype-1.5.1_rc2.compressed.js (truncated name?)

03/31/2007 12:47 PM 71,260 prototype-1.5.0.js
03/31/2007 12:49 PM 54,193 prototype-min-1.5.0.js
04/01/2007 10:21 AM 49,059 prototype-1.5.0.compressed.js

So, Dojo ShrinkSafe actually outperforms JSMin in all cases. Not surprising, because instead of doing text manipulation, Dojo ShrinkSafe is based on Rhino, a true JavaScript engine. Which means that ShrinkSafe has much more knowledge about your JavaScript file compared to your regular text manipulation compressor–it knows with a lot more certainty the context of a variable, function, and so on.

Ah, so there. Next time I’m creating another release of JavaScript-Commons, I know which compressor I’ll be using.

About these ads
Standard

One thought on “Slimming Your JavaScript Files Down

  1. I tried to minify Prototype.js 1.6.0 using ShrinkSafe, and found that using the compressed file broke my page. Am I missing something?

    Thanks,
    Iain

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s