For a heavy JavaScript web application, one of the most important things you should do before making it public is to obfuscate and compress JavaScript and CSS. The reason to do that is obvious: your app will be faster and safer.

When the web code is not optimized, it makes your visitors waste bandwidth and wait longer for the page to load. Besides, it makes your hard work easy to steal and reverse engineer.

I’ve tried some solutions for obfuscating and compressing JavaScript/CSS from both commercial vendor and open-source community. Here are my 2 cents about the tools.

Dojo ShrinkSafe

This was the first tool I used to compress JavaScript. Claimed as the “safe” tool, it does very little in term of obfuscating codes but just replace variable, argument names with numbers as example below.

Original codes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Run the tool with command line:

1

java -jar custom_rhino.jar -c infile.js > outfile.js 2>&1

And the result looks like:

1
2
3
4
5
6
7
8
9
10

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

You’ll get about 50% reduction in code length — not too bad. I like Dojo ShrinkSafe because I’ve never run into trouble with codes shrunk by the tool and in most of cases I can still debug JavaScript codes after compressed (but some smart people can read your codes too).

  • Pros: Free, safe, reliable.
  • Cons: No visual UI, not optimal compression, no “real” obfuscation.

Read more and download Dojo ShrinkSafe here or try online tool here.

YUI Compressor

YUI Compressor is a part of YUI library and in active development now. The latest version (2.3.5) was just released a few weeks ago.

Better than Dojo SS, YUI Compressor supports both JavaScript and CSS compression and I’m quite satisfied with the compression ratio (about 10% smaller than Dojo SS or JSMin).

Using this tool is much similar to Dojo SS - it’s a Java command-line tool and I often write Ant scripts (see the excerpt below) in my projects to automate all concatenating/compressing tasks.

1
2
3
4
5
6
7
8
9
10
11

<!--–   Create feedready-all.js –-->
<concat destfile="${basedir}/scripts/feedready-all.js" fixlastline="”yes”" append="no">
 
<filelist dir="${basedir}/scripts"
    files="fr_common.js, fr_feedsnap.js, fr_mod_feedreader.js, fr_mod_save.js, fr_viewer.js"/>
 
<!--– Minify feedready-all.js into feedready-min.js–-->
<java fork='true' jar="C:\yuicompressor-2.2.4\build\yuicompressor-2.2.4.jar">
    <arg line="-o"></arg>
</java>
</concat>

I think this tool is the best one among other open-source solutions like Douglas Crockford’s JSMIN, Dean Edwards’ Packer and Dojo SS mentioned above.

  • Pros: part of YUI, support both JS and CSS, good compression ratio
  • Cons: No GUI, Java-dependent

Please go to official home page of YUI Compression for detail usage instruction.

Jasob JavaScript and CSS Obfuscator

Jasob Obfuscator offers a desktop GUI (for Windows only) that helps you easily creating “Project” for obfuscation.

Jasob Obfuscator GUI

This is a commercial tool used by many companies including Cisco Systems, Autodesk, Saxo Bank A/S, Swisscom AG/ Innovations etc. so you can trust the reliability of the product.

The killer feature of Jasob Obfuscator is capable of reading JavaScript/CSS code embedded in HTML, ASP, JSP, PHP, XML… pages and do obfuscation. It can also modify server-side code to match up with changes made by the obfuscation.

I haven’t used this tool in a real project (I don’t want the above features because I’ve hardly embedded long JavaScript code into server-side pages) but my trial to compress a script file for SHA-1 hash generator resulted in a slight bigger file in comparison with the one compressed by YUI Compressor (2,945 over 2,596 bytes). However, I suppose it’s not too large different.

  • Pros: Commercial product, many advanced features, GUI, (updated) best compression ratio.
  • Cons: $199 US for single developer license, NOT the best compression ratio.

Find more about Jasob JS/CSS Obfuscator here.

Summary

Personally, I prefer open-source solutions and find YUI Compressor is the best one in both terms of compression ratio and features it provides. It’s especially convenient when used in Java-based development environment (like Eclipse, NetBeans) for I can create automated tasks with Ant.

However you may want commercial solution like Jasob Obfuscator if your project contains many JavaScript codes scattered in HTML or server pages.

I’ve tried to compress a script file (for SHA-1 hash) with original size of 5,752 bytes using above tools, and here is result for your consideration.

File Size (bytes) Compression ratio
Original (sha1.js) 5,752 0%
Dojo SS compressed 2,950 48.7%
YUI Compressor compressed 2,596 54.9%
Jasob Obfuscator compressed 2,945 2,310 48.8% 59.8%

Of course, compression efficiency is just one factor you should consider when selecting a tool for your project.

Please download compressed script files and a test page to validate all scripts working properly after being compressed.

Update: Following guides by Jasob Support, I did a new test with the tool: generating new (shorter) names for all variables and private functions. Result is the obfuscated file of only 2,310 bytes, nearly 60% reduction in size, that makes Jasob WINNER!

Related Reading




Free Website Magazine: Know more than your competitors with Website Magazine

Don't forget to subscribe so you don't miss out on future posts!

Share and Enjoy:

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • StumbleUpon
  • DZone
  • del.icio.us
  • Reddit
  • Mixx
  • Technorati
  • Sphinn
  • Facebook
  • Google
  • SphereIt
  • BlinkList
  • Furl
  • Ma.gnolia
  • Slashdot
  • Spurl
  • TailRank
  • TwitThis

Related Posts