Bundling and Minification in ASP.NET MVC 4

This post is part of ASP .NET MVC 4 Article Series.

In yesterday’s post, we have discussed that in today’s web application, client side operation is also important as much as server operation. And hence client side operation increase, JavaScript code is also increased and for maintainability of code we generally separate it by functionality in different files. Hence separated code is JavaScript so web page needs to reference many JavaScript files. Now the trouble may starts, as all browsers limits the parallel request and request beyond that limits goes in queue. More information on each browser can be found here on Browserscope. To overcome this we can combine all JavaScript files in one. But as far as code maintainability is concern this is not the right solutions. Another way is to combine and minify all files on the fly. This is also sound to be right solution than combining all JavaScript files into one. Here we will see how we can leverage the Microsoft.Web.Optimization assembly to achieve this.

With .NET 4.5, Microsoft introduced a new featured called Bundling and Minification which bundle multiple JavaScript and CSS files in one requests and minify it by removing white spaces and characters which is not required. Microsoft introduced a new class called BundleTable which take care of Bundling and Minification. BundleTable class is shipped with two inbuilt Bundle for JavaScript and CSS respectively. However one can easily create their own custom Bundle as per requirements. Here we will see how we implement Bundling and Minification in MVC 4 application.

To get started, create new MVC 4 application, build it and open it in Firefox or any other browser. And inspect the loaded JavaScript information with the help of developer tools of browser you are using.

We can see in above image that before implementing Bundling and Minification, browser requests four JavaScript files and total size of JavaScript files are 503.8KB. Now let enable Bundling with MVC 4 application and again inspect the loaded JavaScript to check how it benefit. We discuses earlier that BundleTable shipped with two inbuilt Bundle one for JavaScript and one for CSS. So first of all let enable this default Bundle. Later we will also see how we can create our own custom Bundle also. To enable default bundling, open global.asax.cs and in Application_Start events write following lines.

BundleTable.Bundles.EnableDefaultBundles();

We have enabled default bundles, but still we have not referenced it in view. Open _Layout.cshtml and looks for following lines in Head tag.

Replace above lines with following line to reference default JavaScript Bundle and press Ctrl + F5 to see Bundling and Minification in action.

Again inspect JavaScript information, after enabling default bundle. We can see in below image that browser request only one JavaScript file which is combination of previously loaded four files. Moreover if you will look at size of loaded JavaScript then you will find that it is also reduced by almost 25% previously it was total 503.8KB and after Minification it is just 359.8KB!!!

Bundling and Minification with CSS

Same way we can also reference bundled and minified CSS by replacing default CSS reference with following one in _Layout.cshtml. However Bundling and Minification does not works with CSS3 rules. It is also logged here on connect.microsoft.com. I have posted temporary workaround for it here in my post: ASP.NET 4.5 : Issue With CssMinify And Workaround For It

Creating custom Bundle with .NET 4.5 and MVC 4

So far we have used default bundle. Now we will create one custom bundle which will bundle and minify only required files. To create custom bundle we need to create object of Bundle class by specifying virtual path through which we can reference custom bundle and transform type whether it is JavaScript or CSS. Complete code for creating custom bundle is as follow. Write following code snippet in Application_Start event.

Bundle myJSBundle = new Bundle("~/MyJSBundle", typeof(JsMinify));

myJSBundle.AddDirectory("~/Scripts", "*.js", false);

myJSBundle.AddFile("~/Scripts/jquery.validate.min.js");

myJSBundle.AddFile("~/Scripts/common.js");

BundleTable.Bundles.Add(myJSBundle);

To reference created custom bundle, write following lines in respective view.

Conclusion

With vNext or .NET 4.5, it is easier to implement Bundling and Minification with very less effort and without major changes.

Hope this would be helpful.

Check out this index post on ASP.NET Web Optimization Framework (a.k.a Bundling & Minification) to read other post on same.

You can follow me on twitter for latest link and update on ASP.NET & MVC.