Recipe for compressed script.aculo.us

I was searching for a compressed version of script.aculo.us javascript library in one file. The search turned out almost fruitless; I found outdated script.aculo.us versions compressed. It was obvious to me that I was on my own. I also wanted to post the method to do it instead of the result.

YUI compressor was the best tool I could use to compress any javascript. YUI combined with gzip compression for compatible browsers would produce the smallest on the wire javascript files (See http://www.julienlecomte.net/blog/2007/08/13/).

First attempt to put all the script.aculo.us files into one file failed with mismatched dependencies. I had to find out the correct order to concat the files. As I found out the order should be scriptaculous.js, builder.js, effects.js, controls.js, dragdrop.js, slider.js, sound.js (I have specifically left out unittest.js). If you want you can throw in Prototype into the mix at the begining as it is required by script.aculo.us (I did that).

Run the following command in a shell prompt from the script.aculo.us root. to concat prototype and script.aculo.us.

 $ cat lib/prototype.js src/scriptaculous.js src/builder.js src/effects.js src/controls.js src/dragdrop.js src/slider.js src/sound.js > scriptaculous.bundle.js

You need to download YUI compressor, run the following command.

 $ java -jar /path/to/yui/compressor/build/yuicompressor.jar scriptaculous.bundle.js -o scriptaculous.bundle.min.js

In my case I use YUI compressor version 2.3.5 and script.aculo.us 1.8.1, and the file sizes were 244KB scriptaculous.bundle.js and 146KB scriptaculous.bundle.min.js. That’s a 40% compression.

You need to configure your web server to serve javascript files gzipped for user agents that are accepting gzipped content. You have to do your own reasearch for that :). After gzip compression was turned on for javascript files the size of scriptaculous.bundle.min.js on the wire is 41K, that’s a 83% compression, wow that’s alot of saving on bandwidth and loading time.

You can download the compressed and bundled script.aculo.us scriptaculous.bundle.min.js. Hope someone will finds it useful.

If you enjoyed this post, make sure you subscribe to my RSS feed!

5 thoughts on “Recipe for compressed script.aculo.us

  1. Wanted to point you to another compression tool you could use for compressing Scriptaculous and similar libraries: Include. Include is a part of JavaScriptMVC and lets you compress libraries all on the client side. All you do is:
    1) replace any script include code with calls to include()
    2) open your page with “compress” mode turned on
    A window pops up with the compressed code. You’d never have to worry about script load order, because compression happens in the order that your app loads the files. Hope you find it useful!

  2. Awesome, thanks for this! I also searched all over the place for a compressed scriptaculous and was surprised at how little is out there. You’d think that the scriptaculous website would provide a compressed version….

Leave a Comment