Subscribe To the Rob Blog

Friday, March 20, 2009

If you have a lot of external JavaScript files you should always have a minified version of them when you go public. All popular JS frameworks such as JQuery and Prototype have minified versions, often on a CDN. But how do you do when you have a lot of your own code that you need to minify? There are a lot of code libraries that handles the minification such as JSMin and YUI Compressor that compress your .js files to minified .js files so you can upload them to your server.My problem is that I have a lot of JavaScript files that are often updated and I don’t want to manually minify the files that are updated. So I figured: Why not do it on the fly? Map all *.js requests on the server to a HttpHandler that minifies the file, and returns the new version. Also add a little cache so it only does this once.So now I don’t need to worry about a thing when it comes to minify JavaScript files, the server takes care of that automatically!Here is the codeThe HttpHandler called JSMinify is invoked on all requests to *.js files. Activate the handler I web.config:

Here is my FileCache class that looks for a file on disk, and adds it to the web cache. The method GetTextFile is overloaded to handle a parser that implements IFileParser. I created IFileParser so I can have custom text parsing before I add the text into the cache. I use the file path as the cache key, and the cache settings are so that the cache will expire when the files is updated.

In the class JSMinifyParser I have a modified version of the popular library called JSMin. The original JSMin converts one file to another, but I want it to read a file and return the minified string version of that file. So what I did was basically to change the StreamWriter to a TextWriter, and made the method return the string.

/* Originally written in 'C', this code has been converted to the C# language. * The author's copyright message is reproduced below. * All modifications from the original to C# are placed in the public domain. */

/* jsmin.c 2007-05-22

Copyright (c) 2002 Douglas Crockford (www.crockford.com)

Permission is hereby granted, free of charge, to any person obtaining a copy ofthis software and associated documentation files (the "Software"), to deal inthe Software without restriction, including without limitation the rights touse, copy, modify, merge, publish, distribute, sublicense, and/or sell copiesof the Software, and to permit persons to whom the Software is furnished to doso, subject to the following conditions:

The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software.

The Software shall be used for Good, not Evil.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.*/

So that is basically it! What you need to think about is to map *.js file types to be handled ASP.NET in the IIS settings, otherwise the HttpHandler won’t be triggered. Also there are some differences how you add the handler in web.config for IIS6 and IIS7. Here is a lot of usefull info on IIS7 http://learn.iis.net/page.aspx/26/installing-and-configuring-iis-70/

9 comments:

Hej, god post!I've been thinking of doing something like this for a long time I just haven't got my butt of...My thoughts have been to include the minifying task into the build process but this seems just much simpler and by doing it this way you could always code so that you can debug the code even after deployment!Cheers /Kalle

Rob, all I can say is thank you, thank you, thank you. Not only have you saved me time, but you've also provided a well-coded, well-commented bit of code. I really appreciate people like you taking the time to create these little gems and share them with the developer world. Kudos to you, sir!