Combine/Compress/Minify JavaScript, CSS in Asp.net

Introduction:

When we design and develop the website, the performance is in the core of development. The system you are developing must produce the result with high speed. For the web development perspective, website load performance is very essential thing to take care of. You need good working layout, easy layout and easy navigation.

Here with this article I m not going to talk about of all the aspects of web application performance improvements. But I am specifically targeting the topic when it comes to the CSS and JavaScript faster loading in the client browser. In fact Google is also counting the speed of your website site when indexing to your website.

The goal was to improve overall performance on the client side. At the same time, it will show how we can force a client side script to be coached at the browser, so that in subsequent visit, it will take those scripts from the cache. This becomes increasingly important when using AJAX techniques within an application that introduce new features and functionality.

First of all I will outline the requirements and essential steps that this project is made of. So that if you want to implement the same in your development, it become easy for you to set up project.

To download complete project, click here

Setup:

To begin with, we will have following list of files to be created in the development studio.

1. 2 XML files, first one to hold source of JS files for each page and second to hold CSS files for each page.
2. A generic class that implement IHttpHandler, that will be used to delivery combined and compressed JavaScript/CSS at the client.
3. And at last your .ASPX file that will be used to serve combined and compressed Javascript/CSS at client side.

Step by Step Implementation:

Now let's get dig into the actual development. To summarize, let's say we have a page default.aspx that has following no. of JavaScript files and CSS files. Think of these file that we wanted to combine them and deliver at one go at the client browser.

1. jquery.js
2. script-file-1.js
3. style-1.css
4. style-2.css

As you can see, we have 2 different JavaScript file & 2 CSS files. So what basically we will do in the next is to create a utility which can combine given JavaScript and compress it, then send it to client browser. Next the same process will be done for the CSS. Both the CSS files will be combined and compressed and send to client browser.

Now it's time to take a look at into actual stuff that does this underlying work.

First of all we will create a CS class file that will hold the programming stuffs.

So perform the following steps to create & configure that CS class file.

1. Create CS class file with the name ScriptCombiner.cs and put the following code in that.

public
class
ScriptCombiner : IHttpHandler

{

private
readonly
static
TimeSpan CACHE_DURATION = TimeSpan.FromDays(1);

private
HttpContext context;

public
void ProcessRequest(HttpContext context)

{

}

public
bool IsReusable

{

get { return
true; }

}

}

As you can see, we are implementing the IHttpHandler interface.

You can write custom HTTP handlers to process specific, predefined types of HTTP requests in any Common Language Specification (CLS) compliant language. Executable code defined in the HttpHandler classes, rather than conventional ASP or ASP.NET Web pages, responds to these specific requests. HTTP handlers give you a means of interacting with the low-level request and response services of the IIS Web server and provide functionality much like ISAPI extensions but with a simpler programming model.

We are also implementing IsReusable properly as it is compulsory to implement as a part of inheritance of IHttpHandler interface.

Now, let's put the nuts & bolts inside the ProcessRequest function. I will also explain you the step by step each execution that is inside this function.

1. We will also create another CS class file that is used to compress JavaScript. That file is named as "JavaScriptMinifier.cs". Please take a look at the attached project solution file. As it is contain long lines of code, I can't put it here.
2. Complete your class file with following functions.

public
void ProcessRequest(HttpContext context)

{

string xStrType, xStrSet, xStrVer, xStrpagecode;

Boolean xBlnCanCompress;

this.context = context;

HttpRequest request = context.Request;

xStrType = (!String.IsNullOrEmpty(request["type"])) ? request["type"] : null;

xStrSet = (!String.IsNullOrEmpty(request["s"])) ? request["s"] : null;

xStrVer = (!String.IsNullOrEmpty(request["v"])) ? request["v"] : null;

xStrpagecode = (!String.IsNullOrEmpty(request["pcode"])) ? request["pcode"] : null;

//first check if client browser can support compressions

xBlnCanCompress = CanClientGZip(request);

using (MemoryStream memStream = new
MemoryStream(8092))

{

Stream writer;

//if browser is supporing GZip compression then create a new object using ICSharpCode.SharpZipLib.GZip

//library which allow the compressed respose to send to client

if (xBlnCanCompress)

writer = (new ICSharpCode.SharpZipLib.GZip.GZipOutputStream(memStream));

else

writer = memStream;

using (writer)

{

//now its time to read all the script/css files into a StringBuilder object.

StringBuilder combinedSource = new
StringBuilder();

foreach (string file in GetFileNames(xStrSet, xStrpagecode, xStrType))

combinedSource.Append(System.IO.File.ReadAllText(context.Server.MapPath(file), Encoding.UTF8));

//Upto now we have combined all css/javascript based on request.

//its now time to remove extra white spaces and other unwanted characters from respose.

//compression will take place now.

string minified;

//use the YUI Javascript/CSS minifier to compress all js files

if (xStrType == "js")

minified = combinedSource.ToString();

else

minified = CompressCSS(combinedSource.ToString());

// Send minfied string to output stream

byte[] bt = Encoding.UTF8.GetBytes(minified);

writer.Write(bt, 0, bt.Length);

}

//cache the respose so that in next request it can be reused

byte[] responseBytes = memStream.ToArray();

//context.Cache.Insert(GetCacheKey(xStrSet, xStrType, xStrVer, xBlnCanCompress), responseBytes, null, System.Web.Caching.Cache.NoAbsoluteExpiration, CACHE_DURATION);

// Generate the response

this.WriteBytes(responseBytes, xBlnCanCompress, xStrType);

}

}

private
bool CanClientGZip(HttpRequest request)

{

string acceptEncoding = request.Headers["Accept-Encoding"];

if (!string.IsNullOrEmpty(acceptEncoding) &&

(acceptEncoding.Contains("gzip") || acceptEncoding.Contains("deflate")))

return
true;

return
false;

}

// helper method that return an array of file names inside the text file stored in App_Data folder

private
static
string[] GetFileNames(string setName, string pagecode, string type)

{

System.Xml.XPath.XPathDocument doc2;

System.Xml.XPath.XPathNavigator navigator;

System.Xml.XPath.XPathNodeIterator iterator;

System.Collections.Generic.List<string> scripts = new System.Collections.Generic.List<string>();

string key;

if (type == "js")

key = "scriptfile";

else

key = "cssfile";

if (System.Web.HttpContext.Current.Cache[key] != null)

{

doc2 = (System.Xml.XPath.XPathDocument)System.Web.HttpContext.Current.Cache[key];

}

else

{

string filename;

filename = System.Web.HttpContext.Current.Server.MapPath(String.Format("~/App_Data/{0}.xml", setName));

doc2 = new System.Xml.XPath.XPathDocument(filename);

System.Web.HttpContext.Current.Cache.Insert(key, doc2, new System.Web.Caching.CacheDependency(filename), DateTime.Now.AddMinutes(60), TimeSpan.Zero);

}

navigator = doc2.CreateNavigator();

if (type == "js")

iterator = navigator.Select("/scripts/page[@pagecode='" + pagecode + "']/script");

else

iterator = navigator.Select("/styles/page[@pagecode='" + pagecode + "']/style");

while (iterator.MoveNext())

scripts.Add(iterator.Current.InnerXml);

return scripts.ToArray();

}

private
string GetCacheKey(string type, string setName, string version, bool cancompress)

{

return
"HttpCombiner." + setName + "." + type + "." + version + "." + cancompress;

}

private
void WriteBytes(byte[] bytes, bool isCompressed, string type)

{

HttpResponse response = context.Response;

response.AppendHeader("Content-Length", bytes.Length.ToString());

if (type == "js")

response.ContentType = "application/x-javascript";

else

response.ContentType = "text/css";

if (isCompressed)

response.AppendHeader("Content-Encoding", "gzip");

else

response.AppendHeader("Content-Encoding", "utf-8″);

context.Response.Cache.SetCacheability(HttpCacheability.Public);

context.Response.Cache.SetExpires(DateTime.Now.Add(CACHE_DURATION));

context.Response.Cache.SetMaxAge(CACHE_DURATION);

response.ContentEncoding = Encoding.Unicode;

response.OutputStream.Write(bytes, 0, bytes.Length);

response.Flush();

}

public
static
string GetScriptTag(string setname, string pageid, string type, string ver)

{

string result = "";

if (type == "js")

result += String.Format("<script type=\"text/javascript\" src=\"/" + Web.Utility.Functions.GetURLPrefix() + "ScriptCombiner.axd?s={0}&v={1}&type=js&pcode={2}\"></script>", setname, ver, pageid);

else

result += String.Format("<link link href=\"ScriptCombiner.axd?s={0}&v={1}&type=css&pcode={2}\" rel=\"stylesheet\" type=\"text/css\"/>", setname, ver, pageid);

return result;

}

public
static
string CompressCSS(string body)

{

body = Regex.Replace(body, "/\\*.+?\\*/", "", RegexOptions.Singleline);

body = body.Replace(" ", string.Empty);

body = body.Replace(Environment.NewLine + Environment.NewLine + Environment.NewLine, string.Empty);

body = body.Replace(Environment.NewLine + Environment.NewLine, Environment.NewLine);

body = body.Replace(Environment.NewLine, string.Empty);

body = body.Replace("\\t", string.Empty);

body = body.Replace(" {", "{");

body = body.Replace(" :", ":");

body = body.Replace(": ", ":");

body = body.Replace(", ", ",");

body = body.Replace("; ", ";");

body = body.Replace(";}", "}");

body = Regex.Replace(body, "/\\*[^\\*]*\\*+([^/\\*]*\\*+)*/", "$1″);

body = Regex.Replace(body, "(?<=[>])\\s{2,}(?=[<])|(?<=[>])\\s{2,}(?=&nbsp;)|(?<=&ndsp;)\\s{2,}(?=[<])", string.Empty);

return body;

}

You are now almost done with 50% of work for your project.

Now let's take a look at the few of important execution steps that are in this function.

First of all we are declaring four different string variables:

string xStrType, xStrSet, xStrVer, xStrpagecode;

They will be used to get the Querystring passed in to this handler. This is utilized later on the code.

Moving next, you will find these function call:

//first check if client browser can support compressions

xBlnCanCompress = CanClientGZip(request);

This is basically to check does client browser support GZip compression.

Gzip compression, otherwise known as content encoding, is a publicly defined way to compress textual content transferred from web servers to browsers. HTTP compression uses public domain compression algorithms, like gzip and compress, to compress XHTML, JavaScript, CSS, and other text files at the server. This standards-based method of delivering compressed content is built into HTTP 1.1, and most modern browsers that support HTTP 1.1 support ZLIB inflation of deflated documents. In other words, they can decompress compressed files automatically, which saves time and bandwidth.

In the next step it is preparing the stream object used to hold the response output. We will not take dipper look into that code. As I expect that the a beginning developer even must be able know about next few line of code. J

Let's move to the line of code:

//now its time to read all the script/css files into a StringBuilder object.

StringBuilder combinedSource = new
StringBuilder();

foreach (string file in GetFileNames(xStrSet, xStrpagecode, xStrType))

combinedSource.Append(System.IO.File.ReadAllText(context.Server.MapPath(file), Encoding.UTF8));

As you can see in the foreach loop, it is calling to method GetFileNames, by passing 3 different parameters. Here this is also core and important part of this project. Let me outline you first what this function basically do. This function will read to the "script.xml" file that hold content of script file that we want to load. Please look inside the attached project solution to understand it better. The function will read xml file and return array of string object containing JavaScript files to read.

In the subsequent line of code, it iterate through each file name and read it. Each content of read file is placed inside a StringBuilder object.

Please take look at the code inside the GetFileNames function to understand what is actually happening inside it. It fetches the JavaScript/CSS based on the parameter passed. And return either the JavaScript file name array or CSS file name array.

So now we have a combined script/CSS with us. It's a time to minify JavaScript/CSS now.

Following line of code will minify respective JavaScript/CSS based on type of client script requested.

//use the YUI Javascript/CSS minifier to compress all js files

if (xStrType == "js")

{

JavaScriptMinifier minifier = new
JavaScriptMinifier();

minified = minifier.Minify(combinedSource.ToString());

}

else

{

minified = CompressCSS(combinedSource.ToString());

}

The JavaScriptMinifier has been created in the 2^nd step. Please refer to the attached solution project for more detail regarding this class file. I have adopted this class file from one of the article

You will also see function CompressCSS that is used to compress CSS file. The compressor of CSS file is done through just few regular expression. JavaScript compression has different algorithm.

After that it is calling to WriteBytes function that will prepare the combined & compressed JavaScript & CSS response and send it to the client.

Hurray… as part of implementation we are done.

Now it's time to check that in action. You can run the project attached here with and check it In live action.

To download complete project, click here

Let's compare the result of two different pages. The first one is with the compressed JavaScript & CSS. The second one is with the normal JavaScript & CSS. We will also see the difference in load time and size of content received.

Response time with compressed JavaScript & CSS.

Response time without compressed JavaScript & CSS.

 

As you can see from given statistics

With Combined & Compressed JavaScript and CSS ..

Total request: 3

Response size: 16.3 KB

Without Combined & Compressed JavaScript and CSS ..

Total request: 5

Response size: 96 KB

You can clearly see the difference between these two request.

To get more idea open and run the project yourself. That will give you better idea.

Hope you will find it very useful.

Happy coding…. J