Minification over obfuscation and other uglifier techniques

Every mature web application enters phase when you need to optimize overall performance. Unfortunately, choosing right DB, tuning your SQL queries and using sophisticated load-balancers are not enough if a user’s browser have to wait for a 5 seconds to load your overloaded AJAX-based grid. And if it happens, you have to think a lot and try many client-side optimization solutions. Now, developers have a great analyzing YSlow tool which can give you dozens of improvement tips. Actually, you can do all this work just analyzing response headers and content with another excellent tool - Firebug.

So, when our application had been optimized against almost all possible bottlenecks, it was decided to use a sort of compression (apart from gzip, which is already employed) of resource files (js, css) based on its structure.

After a little comparison and talks with DHTML gurus, I chose using minification instead of obfuscation, because the later one could be really source of evil bugs. Nowadays, the best supported minifier I found is YUI Compressor.

YUI Compressor

I chose YUI Compressor because it is Java-based free open-sourced tool which means that I always can investigate why something goes wrong, and probable contribute something valuable. This tool can be used as a standalone command line application or used from your code instantiating necessary classes. It could parse javascript files as well as css. Also there is wide range of parameters (e.g. shorten local variables or not, preserve semicolons or not).

Ant script

Good overview of the tool usage from Ant script is here. However, it is just calls to the compressor as to command-line program, which is verbose and sometimes not appropriate. Usually for such tools, there are custom Ant tasks. And it was obvious, that since sources of the tool is available, the Ant task should exist for the YUI Compressor too. After some googling, I found what I needed - semi-abandoned page Minifying JS/CSS. Many thanks to the author - Philippe Mouawad, well done! I would like to see this patch in the release and reference on the official site.

Simple example of usage:

    <path id="yuicompressor.classpath">
        <fileset dir="${yuicompressor.dir}">
            <include name="**/yuicompressor-2.2.5.jar"/>
            <include name="**/YUIAnt.jar"/>
            <!– include name="**/rhino*.jar"/ –>
        </fileset>
    </path> 

    <target name="minify-js-css" description="Minifiy a set of files">
            <taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
                <classpath>
                    <path refid="yuicompressor.classpath"/>
                </classpath>
            </taskdef>

            <delete dir="${js-min.dir}"/>
            <mkdir dir="${js-min.dir}" />
            <yuicompress linebreak="300" warn="false" munge="yes" preserveallsemicolons="true"
                outputfolder="${js-min.dir}" >
                <fileset dir="${js.dir}" >
                    <include name="**/*.js" />
                </fileset>
            </yuicompress>
        </target>
 

Encountered problems

Everything works fine except one malicious trouble, I was struggling with for a day. If Rhino (which is stated as dependency library)
was included in task classpath, all returning characters “\n” was pasted as a new line, and an JS error occurred.

var a = "aaa\nbbb";
// turns after minification into:
var a = "aaa
bbb";
 

This bug was eliminated by removing Rhino jar from classpath.