Using Bundling and Minification Features of ASP.NET 4.5

Introduction

The performance of your web application has a great impact on the end user experience. If your web application is slow, obviously users are going to be turned away from using it. There are many factors that contribute to the performance of a web site. A couple of important ones are - the number of requests sent from the browser to the server and the response size of each request. The newly added optimization features of ASP.NET 4.5 provide a neat way to bundle and minify JavaScript and CSS files thus taking care of the issues mentioned earlier. This article shows how these bundling and minification features of ASP.NET can be utilized in your web application.

What is Bundling and Minification

Consider an ASP.NET MVC web application that consists of a view named Index.aspx and makes use of the following JavaScript files:

• jquery-1.6.2.js
• jquery-ui-1.8.11.js
• modernizr-2.0.6-development-only.js

By default these files are located in the Scripts folder and you refer them in your views as follows:

<script type="text/javascript" src="../../Scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.js"></script>
<script type="text/javascript" src="../../Scripts/modernizr-2.0.6-development-only.js"></script>

Now, when the view is loaded in the browser, the browser makes three independent requests to the respective files. If you observe the requests using Chrome Developer Tools you will see something like this:

The browser makes three independent requests

Notice a couple of things:

• The browser has sent three separate requests to respective .js files.
• The total response size will be the sum of the file sizes of the individual files.

Also, notice the time taken to download these files.

The overall performance of the view can be improved if you bundle all three requests as a single request. This way instead of making three separate requests the browser will send a single request and still download the content of all three files. Performance will be further improved if you minimize the size of each file being downloaded by minification techniques such as removing white spaces and comments. (Read this article to know how you can minify files in earlier releases of ASP.NET).

Default Bundling and Minification

Luckily, ASP.NET 4.5 provides inbuilt support for bundling and minification of files. The core functionality of bundling and minification is found in System.Web.Optimization namespace. If you create a new ASP.NET project you will find the following line of code in the Global.aspx file:

protected void Application_Start()
{
    ...
    BundleTable.Bundles.RegisterTemplateBundles();
}

As you can see, the Application_Start event handler contains a call to the RegisterTemplateBundles() method that does the default bundling and minification for you. For default bundling and minification to work you need to specify the URLs of the JavaScript and CSS files a bit differently.

 <script type="text/javascript" src="../../Scripts/js"></script>

Notice the above <script> tag carefully. Instead of specifying a <script> tag per file there is only one <script> tag and the src attribute is of the form <script_folder_path>/js. This naming convention tells ASP.NET that all the *.js files from the Scripts folder are to be bundled together and minified. If you observe the request in Chrome Developer Tools you will find just a single entry for JavaScript files like this:

A single entry for JavaScript files

Notice the size of the downloaded content and compare it with the combined size of individual files.

For CSS files you would have used <css_folder_path>/css in the <link> tag.

<link rel="stylesheet" type="text/css" href="../../Content/css" />

Though the syntax shown above works as expected, there is a small drawback. Let's say you refer JavaScript and CSS files in your views using the above syntax and your web application starts serving the requests. Sometime later you update some of these JavaScript and CSS files. Naturally, you expect the new script and styles to come into effect. However, the earlier files might have been cached by the browser or proxy server. Since the URL to the files is the same (src="../../Scripts/js" and href="../../Content/css") there is no way for the browser to detect whether the files have been changed or not. To rectify the problem it is advisable to use the following syntax :

 <script src="<%= BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js") %>"></script>
<script src="<%= BundleTable.Bundles.ResolveBundleUrl("~/Content/css") %>"></script>

The ResolveBundleUrl() method accepts the virtual path of the folder containing the script or CSS files. The ResolveBundleUrl() method not only generates a URL for src and href attributes but also appends a unique string token in the query string. This token is changed when a file changes, thus ensuring a unique URL for the changed files. The following figure shows how the string token is added in the query string:

How the string token is added in the query string

Customizing Bundling and Minification

At times the default bundling mechanism may not meet your requirements. For example, you might have ten JavaScript files in a folder but depending on the usage pattern you may want to bundle them in two separate bundles of five files each rather than a single bundle. Also, you may want to bundle the files in a specific sequence based on their dependencies. Such a customization is possible through Bundle class. The following code added to the Application_Start event handler shows how the Bundle class can be used:

protected void Application_Start()
{
    ...
    var bundle = new Bundle("~/MyScripts");
    bundle.AddFile("~/Scripts/jquery-1.6.2.js");
    bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js");
    bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js");
    BundleTable.Bundles.Add(bundle);
    ...
}

The above code creates a new bundle for virtual path ~/MyScripts. It then calls the AddFile() method to add specific script files. Finally, the newly created bundle is added to the Bundles collection. To refer the newly created bundle in views you will use the following syntax:

<script
src="<%= BundleTable.Bundles.ResolveBundleUrl("~/MyScripts")
%>"></script>

In addition to creating a custom bundle as shown above you can also customize the overall bundling and minification process. To do so, you need to create a custom class that implements the IBundleTransform interface. You then need to implement the Process() method of the IBundleTransform interface and write a custom processing logic. The following code shows a simple implementation of the IBundleTransform interface that adds a copyright notice to the bundled content.

public class MyBundleTransform:IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("// Copyright (C) 2012. All rights reserved.");
        sb.Append(response.Content);
        response.Content = sb.ToString();
    }
}

The above code creates the  MyBundleTransform class, which implements the IBundleTransform interface. The Process() method receives two parameters viz. a BundleContext and BundleResponse. The Process() method then adds a copyright notice at the top of the bundled content and then reassigns the Content property. You can also get ahold of the individual files of a bundle using the response.Files property.

To use the MyBundleTransform class you modify the Application_Start event handler as follows:

protected void Application_Start()
{
    ...
 var bundle = new Bundle("~/MyScripts", new MyBundleTransform());     bundle.AddFile("~/Scripts/jquery-1.6.2.js");
    bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js");
    bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js");
    BundleTable.Bundles.Add(bundle);
    ...
}

As you can see a new bundle has been created as before but this time an instance of the MyBundleTransform class is passed as the second parameter of the constructor. If you observe the resultant script in the Chrome Developer Tools, you will find the copyright line added at the top:

Copyright line added

Summary

The newly added bundling and minification features of ASP.NET 4.5 make it easy to bundle your JavaScript and CSS files thus boosting the overall performance of your web applications. In order to avail the bundling and minification features you need to specify URLs to script and CSS files in a certain way. Following this naming convention automatically bundles all of the JavaScript and CSS files from a folder and serves them as a single request. You can also customize the bundling process using the Bundle class and IBundleTransform interface.

About the Author:

Bipin Joshi is a blogger and author who writes about apparently unrelated topics - Yoga & technology! A former Software Consultant and Trainer by profession, Bipin is programming since 1995 and is working with .NET framework ever since its inception. He has authored or co-authored half a dozen books and numerous articles on .NET technologies. He has also penned a few books on Yoga. Having embraced Yoga way of life he now writes about Yoga, life and technology on his website. He can also be reached there.

Download Minification Code (zip)