Compacting Prototype.js and Scriptaculous

I've found a few javascript compaction utilities that are quite helpful, but as it turns out compacting javascript is not as easy as it used to be. Especially where Prototype.js is concerned. As it turns out, to achieve optomal results, a combination of several utilities is required, as are potentially some configuration changes with your web server.

I began this project trying to achieve a smaller javascript filesize for Prototype.js, Scriptaculous, and a slightly customized version of LightBox. Prototype.js weighed in at 55149 bytes, Scriptaculous was only 2247 bytes, but it also automagically includes effects.js which is 33092 bytes, and my version of lightbox.js is 21009 bytes. That essentially means that my website visitors would need to make a minimum of 4 requests to my server, and download more than 111497 bytes of data - that doesn't include any weight for the page I placed all that javascript on, and additional CSS file requests. Combining the files would mean 3 less requests, but what about the size?

The end result of this effort is that the download was slimmed down to 17698 bytes, or roughly 18K, meaning that the download is 6 times faster - down to between 2 and 3.5 seconds depending on connection quality. Compared with most sites, that's some pretty slick functionality available in such a small package. Just for grins, I threw in all the vbulletin javascript (100K+) and rico.js (90K) and ended up with a file size of 32K - meaning that I can have all the functionality that these scripts provide in my vbulletin installation for less than the cost of downloading the global.js file out of the box!

I'm going to come back and edit this file in a few weeks, once I have my vBulletin installation squared away, but essentially the process is as follows:

1) Start listing out the javascript files that you need in the order you need them. Forget Scriptaculous.js - it just loads the other files for you. You'll need prototype.js first, then builder.js, effects.js, dragdrop.js, controls.js, and slider.js in that order. Omit the ones you don't need, add additional files that you do need appropriately (either before prototype.js or after your scriptaculous files). It's a good idea to test out ordering first on an existing web page. Troubleshooting will be that much easier if you know that the scripts are compatible in the first place.

2) Find the following line in prototype.js (version 1.50 RC2)

HTMLElement.prototype = document.createElement('div').__proto__;

eval('HTMLElement.prototype=document.createElement("div").__proto__;');

3) combine all your files into one:

cat prototype builder.js effect.js yourcustom.js > supercombo.js 

4) install and run jscompact (a project in and of itself) as follows:

jscompact -pnal < supercombo.js > almostthere.js

5)head on over to Dean Edward's online javascript packing utility, and use it to compact your code further.

6) Have your web server serve your script with gzip compression (to reduce the filesize further) and an Expiration header (to enforce IE cacheing of the file).

7) Do a happy dance. Good luck to you. Like I said, I'll try and expand on these steps in a future entry.