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

Date: Monday, February 01, 2010

The new .net 3.5 has significant improved features. This feature makes the .net programming concept more sophisticated. You will now be able to write less code and build more dynamic application using those.

From all of them what the most I like is the LINQ, which allow you to query over variety of objects.

LINQ is all about queries, they returns a set of matching objects, a single object, or a subset of fields from an object or set of objects. In LINQ, this returned set of objects is called a sequence.

Basically LINQ comes in variety of flavors’ like following:

• LINQ to Objects
  
• LINQ to XML
  
• LINQ to Dataset
  
• LINQ to SQL
  
• LINQ to Entities
  

Well there is a detailed discussion on LINQ further in this article. Let me first make you guys introduce to the language improvements in .net 3.5. In fact I believe that these new improvements are essential to learn before we actually get dig into the LINQ J.

To summarize quickly, here are the list of new language feature that are shipped with .Net 3.5.

• Automatic properties
• Object initializers, Collection initializers
• Anonymous types
• Extension methods
• Query Expression

Well if you are the C# developer, I believe you will really love to have such significant improvement. Because these features puts extra wing on your programming skill.

The important is not that you learn the latest technology of .Net 3.5 like WCF, WPF, Silverlight etc. These are the core part of basic programming. Its like you should be knowing the if syntax of C programming language before you actually write your first “Hello word” program J

So let’s go through each of them step by step and try to understand what they are and how it can help the developer to create rich internet/desktop application.

• Automatic Property
  

Before I explain you the concept of “automatic property in .net 3.5, can you guys first please try to go through the following code?

public
class
MShoppingCart

{

private
int _cartId;

public
int CartId

{

get { return _cartId; }

set { _cartId = value; }

}

private
int _customerid;

public
int Customerid

{

get { return _customerid; }

set { _customerid = value; }

}

private
int _billingaddressid;

public
int Billingaddressid

{

get { return _billingaddressid; }

set { _billingaddressid = value; }

}

private
int _shippingaddressid;

public
int Shippingaddressid

{

get { return _shippingaddressid; }

set { _shippingaddressid = value; }

}

private
MShippingCartItem _cartitem;

public
MShippingCartItem Cartitem

{

get { return _cartitem; }

set { _cartitem = value; }

}

}

Most of the time we are used to write such model classes. This are the most basic and popular mechanism in returning a wrapper classes. The basic purpose of writing such getter/setter property is to hide the actual private member of our classes. It has been the standard pattern to access the private method of any classes. Well you may arise with a question that why do we actually need to write such getter/setter properties. Can’t we simply expose the private member? Well the answer is YES, but I would request you to remember the fundamental of object oriented programming. J

Anyway there are basically two reason of not doing so. Following are this:

1. You won’t be easily able to bind those private variable to controls
2. You will not be able to modify them into property later on.

The first point is quite understandable, what do you mean by the second one? Well, say for e.g. if you need to add any business logic or validation logic when assigning value to any private variable then? You will not be able to do that.

So what if we need not to write even the private variables? Exited, yes the new version of .Net 3.5 allows you have such facility. The concept is called automatic property. All you have to do is to write the getter/setter property. You need not to worry about the private member of that property. The compiler will decide and prepare base private member for you on the fly.

See the example in the following.

public
class
MShoppingCart

{

public
int CartId

{

get;

set;

}

public
int Customerid

{

get;

set;

}

public
int Billingaddressid

{

get;

set;

}

public
int Shippingaddressid

{

get;

set;

}

private
MShippingCartItem _cartitem;

public
MShippingCartItem Cartitem

{

get;

set;

}

}

Now it this case when the compiler will encounter this properties while compiling your code, it will automatically expose the private variable for each of property with its associated type. For e.g. compiler automatically assume and expose the _cartid private variable of integer type. Using advantage of this is we need not to worry about the underlying private variable. In future we can add any sort of validation logic in this property.

• Object initialization, collection initialization
  

I would like to explain this concept by taking the example of automatic property so that I maintain the continuity for you to understand. Say for e.g. when we want to use the “shopping cart” class that we created earlier. What we do is write following code.

MShoppingCart cart = new
MShoppingCart();

cart.CartId = 1;

cart.Customerid = 1001111;

cart.Shippingaddressid = 2333;

cart.Billingaddressid = 2232;

With the feature supported by the .net framework 3.5, you can take advantage of what is called “syntactic sugar”, and that is object initializers.

Using object initializers, you can write the same code given above, in following way.

MShoppingCart cart = new
MShoppingCart {CartId =1, Customerid=1001111, Billingaddressid=2232, Shippingaddressid =23333 };

So it allows you to pass the value of all property at the time of initializing the object.

In fact it not only allow to initialize object’s property in this way, you can also have nested initialization of object within any object.

To demonstrate you, see the following example.

MShoppingCart cart = new
MShoppingCart { CartId = 1, Customerid = 1001111, Billingaddressid = 2232, Shippingaddressid = 23333, Cartitem = new
MShippingCartItem { } };

If you see in the highlighted (underlined) part of above code, you can clearly see that the child object can also be initialized in the same way.

As if the new object initialization enhancements were not enough, someone at Microsoft must have said, “What about collections?” Collection initialization allows you to specify the initialization values for a collection, just like you would do for an object, as long as the collection implements the

System.Collections.Generic.ICollection<T> interface.

List<string> presidents = new
List<string> { “Name 1”, “Name 2”, “Name 3” };

foreach (string president in presidents)

{

Console.WriteLine(president);

}

• Anonymous types
  

What is anonymous type?

Well, we have been familiar till date with different types. They are either custom classes or any of .net’s build in type. So what is actually the anonymous type is. The answer is that the “Anonymous type” has no type defined to it. It has no type name. Though there should be at least one type name associated in .Net. In anonymous type, the type name is specified by the developer doing the programming. It is the compiler which will identify the type to associate with the declaration of any anonymous type.

There is also another significant different in anonymous type is that it is called immutable. The definition of immutable type is that the one that is declared and initialized once. It can’t be altered later on. So anonymous type has the same characteristic. Once you declared and initialized, you can’t alter the anonymous type afterward.

This is also why anonymous types have been introduced. They allow us to create a type on the fly and therefore return only certain values of a given named type. This is very handy when only a subset of properties is needed, properties are joined together or even objects are joined together.

class
Program

{

static
void Main(string[] args)

{

// create a list of carts with dummy data.

List<MShoppingCart> carts = new
List<MShoppingCart>();

carts.Add(new
MShoppingCart { CartId=101, Customerid=1001, Billingaddressid=20, Shippingaddressid =30});

carts.Add(new
MShoppingCart { CartId = 102, Customerid = 1002, Billingaddressid = 22, Shippingaddressid = 33 });

carts.Add(new
MShoppingCart { CartId=103, Customerid=1003, Billingaddressid=23, Shippingaddressid =34});

// query the cart collection to collect cart with id of 101

var result = from c in carts

where c.CartId >= 101

// put the result in a anonymous type

select
new { c.Billingaddressid };

// loop over the result.

foreach (var item in result)

{

// print out the name of the item.

Console.WriteLine(item.Billingaddressid );

}

}

}

Anonymous type are mostly used when working with the LINQ. It is utilized highly while querying to your data in LINQ. It is irrespective which flavor of LINQ you are using.

Although the anonymous type can be used in your own code also. It is especially useful when we want to combine different variables into one.

Se for e.g. following example:

// create an anonymous type instance with a name.

var anonymousType = new

{

Name = name,

Age = age,

Nationality = nationality

};

// print the name to the console.

Console.WriteLine(anonymousType.Name);

Though the real time use of anonymous type Is when you use it with the LINQ. I need to write a separate article to demonstrate you actual usage LINQ. J

• Extension methods
  

An extension method is a static method of a static class that you can call as though it were an instance method of a different class.

To make you understand the extension method, let me first re cape the class level methods (static methods) and instance methods. The primary different between these two is that the instance method can also be access by initializing object of any class. It can’t be invoked by using class name only. The exact opposite of that is class method. You can only call static class method using the name of class only. You can’t access them using the instance of same class.

I am not gonna give you any example for the above explanation as I expect from you guys that you are familiar with the different I explained.

Extension method is a way of extending existing classes for whatever additional functionality. Let me demonstrate you that by example.

namespace ExtensionMethods

{

public
static
class
StringExtensionMethods

{

public
static
bool IsNumeric(this
string str)

{

try

{

int i = int.Parse(str);

return
true;

}

catch

{

}

return
false;

}

}

}

In the above given example, almost everything seems to be similar what we are used to in normal programming. But, the difference is clearly seen. You should be able to notice that in the “IsNumeric” static method parameter are passed using this keyword. This keyword tells the compiler what you are going to extend for particular given type. So in this example it tells you that it extends the existing string class.

See for e.g. how to use the extension method.

string s = “someValue”;

bool bs = s.IsNumeric();

// bs is false;

string i = “7”;

bool bi = i.IsNumeric();

// bi is true;

• Query Expression
  

One of the conveniences that the C# language provides is the foreach statement. When you use foreach, the compiler translates it into a loop with calls to and MoveNext. The simplicity the foreach statement provides for enumerating through arrays and collections has made it very popular and often used.

One of the features of LINQ that seems to attract developers is the SQL-like syntax available for LINQ queries. The first few LINQ examples in the first chapter of this book use this syntax. This syntax is provided via the new C# 3.0 language enhancement known as query expressions. Query expressions allow LINQ queries to be expressed in nearly SQL form. To perform a LINQ query, it is not required to use query expressions. The alternative is to use standard C# dot notation, calling methods on objects and classes.

Although it is occupy a dedicated book for detail understanding of query expression with LINQ. Just to summarize you, here is the example that shows you what actually query expression does.

For e.g.

string[] names = {

“Adams”, “Arthur”, “Buchanan”, “Bush”, “Carter”, “Cleveland”,

“Clinton”, “Coolidge”, “Eisenhower”, “Fillmore”, “Ford”, “Garfield”,

“Grant”, “Harding”, “Harrison”, “Hayes”, “Hoover”, “Jackson”,

“Jefferson”, “Johnson”, “Kennedy”, “Lincoln”, “Madison”, “McKinley”,

“Monroe”, “Nixon”, “Pierce”, “Polk”, “Reagan”, “Roosevelt”, “Taft”,

“Taylor”, “Truman”, “Tyler”, “Van Buren”, “Washington”, “Wilson”};

IEnumerable<string> sequence = from n in names

where n.Length < 6

select n;

foreach (string name in sequence)

{

Console.WriteLine(“{0}”, name);

}

Though query expression can be used by two different way. 1) is using dot notation and 2) is using expression syntax.

Hope I could make you understand what are the new improvements in the newer version of .net 3.5.

Once you are aware and familiar with this feature, you are ready to get dig into dip into the word of .net 3.5 for all new existing experience in developing rich internet/enterprise application.

Best luck J

<!–