minimizing Javascript code

When using Web 2.0 technologies for creating those wonderful, allmighty browser applications that every customer can be made happy with, the Javascript code on the browser side can easily become thousands of lines.

Newer browers (FF>=3, IE=>7) deal quite nicely with huge Javascript files, but older ones have a hard time dealing with it. Load times ten times longer compared to newer browsers are not seldom.

One way to improve initialization time on those browsers is to crunch the Javascript code to be as small as possible. One easy way for example would be to remove all unnecessary line breaks and white spaces.

However, this is by no means the optimum and removed line breaks and white spaces would render the code almost unreadable for yourself.

The solution is to use one of the many Javascript crunchers, minifiers, packers or whatever they are called.

So here come of the open source crunchers I’ve tried so far:

  • JSMin – the JavaScript Minifier [1]
    The major drawback I found here is that it is not unlikely to break your code (it broke mine πŸ™‚ and that the optimization is quite simplistic. Furthermore it is “quite” old (2003).

    On the other hand, there is even an apache module making the crunshing process completely transparent [2]

  • pack:tag [3]
    Used as a JSP-Taglib, one can easily have it dynamically crunch JavaScript and CSS files on the fly. It can even configured to combine many files into one and deliver that one to the clients.

    Major drawback here is that it is limited to JSP and that it has no commandline interface at all (but one could argue if it requires one of course πŸ™‚

  • jawr [4]
    A Servlet oriented approach with many interfaces for the “default” frameworks such as Spring or Struts. One nice feature is that you can split your JS files into human digestable parts and have jawr combine (and crunch and optimize) them for deployment.

    The major drawback here is that it is limited to the Java world and once more that it lacks a commandline interface.

  • Yahoo YUI Compressor [5]
    This is one of the first crunchers I’ve played with – and it is still the one I like most.

    It works with both JS and CSS files, can be easily configured on what to optimize using commandline switches (yes, I admit: I like commandline tools πŸ™‚

    Due to its commandline nature, it can easily be integrated into any deployment process, making it available for any type of project at least I have to deal with.

If you want to compare both resulting size and crunching time of some prominent compression tools, there is a nice comparison service at http://compressorrater.thruhere.net/

[1] http://crockford.com/javascript/jsmin
[2] http://code.google.com/p/modjsmin/
[3] http://www.galan.de/projects/packtag
[4] https://jawr.dev.java.net/
[5] http://developer.yahoo.com/yui/compressor/

Spread the love

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of

Post Navigation