CSS and JavaScript Bundling and Minification in ASP.NET 4.5

ASP.NET 4.5 includes a new feature to minify and bundle CSS and JavaScript within your web application. If you use any of the default project templates in Visual Studio 2012, this new feature is turned on.

What Is Bundling and Minification?

Most static content files, such as CSS and JavaScript, contain a lot of whitespace and comments. Although the whitespace and comments do not necessarily take up significant space, depending on the client’s Internet speed, the additional space can noticeably slow the page load of the site. Figure 28-13 shows the network traffic before minification.

An example of a JavaScript snippet before minification can be found is as follows:

function helloWorld(firstName) {
    // Declare variables
    var message = "Hello, " + firstName;

    // Display an alert message
    alert(message);
}

In the past, one of the best techniques for compressing static content was to enable HTTP compression on the web server, such as IIS. The most common compression method was to gzip the static files. The issue with this process is that it is very difficult to customize which files to minify. In larger organizations, you may need to get an administrator involved to update the web server for you. In ASP.NET, you now have the ability to have complete control over the minification process without the need for an administrator.

To take the minification process a step further, you can also bundle a group of files, such as all CSS files, into a single minified path.

Enabling Bundling and Minification

There are numerous ways to bundle and minify scripts and styles. One way to handle the bundling is to add a bundle.config file to the project and add the appropriate file listing in the file. However, you can also add the files to the bundle manually during the application start method.

To enable this feature in your projects, download the Microsoft ASP.NET Web Optimization Framework package from the package manager. After it’s downloaded and enabled, head right to theGlobal.asax file. Then, in the Global.asax file, include the namespace System.Web.Optimization. Finally, to bundle and minify CSS files located in the styles folder of your web, for example, add the following to the Application_Start method:

var cssBundle = new Bundle("~/styles/css");
cssBundle.IncludeDirectory("~/styles", "*.css");
BundleTable.Bundles.Add(cssBundle);

Like everything else in ASP.NET, developers can have complete control over the way CSS and JavaScript are bundled. This includes creating custom transforms, including and excluding specific files, and creating multiple bundles. It is important to note that the files are minified and added in the order they are listed. If a script file is dependent upon another file, it’s best to move the dependent file to a bundle above.

Figure 28-14 shows the network traffic after minification.

The JavaScript snippet from earlier, when compressed, will render like so:

function helloWorld(n){var t="Hello, "+n;alert(t)}

---

NOTE For more about customizing bundling, search online for ASP.NET 4.5 Bundling and Minification. Also note that since this feature is released out-of-band on NuGet (package manager in Visual Studio), additional enhancements will likely be made before the next version of Visual Studio is released.

---

This article is excerpted from chapter 28 “Configuration” of Wrox’s Professional ASP.NET 4.5 (ISBN: 978-1-118-31182-0, May-2013, copyright John Wiley & Sons).