w3resource

Bundling


Multiple Http requests extends the load time of our web pages, thus in MVC 4 bundling and minification techniques were introduced to improve request load time. Bundling is a technique that allows us to load a bunch of static files from the server in just one http request hence decreasing load time significantly.

The following figure illustrates the bundling techniques:

ASP.NET Loading script files in separate requests

In the above figure, the browser sends two separate requests to load two different JavaScript files script_one.js and script_two.js.

Bundling technique introduced in MVC 4 allows us to load more than one JavaScript file, script_one.js and script_two.js in one request as shown below.

ASP.NET asp.net-script_one.js-and-script_two.js-in-one-request

Minification

Minification technique optimizes Scripts and CSS file size by removing unnecessary white space, comments and shortening variable names to one character.

To better the idea of minification, consider following JavaScript function.

Example: JavaScript

Greet = function(name){
    //this is comment
    var msg = "Good Morning" + name;
    alert(msg);
}

The above JavaScript will be optimized and minimized into following script.

Example: Minified JavaScript

Greet =function(n){var t="Good Morning"+n;alert(t)}

As we can see above, minification has removed unnecessary white space, comments and also shortening variable names to reduce the characters which in turn will reduce the size of JavaScript file.

Bundling and minification impacts on the loading of the page, it loads page faster by minimizing size of the file and number of requests.

Bundle Types in ASP.NET MVC

MVC 5 includes following bundle classes in System.web.Optimization namespace:

ScriptBundle: ScriptBundle is responsible for JavaScript minification of single or multiple script files.

StyleBundle: StyleBundle is responsible for CSS minification of single or multiple style sheet files.

DynamicFolderBundle:Represents a Bundle object that ASP.NET creates from a folder that contains files of the same type.

All the above bundle classes are included in System.Web.Optimization.Bundle namespace and are derived from the Bundle class.