Friday, March 20, 2009

Cached JavaScript minification on the fly – ASP.NET and HttpHandler

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 code
The HttpHandler called JSMinify is invoked on all requests to *.js files. Activate the handler I web.config:

<httpHandlers>
<add verb="*" path="*.js" type="Portal.Web.API.Handlers.JSMinify,Portal.Web"/>
</httpHandlers>

Here is the Handler. As you can see I use the Request.PhysicalPath as the path to the file.

using System.Web;
namespace Portal.Web.API.Handlers
{
public class JSMinify : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpResponse objResponse = context.Response;
string file = context.Request.PhysicalPath;
objResponse.Write(PCache.FileCache.GetTextFile(file,new Parsers.JSMinifyParser()));
}
public bool IsReusable
{
get
{
return true;
}
}
}
}

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.

using System.IO;
using System.Web.Caching;
using Portal.PCache.Parsers;

namespace Portal.PCache
{
public static class FileCache
{
/// <summary>
/// Gets the text file.
/// </summary>
/// <param name="path">The path.</param>
/// <returns></returns>
public static string GetTextFile(string path)
{
if(Exists(path))
{
return Get(path).ToString();
}
else
{
string data = ReadFile(path);
Add(data,path);
return data;
}
}
/// <summary>
/// Gets the text file using a file parser.
/// </summary>
/// <param name="path">The path.</param>
/// <param name="parser">The parser.</param>
/// <returns></returns>
public static string GetTextFile(string path, IFileParser parser)
{
if (Exists(path))
{
return Get(path).ToString();
}
else
{
string data = parser.Parse(path);
Add(data, path);
return data;
}
}

/// <summary>
/// Reads the file form disk.
/// </summary>
/// <param name="path">The file path.</param>
/// <returns></returns>
private static string ReadFile(string path)
{
TextReader s = new StreamReader(path);
string data = s.ReadToEnd();
s.Close();
s.Dispose();
return data;
}

/// <summary>
/// Adds the specified cache object.
/// </summary>
/// <param name="cacheObject">The cache object.</param>
/// <param name="keyName">Name of the key.</param>
private static void Add(object cacheObject, string keyName)
{
System.Web.HttpContext.Current.Cache.Insert(keyName, cacheObject, new CacheDependency(keyName));
}

/// <summary>
/// Check if object exists in cache
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
private static bool Exists(string key)
{
if (System.Web.HttpContext.Current.Cache[key] != null)
{
return true;
}
else
{
return false;
}
}

/// <summary>
/// remove object from cache
/// </summary>
/// <param name="key"></param>
private static void Remove(string key)
{
System.Web.HttpContext.Current.Cache.Remove(key);
}

/// <summary>
/// get object from cache
/// </summary>
/// <param name="key"></param>
/// <returns></returns>
public static object Get(string key)
{
return System.Web.HttpContext.Current.Cache[key];
}
}
}


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.

//Parser interface
namespace Portal.PCache.Parsers
{
public interface IFileParser
{
string Parse(string s);
}
}
//Parser class
using Portal.PCache.Parsers;

namespace Portal.Web.API.Parsers
{
internal class JSMinifyParser : IFileParser
{
#region IFileParser Members

public string Parse(string s)
{
JavaScriptMinifier mini = new JavaScriptMinifier();
string outs = mini.Minify(s);
return outs;
}

#endregion
}
}
//JSMin (modified)
using System;
using System.IO;

/* 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 of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies 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 OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, 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 THE
SOFTWARE.
*/

namespace Portal.Web.API
{
public class JavaScriptMinifier
{
const int EOF = -1;

StreamReader sr;
StringWriter sw;
int theA;
int theB;
int theLookahead = EOF;


//static void Main(string[] args)
//{
// if (args.Length != 2)
// {
// Console.WriteLine("invalid arguments, 2 required, 1 in, 1 out");
// return;
// }
// new JavaScriptMinifier().Minify(args[0], args[1]);
//}

public string Minify(string src) //removed the out file path
{
using (sr = new StreamReader(src))
{
using (sw = new StringWriter()) //used to be a StreamWriter
{
jsmin();
return sw.ToString(); // return the minified string
}
}
}

/* jsmin -- Copy the input to the output, deleting the characters which are
insignificant to JavaScript. Comments will be removed. Tabs will be
replaced with spaces. Carriage returns will be replaced with linefeeds.
Most spaces and linefeeds will be removed.
*/
void jsmin()
{
theA = '\n';
action(3);
while (theA != EOF)
{
switch (theA)
{
case ' ':
{
if (isAlphanum(theB))
{
action(1);
}
else
{
action(2);
}
break;
}
case '\n':
{
switch (theB)
{
case '{':
case '[':
case '(':
case '+':
case '-':
{
action(1);
break;
}
case ' ':
{
action(3);
break;
}
default:
{
if (isAlphanum(theB))
{
action(1);
}
else
{
action(2);
}
break;
}
}
break;
}
default:
{
switch (theB)
{
case ' ':
{
if (isAlphanum(theA))
{
action(1);
break;
}
action(3);
break;
}
case '\n':
{
switch (theA)
{
case '}':
case ']':
case ')':
case '+':
case '-':
case '"':
case '\'':
{
action(1);
break;
}
default:
{
if (isAlphanum(theA))
{
action(1);
}
else
{
action(3);
}
break;
}
}
break;
}
default:
{
action(1);
break;
}
}
break;
}
}
}
}
/* action -- do something! What you do is determined by the argument:
1 Output A. Copy B to A. Get the next B.
2 Copy B to A. Get the next B. (Delete A).
3 Get the next B. (Delete B).
action treats a string as a single character. Wow!
action recognizes a regular expression if it is preceded by ( or , or =.
*/
void action(int d)
{
if (d <= 1)
{
put(theA);
}
if (d <= 2)
{
theA = theB;
if (theA == '\'' || theA == '"')
{
for (; ; )
{
put(theA);
theA = get();
if (theA == theB)
{
break;
}
if (theA <= '\n')
{
throw new Exception(string.Format("Error: JSMIN unterminated string literal: {0}\n", theA));
}
if (theA == '\\')
{
put(theA);
theA = get();
}
}
}
}
if (d <= 3)
{
theB = next();
if (theB == '/' && (theA == '(' || theA == ',' || theA == '=' ||
theA == '[' || theA == '!' || theA == ':' ||
theA == '&' || theA == '|' || theA == '?' ||
theA == '{' || theA == '}' || theA == ';' ||
theA == '\n'))
{
put(theA);
put(theB);
for (; ; )
{
theA = get();
if (theA == '/')
{
break;
}
else if (theA == '\\')
{
put(theA);
theA = get();
}
else if (theA <= '\n')
{
throw new Exception(string.Format("Error: JSMIN unterminated Regular Expression literal : {0}.\n", theA));
}
put(theA);
}
theB = next();
}
}
}
/* next -- get the next character, excluding comments. peek() is used to see
if a '/' is followed by a '/' or '*'.
*/
int next()
{
int c = get();
if (c == '/')
{
switch (peek())
{
case '/':
{
for (; ; )
{
c = get();
if (c <= '\n')
{
return c;
}
}
}
case '*':
{
get();
for (; ; )
{
switch (get())
{
case '*':
{
if (peek() == '/')
{
get();
return ' ';
}
break;
}
case EOF:
{
throw new Exception("Error: JSMIN Unterminated comment.\n");
}
}
}
}
default:
{
return c;
}
}
}
return c;
}
/* peek -- get the next character without getting it.
*/
int peek()
{
theLookahead = get();
return theLookahead;
}
/* get -- return the next character from stdin. Watch out for lookahead. If
the character is a control character, translate it to a space or
linefeed.
*/
int get()
{
int c = theLookahead;
theLookahead = EOF;
if (c == EOF)
{
c = sr.Read();
}
if (c >= ' ' || c == '\n' || c == EOF)
{
return c;
}
if (c == '\r')
{
return '\n';
}
return ' ';
}
void put(int c)
{
sw.Write((char)c);
}
/* isAlphanum -- return true if the character is a letter, digit, underscore,
dollar sign, or non-ASCII character.
*/
bool isAlphanum(int c)
{
return ((c >= 'a' && c <= 'z') || (c >= '0' && c <= '9') ||
(c >= 'A' && c <= 'Z') || c == '_' || c == '$' || c == '\\' ||
c > 126);
}
}
}


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:

Kalle said...

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

Robert Pohl said...

Thanks Kalle!

Argg said...

Exactly what i was looking for, Thanks!

Chris Wigley said...

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!

Robert Pohl said...

Glad you liked it Chris!

Anonymous said...

well done

Anonymous said...

any plans to add code that will also merge all of the js files into one.

Anonymous said...

I found this site using [url=http://google.com]google.com[/url] And i want to thank you for your work. You have done really very good site. Great work, great site! Thank you!

Sorry for offtopic

Anonymous said...

Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!