It is immensely important to minify your javascript/css files.  Just as Scott Hanselman has recently felt the pain points on the adverse affects and blogged about it here: http://bit.ly/pngcwC

Currently, at my job we employ a build process task to concatenate and minify our files.  While this is great and really helps our performance, it would be nice if we could just generate the “squished” files and then depend on output caching/client caching to hold on to the generated output.  The the process of hot-fixing our text assets could be simplified down to just sticking the files out in production and let the process handle the rest.

A bit of backstory to this, currently we use a methodology that assumes all the javascript and css files are grouped by folder and on the production servers we will render “<script src=’js/folderName_folderVersion.js’>” where folder version is essentially the date of the folder’s latest generated “squished” file.  So the following example assumes that a request will come in for a “js/folderName_folderVersion.js” and that we will need to strip out the “_folderVersion.js” part and then read through the javascript files in corresponding directory.

I used Microsoft’s Ajax minifier: http://ajaxmin.codeplex.com/ (that’s where you can find the “Minifier” and “CodeSettings” classes specified below)

Enjoy!

public class JavascriptHandler : IHttpHandler
{
    private readonly static bool enabledAutoMinified = ConfigurationManager.AppSettings["enableAutoMinified"] == "true";
    private readonly static Minifier minifier = new Minifier();
    private readonly static CodeSettings minifierSettings = new CodeSettings()
    {
        /* Minifier code settings here */
    };

    bool IHttpHandler.IsReusable
    {
        get { return false; }
    }

    void IHttpHandler.ProcessRequest(HttpContext context)
    {
        /*
         * logic for getting folder name and file info here
         *
         */

        // if the user sent us a "if-modified-since" header, compare the date to the cache date
        DateTime modifiedSince;
        var header = context.Request.Headers["If-Modified-Since"];
        if (header != null && DateTime.TryParse(header, out modifiedSince) && webInfo.DateTime == modifiedSince)
        {
            // send a 304 and exit out
            context.Response.StatusCode = 304;
            context.ApplicationInstance.CompleteRequest();
        }
        else
        {
            // set the cache headers
            var cacheHeader = context.Response.Cache;
            cacheHeader.SetValidUntilExpires(true); // cache this server-side
            cacheHeader.SetCacheability(HttpCacheability.Public); //tell the client to cache this file
            //cache for a long time, we are 100% dependant on the JS control
            // to give us a unique name everytime the underlying files change
            cacheHeader.SetExpires(DateTime.Today.AddDays(365));
            cacheHeader.SetMaxAge(TimeSpan.FromDays(365)); //cache for a long time
            cacheHeader.SetLastModified(webInfo.DateTime); //inform the client of what we know to be the lastmodified date

            // IIS won't gzip the request if the return content type isn't the following:
            context.Response.ContentType = "application/x-javascript";
            //get the folder/file that correspond to this request
            var javascriptFolder = context.Server.MapPath(folderPath);
            var javascriptFile = javascriptFolder + ".js";

            string[] files = new string[] { };
            if (Directory.Exists(javascriptFolder))
            {
                files = Directory.GetFiles(javascriptFolder);
            }
            else if (File.Exists(javascriptFile))
            {
                files = new[] { javascriptFile };
            }
            //run through all the files in the folder minify them and concate them
            foreach (var fileName in files)
            {
                var js = File.ReadAllText(fileName);
                if (enabledAutoMinified)
                {
                    var minifiedJs = minifier.MinifyJavaScript(js, minifierSettings);
                    // write the minified js directly into the output stream
                    context.Response.Output.Write(minifiedJs);
                    // Microsoft Ajax Minifier removes the last semi-colon
                    //  since we are concatenating then we should put it back
                    //  line break so that we can deciminate the different files
                    context.Response.Output.WriteLine(";");
                    foreach (var error in minifier.ErrorList)
                    {
                        // write any errors into the trace so we can debug later
                        context.Trace.Warn("minifier", error.ToString());
                    }
                }
                else
                {
                    // if we aren't minifying then just concatenate all the js files
                    context.Response.Output.Write(js);
                }
            }
        }
    }
}