Minify the Javascript libraries and CSS files

In this post I show you how to minify JavaScript and CSS files which is very useful for improving web application performance. In my recent post – Measuring Web Mapping Application Performance using YSlow – part 2 I talked about minifying the JavaScript and CSS files used in the web mapping application but really dint discuss how to go about doing this.

Before we go further lets understand what do we mean my “minify” – By definition minify is to make it smaller. So in terms of JavaScript and CSS files, we can make the files smaller by removing the white spaces created by tab or space or new line and by removing any comments in the files and thus reducing the file size and improving download speed and response time.

Also this is a good time to clarify that we are aiming to minify and not obfuscate. Though obfuscation provides greater reduction in file size there are serious consequences to it.  For example: after obfuscation you will encounter many JavaScript errors due to the style of writing code or the naming conventions or for any other reason, so its very hard and time consuming to fix the source. Also the difference between Obfuscation and minification in terms of file size for any moderately sized JavaScript file is 5% or less. Definitely not worth the headache.

There are many tools to help you minify : JSMin, Rhino, …. , YUI Compressor

After some reasearch and inclination towards Yahoo, I decided to use YUI Compressor. Its a simple Java command line tool with good documentation (Link).

Here is a simple batch file which recursively minifies both javascript and css files in your application:

Echo "Minify batch file"
Echo "Deleting older minified files if any"
if exist packed\*.js del *.js
if exist packed\*.css del *.css

Echo "Minifying Javascript files"
for /F %%F in ('dir /b *.js') do java -jar yuicompressor-2.3.5.jar --nomunge --preserve-semi --disable-optimizations %%F -o packed\%%F
Echo "Minifying CSS files"
for /F %%F in ('dir /b *.css') do java -jar yuicompressor-2.3.5.jar --nomunge --preserve-semi --disable-optimizations %%F -o packed\%%F

Echo "Press any key to exit"
pause

Here is how to run the batch file:

1. Download the latest YUI Compressor Jar file

2. Place the jar file and the batch file in the folder of your web application where Javascript and/or CSS files exist.

Note: Edit the batch file to make sure its pointing to the right (exact name) jar file

3. Run the batch file (double click) and you will see a new directory called packed with all the minified files. You can then choose to either manually replace the files with newly minified files or make changes to your application to use minified files.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: