Update:I have an update blog post explains bundling and minification features, differences between MVC 4 beta & RTM in following link: http://22.214.171.124/blog/bundling-and-minification-in-asp-net-mvc-4/
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.
The problem is how to improve the performance of a web page?
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 .
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.
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://126.96.36.199/blog/bundling-and-minification-in-asp-net-mvc-4/