Bundling and Minification support in ASP.NET MVC 4

Update:I have an update blog post explains bundling and minification features, differences between MVC 4 beta & RTM in following link: http://65.1.162.244/blog/bundling-and-minification-in-asp-net-mvc-4/

Most of the web developers today uses multiple JavaScript and CSS files for separation the concerns, for readability & maintainability of code. This is a very good practice from a development point of view, but it often causes degradation of the overall performance of the website. Multiple JavaScript and CSS files require multiple HTTP requests from a browser, which in turn can slow down the performance & load time of your webpages.

Look at the below solution structure, it contains 5 JavaScript files & 4 CSS files:

I am including these files (5 JavaScript & 4 CSS files) into _Layout.cshtml file in my ASP.NET MVC 4 Solution.

Let’s start debugging this application & capture the network traffic using Internet Explorer 10 Developer toolbar (you can use IE 9 Developer toolbar also).

In IE 10 or IE 9, Press F12  or go to Tools Menu => Click on F12 developer tools to open developer toolbar. Once you open IE developer toolbar, go to Network tab, click on Start capturing button and refresh the page.

Let’s have look at network traffic using Firefox’s firebug add-on.

If we observer statics in both IE developer toolbar & Firebug, different JavaScript files & different CSS files are consuming different amount of time depending on the size of a particular file. All the files did not started downloading at once, because browsers can make only certain number of HTTP requests at a time depending on their behavior. Even if we look at code downloaded to client side its looks as it is (with spaces, indent etc.) what we included into page.

The problem is how to improve the performance of a web page?

This can be done by reducing number of HTTP requests and reducing payload (size of JavaScript & CSS files). Both can be achieved using Bundling and Minification.

• Bundling : Process of combining all the different JavaScript and CSS files into one file (one for JavaScript and one for CSS).
• Minification : Process of shrinking the JavaScript  and CSS content (removing all of the carriage returns,empty spaces,line feeds & shortening the variables  without changing actual functionality).

Till now it’s developer duty to do Bundling and Minification, there are multiple tools (JSMin Microsoft Ajax Minifier,Yahoo! YUI Compressor) available to do this.

The ASP.NET MVC 4 by default supports Bundling and Minification.

Bundling and Minification is implemented in very simple way in ASP.NET MVC 4, Instead of adding multiple js files & css files, now we can simply specify the below statements .

In code the value of  src attribute in <script> element is Scripts/js, it means under the scripts folder in solution bundle  & minify all the files with js extension, The statement bundle & minifies all the JavaScript files  under Scripts folder (It will not include files in subfolders), same is applicable for <link> element which is for css files, It will bundle & minifies all the CSS files under Styles folder (It will not include files in subfolders).

To see Bundling and Minification in action, we should add one more statement to Global.asax in Application_Start() method, that is BundleTable.Bundles.EnableDefaultBundles().

Let’s start debug the application once again & capture the network traffic.

If we observer there are only 2 http requests, one for JavaScript & one for CSS. The browser will make single http request to get all JavaScript files as single JS Bundle & one more single http request to get all css files as single CSS Bundle. The time consumed to get JS Bundle & CSS Bundle also is also very less this because of Minification, Just to conform let’s have a look at the view source of webpage in browser & Response Body in detailed view of js request in toolbar.

We have only 2 statements in view source (one for js, one for css) & Response Body of js statement contains all the JavaScript files in  minified format. So the Bundling and Minification works pretty fine in ASP.NET MVC 4 with simple statements.

Now when start exploring the JavaScript Bundling And Minification, So many questions will come into mind, for example when we are using JavaScript frameworks like jQuery, we should load framework libraries first, load the user scripts next, all this will be taken care by  MVC while dealing with Bundling And Minification. It has it’s own algorithm which will first sort all the files in ascending order, then arranging them required order depending on the dependencies, this is the default behaviour.

Along with default behaviour, ASP.NET MVC 4 provides fine grain control over Bundling and Minification to create our own custom bundles, use your own algorithm to minify the files. With the help of custom bundles we can add the required files & directories to Bundles Collection in BundleTable. This very helpful because we don’t load all the files at a time, some files we load in layout page & some files in child pages on demand, So we can create  different bundles, load them on demand.

Look at the below solution the Scripts folder contains all the framework libraries, Custom folder in Scripts includes all the user written scripts, Root folder has Menu.js, Styles folder contains couple of css files.

How to create Custom JS & CSS Bundles?

To use this bundles in MVC views, add the virtual path of Bundle to view.

This works seamlessly how the default  Bundling and Minification works, end results will be same, but it gives fine grain control over behaviour of Bundling and Minification.

We have one more option for caching these bundles in client browser for one year,until  no change in source on the server. To do this MVC provided a helper.

Instead of adding plain virtual path to <link> tag or <script> tag, if we use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl() method to add the virtual paths, It will cache the bundled & minified files in client browser for one year. How this is possible? If  we once again look at the view source of web page, it will include the hash code in the URL for both css bundle & js bundle.

Using the hash code the script & css will be cached in browser , when ever is their is any change in the script/css at server, it will invalidate this hash code & once again it will download  the fresh content & caches it.

Bundling and Minification support in ASP.NET MVC 4 is not just only for JS, CSS it twill seamlessly works with Coffee Script,  Less, etc..

In next article read about the internal of Bundling and Minification in ASP.NET MVC 4. ASP.NET Web Forms also supports Bundling and Minification out of the box  from ASP.NET 4.5 version onwards, It is almost similar. One of my friend (AbhijitJana) has nice article on how Bundling And Minification works in web forms: http://bit.ly/pUqRfS.

Update: I have an update blog post explains bundling and minification features, differences between MVC 4 beta & RTM in following link: http://65.1.162.244/blog/bundling-and-minification-in-asp-net-mvc-4/