Performance is always something to be looking for when developing web applications. One possible approach to improve performance of such applications is to compress our JavaScript and CSS files. This will make them smaller and thus faster to download.

A JavaScript compressor could for example turn this:

function helloWorld() {

    alert("Hello World");

}

into something like this:

function helloWorld() {alert("Hello World");}

It gets unreadable, but smaller. When applied to several, potentially large files, this type of compression can help us save a lot of kbytes of download from the server to a client, thus making the page load faster.

Since this is a simple strategy, it’s tempting to write our small routine to apply this compression to our files; but such a trouble is not necessary. There are libraries out there do this for us. We will use the YUI Compressor, from Yahoo, here.

The usage pattern I like is to compress all JavaScript and CSS files right before packaging the application. You can do this manually, and the official YUI Compressor site has instructions on how to do it. But this way you will probably end up forgetting to do so. Since we already use Ant in our projects at IPTI, we also use Ant to automate this compression step.

The first step to use YUI inside Ant is to get the ant task jar file here. Put the jar file in Ant’s classpath and you are ready to continue. PS.: The last time I tried, the YUIAnt site was unreachable. If that is still case for you when you read this, please let me know and I can make the version I have available.

Now, inside your Ant file, declare the yuicompressor task. Something like this:

<taskdef name="yuicompress"
  classname="com.yahoo.platform.yui.compressor.YUICompressTask"
  classpathref="lib.path"/>

and then use it like this:

<target name="minify-js" description="minify the project's JS files">
  <echo message="minifying JS files" level="info"/>
  <yuicompress charset="UTF-8" outputfolder="distdir">
    <fileset dir="srcdir" includes="**/*.js"/>
  </yuicompress>
</target>

Replace all the js by css‘s and you are set for CSS files as well.

Now, you probably have an Ant target to build your application war file – let’s call it dist. Just put minify-js and minify-css (supposing you created this second one) in dist‘s depends attribute. Now, each time you build your application, its JavaScript and CSS files will get compressed!

The last problem is that it doesn’t make sense to do this compression during normal development. The files would be impossible to read and debug properly. The solution again is very simple: add a property to the ant file, that says whether the compression should be executed or not.

This should suffice:

<property name="minify.js" value="true"/>

and add this to the minify-js (and css) targets:

<target name="minify-js" if="minify.js"
    description="minify the project's JS files">

An important detail to notice is that, to disable the compression you must comment the property altogether. Changing its value from “true” to “false” will do no good – actually, the value can be anything, it just need to be there.