A "safe" way to compress your JavaScript code...

Posted by Dan on Feb 6, 2006 @ 6:30 PM

If you ever do any heavy JavaScript development, you know how large cross browser libraries. The file sizes of these libraries get very large, very quickly. Usually JavaScript files contain a lot of whitespacing and (hopefully) commenting, which can drastically increase the file size—which means for longer download times.

There are many solutions to this problem, but most involve the basic idea of stripping out commenting and taking out the unneccesary whitespacing. While these simple steps can reduce you files nicely, there are better ways.

Alex Russell, the project lead for the Dojo JavaScript Toolkit, has written an open source compression tool called SourceSafe. SourceSafe is based on Rhino, the JavaScript engine used in the Mozilla projects.

So what you ask? Well, this compression tool actually uses the rendering engine to evaluate your code. This means it can replace local variables within your functions, to a name that's much smaller, but just as meaningful to your code. This results in much smaller file sizes. It also means you can use more meaningful variable/function names in your code—you don't have to worry about using short cryptic names just to try to save a few bytes.

Using SafeSource to compress the following code:

function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }

    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

function MyFunc(){
    // this is a top-level function
}





// we've got multiple lines of whitespace here

You'd end up with the following:

function MyClass(){
this.foo=function(_1,_2){
var _3=parseInt(_1)+parseInt(_2);
return _3;
};
var _4=function(){
};
}
function MyFunc(){
}

If you look carefully, you'll notice that not only has the erroneous whitespacing and comments been removed, but when possible variable names have been replaced with a shorter variable name. However, the "foo()" method in the MyClass object was not changed, which means the functionality of the JavaScript object.

If you want to use SafeSource, there are two ways you can use it to compress your files. You can use the free online version or you can download the latest version of the jar from the Dojo Subversion repository.

If you download the jar file, there's a lot you can do. You could combine it with an ANT build script when pushing code to your server, or just use a little batch file to compress the files for you. Here's a little batch file I whipped up for just that purpose. Cut-n-paste this code into a file and name it "safesource.bat" (or whatever you like.)

@echo off

REM ************************************************************
REM set the javapath variable to the directory where the
REM Java SDK resides that you want to use. usually the most
REM current version of the SDK exists in the path statement,
REM which means you can leave this blank
REM ************************************************************
set javapath=

REM ************************************************************
REM set the dojocompressor variable to the full path of where
REM you installed the custom_rhino.jar file
REM ************************************************************
set safesource=c:\jars\custom_rhino.jar

%javapath%java -jar %safesource% -c %1 >
%2 2>&1

Save the file into a directory that in your PATH environment variable so you can run it from any directory. Update the "safesource" variable to the full path of where you downloaded the custom_rhino.jar file. The javapath variable should be the full path to your Java SDK directory, but you can leave it blank if your Java SDK is mapped in your PATH environment variable.

Categories: JavaScript, HTML/ColdFusion, Flex/Flash, Java

Comments for this entry have been disabled.