Blog About Contact

Automatic Javascript and CSS Compression For Java Webapps

Published Wed, 1 Jul 2009 • 3 comments

One of the "no brainer" ways to make your web sites / web apps load faster for users is to utilise Javascript and CSS compression.

This means at least, stripping out all the white-space, comments and other non-essential character data from your files, but can also mean code compression / obfuscation as well.

One of the best tools for this task is Yahoo's YUI Compressor, which does a fantastic job of compressing down both .js and .css files.

Better yet, it is very easy to automate this compression process as part of your Ant build process for a standard Java web application.

Read on for the details...

We'll need a couple of add-on JAR libraries; firstly (and most obviously), YUI Compressor, which is available from Yahoo as a single JAR which can be placed into our "lib/" folder of our web project (or similar location - I will assume lib/ for now).

Secondly we will need an add-on task for Ant in the ant-contrib project which allows us to iterate the file system, performing tasks (the <foreach> task). Note, that the sourceforge site for the ant-contrib project is a little confusing, you may have to view "all downloads" to find the actual ant-contrib JAR download.

Again place this download in the lib/ folder of the web project.

Now we can change our build file to compress...

    <taskdef resource="net/sf/antcontrib/">
            <pathelement location="lib/ant-contrib-0.6.jar"/>

    <target name="yuicompress"
            description="Compresses a CSS or JS file using YUI compressor">
        <java jar="lib/yuicompressor-2.4.2.jar" fork="true">
            <arg value="-o"/>
            <arg value="${yuicFile}.comp"/>
            <arg value="${yuicFile}"/>
        <move file="${yuicFile}.comp" tofile="${yuicFile}"/>

    <target name="-post-compile">
        <foreach target="yuicompress" param="yuicFile">
                <fileset dir="build">
                    <include name="**/*.js"/>
                    <include name="**/*.css"/>

The key task to invoke is the "-post-compile" task. This is based off a standard Netbeans web project build.xml, but you can use this in a free-form build.xml just as easily by calling the -post-compile target as a dependancy of your packaging / WAR target.

Essentially after the build step and prior to WAR packaging we compress in-place the .CSS and .JS files in the build folder. The nice thing about this approach is that we can work on human-readable CSS and Javascript in our IDE but deploy compressed content automatically. There is no need to maintain a "myCode.js" and "myCode.min.js" and you can even work with the "non-minified" versions of your favourite API should you wish to as well.

Yahoo! :)

About the Author

Richard Nichols is an Australian software engineer with a passion for making things.

Follow him on twitter or subscribe by RSS or email.

You might also enjoy reading -

Discuss / Comment

There are 3 comments.

Add a comment

  • {{e.error}}

Thanks for your comment!/

Valid email address required.
Posting message, please wait...