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)
<pre>
gzip -c file.js >file.gz.js
</pre>
- 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
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
Another free online tool for compressing javascript is http://www.compressjavascript.com
cheers,
blogging developer
http://www.bloggingdeveloper.com
Felix - August 25, 2008 12:12 PM
Does anyone have any experience with Performance Testing an online site with new code that is now compressed JS? Should I be expecting Performance that is alot better than before?
Are there any other ways I can improve Performance without buying new hardware?
Thanks Felix
Mike Gauthier - September 19, 2008 8:06 PM
Felix,
Performance of compressed JavaScript should be roughly equivalent. The file size is not the most difficult part of the JavaScript interpreter's job.
You will, however, notice improvements in download speed which translates into page load times.
Johann - August 11, 2009 1:35 PM
I used ShrinkSafe before, but then switched to YUI (easier to use and also works with CSS) + gzip.
The latest thing I'm using on my QR Code Generator is to asynchronously load the JavaScript with a small (243 B) loader at the bottom of the page.
Makes performance absolutely awesome :-)