Compressing JavaScript with ShrinkSafe

JavaScript is a ubiquitous technology used on modern websites. With the rise of several prominent JavaScript libraries developers are realizing JavaScript is a legitimate language for complicated programs. With this understanding, larger and more complex JavaScript applications are developed.

To create and maintain large JavaScript applications, coding conventions and documentation are necessary. Unfortunately, coding conventions and documentation result in larger file sizes. Since JavaScript is often served over the web, developers should be concerned with file size. As a result, it is common practise to run JavaScript source files through a filter that strips comments and white-space.

Since Swat is maturing we're getting time to look at ways to increase the efficiency of the toolkit. Swat contains over 150Kb of JavaScript so running some sort of compression on Swat's JavaScript makes sense.

There are numerous programs written in a variety of languages that perform the task of compressing JavaScript files. Compression programs fall mainly into two types: regular-expression-based and parser-based. Regular-expression-based compressors are the easiest compressors to write an understand. They search for strings of white-space and comments and remove them from the source file. The problem with regular-expression-based compressors is they don't understand the JavaScript language itself. A parser-based JavaScript compressor can understand the context of variables and white-space in ways a regular expression-based compressor can never match. Understandably, a parser-based compressor is far more complicated to develop but produces superior results. Fortunately, one already exists.

ShrinkSafe is the JavaScript compressor used by the Dojo Toolkit. It is derived from the Mozilla Rhino JavaScript engine. In tests on the Swat JavaScript code base, ShrinkSafe produced files that were 36 percent smaller after gzip compression.

ShrinkSafe (and the Rhino engine) are written in Java. ShrinkSafe is distributed by the Dojo Toolkit as a Jar file. You can also build ShrinkSafe yourself using Mozilla CVS and the patch provided by the Dojo Toolkit. You'll need to have a Java SDK installed as well as the Apache Ant build system. On Ubuntu this can be done with:

$ sudo apt-get install ant sun-java5-sdk

To build ShrinkSafe into a Jar package:

$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -D "5 Nov 2005" mozilla/js/rhino
$ cd mozilla/js/rhino
$ wget http://svn.dojotoolkit.org/dojo/trunk/buildscripts/lib/custom_rhino.diff
$ patch -p0 < custom_rhino.diff
$ ant compile
$ ant jar

The resulting jar file will be in build/rhino1_6R3pre. Instructions on how to use the Jar file are found on the Dojo Toolkit's page on ShrinkSafe.

Compressed JavaScript is not ready to enter Swat's SVN repository just yet. Figuring out how to compress JavaScript is only one part of the puzzle for a toolkit. Problems remaining to be solved are:

an automated build system
a system for distributing the source files
a easy way to use uncompressed versions of files for debugging

Stay tuned.

Comments

sasha - May 25, 2007 2:16 pm

This seems much easier:

- compress file
(decent IDE will have an option to run this automatically every time after file.js is saved)

- serve file (.htaccess)

<pre>
#serve gzip JS when you can
<FilesMatch "\\.js.gz$">
ForceType text/javascript
Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\\.js$">
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript
</FilesMatch>
</pre>

[edit: fixed brackets, sorry about that]

sasha - May 25, 2007 2:19 pm

Lets try this again. Posting thingy ate my brackets, so here is it with squate brackets rather then < and >

#serve gzip JS when you can
[FilesMatch "\\.js.gz$"]
ForceType text/javascript
Header set Content-Encoding: gzip
[/FilesMatch]
[FilesMatch "\\.js$"]
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript
[/FilesMatch]

Mike Gauthier - June 22, 2007 11:18 am

sasha:

Using gzip compression is an important part of reducing request size. We recommend using something like Apache + mod_gzip to automatically compress all requests for supported browsers.

May I refer you to a statement in the above post (emphasis added):

<blockquote>In tests on the Swat JavaScript code base, ShrinkSafe produced files that were 36 percent smaller after gzip compression.</blockquote>

mitch - October 19, 2007 12:11 am

http://fridge.netfirms.com

interesting.

also, i dont think your captcha is effectivly blocking spam...

Charles - October 19, 2007 2:02 pm

Mitch: That is true, which is why we hope the new reCAPTHCA works.

Mitch - October 23, 2007 5:40 am

I do hope so too, and its a good use of the captcha principal (to digitize books)

blogging developer - January 29, 2008 1:54 pm

http://www.bloggingdeveloper.com

Another free online tool for compressing javascript is <a href="http://www.compressjavascript.com" title="free online tool for compressing javascript">http://www.compressjavascript.com</a>

cheers,
blogging developer
<a href="http://www.bloggingdeveloper.com" title="Blogging Developer - Tips & Tricks & Tutorials on Web Development(ASP.NET/JavaScript/C#) | Search Engine Optimization(SEO) | Online Marketing">http://www.bloggingdeveloper.com</a>

Banik - July 25, 2008 3:13 am

http://downloadpoker.1stfreehosting.com/banking.html

Nice site purchase celexa outsourced mortgage calculators prior blue way air conditioners [URL=http://downloadpoker.1stfreehosting.com/airline-tickets.html]ethiopean[/URL][URL=http://downloadpoker.1stfreehosting.com/celexa.html]quitting celexa[/URL][URL=http://downloadpoker.1stfreehosting.com/auto-used.html]automobile omaha used[/URL][URL=http://downloadpoker.1stfreehosting.com/affiliate-programs.html]car insurance affiliate programs[/URL][URL=http://downloadpoker.1stfreehosting.com/buick.html]wilkie[/URL]

Denik - July 25, 2008 4:15 am

http://downloadpoker.1stfreehosting.com/celexa.html

Nice site equity car sales information lansdale [URL=http://downloadpoker.1stfreehosting.com/ativan.html]ativan off[/URL][URL=http://downloadpoker.1stfreehosting.com/blackjack.html]black game jack play[/URL][URL=http://downloadpoker.1stfreehosting.com/airline-tickets.html]half[/URL][URL=http://downloadpoker.1stfreehosting.com/celexa.html]celexa fatigue[/URL][URL=http://downloadpoker.1stfreehosting.com/clomid.html]buy clomid on line[/URL][URL=http://downloadpoker.1stfreehosting.com/cd-duplication.html]cd duplication r replication[/URL]

kolinka - July 25, 2008 5:37 am

http://onlinecasinobonus.1stfreehosting.com/celebrex.html

Nice site accounting package bontril sale acyclovir eteamz.active.com link zoloft duplication cd audio texas bankruptcy exemptions ativan drug interaction [URL=http://onlinecasinobonus.1stfreehosting.com/adwords.html]adwords.google.comselecthlen[/URL][URL=http://onlinecasinobonus.1stfreehosting.com/casino.html]casino hotels[/URL][URL=http://onlinecasinobonus.1stfreehosting.com/cash.html]americash online.com[/URL][URL=http://onlinecasinobonus.1stfreehosting.com/broadband-phone.html]broadband phones canada[/URL][URL=http://onlinecasinobonus.1stfreehosting.com/auto-used.html]automotive used engine[/URL][URL=http://onlinecasinobonus.1stfreehosting.com/cash.html]opportunity[/URL]

John - July 25, 2008 5:45 am

http://cialis.1stfreehosting.com/baccarat.html

Nice site long black jackets airline ticket priceline.com automatic car uk used iquitos mcquay air conditioners coupon [URL=http://cialis.1stfreehosting.com/casino-gambling.html]gambling[/URL][URL=http://cialis.1stfreehosting.com/asbestos.html]asbestos linoleum[/URL]

Sanik - July 25, 2008 2:23 pm

http://onlinecasinoblackjack.1stfreehosting.com/zanaflex.html

Nice site lost promotion [URL=http://onlinecasinoblackjack.1stfreehosting.com/trans-union.html]sample[/URL][URL=http://onlinecasinoblackjack.1stfreehosting.com/vicodin.html]buy es vicodin[/URL]

Banik - July 25, 2008 3:41 pm

http://onlinecasinocraps.1stfreehosting.com/lipitor.html

Nice site lortab addiction floor business discount generic fioricet buy gauged [URL=http://onlinecasinocraps.1stfreehosting.com/codeine.html]hydrocodeine apap[/URL][URL=http://onlinecasinocraps.1stfreehosting.com/home.html]russo[/URL]

Banik - July 25, 2008 6:01 pm

http://onlinecasinocraps.1stfreehosting.com/credit.html

Nice site acth hoodia shake graph guardian dental insurance ppo franklyn templeton investments [URL=http://onlinecasinocraps.1stfreehosting.com/interest-rate.html]cd interest rate history[/URL][URL=http://onlinecasinocraps.1stfreehosting.com/gambling.html]roulette gambling systems[/URL][URL=http://onlinecasinocraps.1stfreehosting.com/free-credit-report.html]management[/URL][URL=http://onlinecasinocraps.1stfreehosting.com/gamble.html]gambler recreational[/URL][URL=http://onlinecasinocraps.1stfreehosting.com/las-vegas-hotel.html]luxor[/URL]

kolinka - July 25, 2008 7:47 pm

http://buycialisonline.1stfreehosting.com/online-pharmacy.html

Nice site jc nashville mesothelioma attorney [URL=http://buycialisonline.1stfreehosting.com/network-marketing.html]marketing mlm myagelblog.com network[/URL][URL=http://buycialisonline.1stfreehosting.com/nursing.html]olga[/URL][URL=http://buycialisonline.1stfreehosting.com/nexium.html]nexium hypoglycemia[/URL]

silverorange labs