Bundling and Minification in MVC

Introduction

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.

Bundling

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

For example, let's say there is an 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 the other two are for javascript(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.

Implementation

To implement bundling in MVC you need to add the JS files you want to bundle into a single entity into the bundle's collection using BundleConfig.cs which is available in App_Start folder.
Example:-

  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
           "~/Scripts/jquery-{version}.js",  
           "~/Scripts/jquery-ui.min.js",  
           "~/Scripts/jquery.unobtrusive-ajax.js"));  

above code implements bundling by combine three javascript files into bundle called jquery.

  bundles.Add(new StyleBundle("~/Content/css").Include(  
            "~/Content/bootstrap.css",  
            "~/Content/site.css"));  

above bundls three css files, name of bundle is css.

Minification

Minification reduces the size of the 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.

Summary

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.

Thanks