MVC Bundling and Minification


This article introduce what is Bundling and Manification in MVC and demonstrates how to implement Bundling and Manification with examples.

Getting Started

Bundling and Minification are two techniques available in ASP.NET 4.5. Bundling and Minification helps us improve request load times of a page. Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets such as CSS and JavaScript. thus increasing performance.


Web based projects always need CSS and script files. Bundling helps us combine multiple JavaScript and CSS files in to a single entity thus minimizing multiple requests in to a single request.

For example lets say there is a HTML page and consumes two JavaScript files Javascript1.js and Javascript2.js. So when this is page is requested it makes three request calls one is for web page and other two are for javascripts(Javascript1.js and Javascript2.js.),thus it decreasing performance.

If we can somehow combine all the JS files into a single bundle and request them as a single unit that would result in increased performance.


To implement bundling in MVC you need to add the JS files you want bundle into a single entity in to the bundles collection using BundleConfig.cs which is available in App_Start folder.
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  

above code implements bundling by combine three javascript files into bundle called jquery.
  bundles.Add(new StyleBundle("~/Content/css").Include(  
above bundls three css files, name of bundle is css.


Minification reduces the size of script and CSS files by removing blank spaces , comments etc. For example below is a simple javascript code with comments.

Fore example lets say there is a javascript file that contains below code with one comment
 // This is test  
 var a = 0;  
 a =a + 5;  
 a= a * 10;
a= a - 10;  
After implementing minification the above JavaScript code will be change into one or multiple line with whitespaces and comments. Like below code.
 var a = 0;a =a + 5;a= a * 10;a= a - 10;  
implementation of bundling and minification is same, minification is implemented by itself when you implement bundling.


In the above of this article, we have discussed what is bundling how to implement and about minification. Hope this article may helpful to you.