Bundling and minification techniques were introduced in MVC 4 to improve request load time.
Bundling
Bundling allows us to load the bunch of static files from the server in a single HTTP request.
The following figure illustrates the bundling technique(Loading script files in separate requests)
In the above figure, the browser sends two separate requests to load two different JavaScript file MyJavaScriptFile-1.js and MyJavaScriptFile-2.js.
The bundling technique in ASP.NET MVC allows us to load more than one JavaScript file, MyJavaScriptFile-1.js and MyJavaScriptFile-2.js in one request, as shown below.
Bundle Types
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.
Minification
Minification technique optimizes script or CSS file size by removing unnecessary white space and comments and shortening variable names to one character.
For example, consider the following JavaScript function.
sayHello = function(name){
var msg = "Hello" + name;
alert(msg);
}Minification will remove the unnecessary white spaces, comments, and shortening variable names to reduce the characters, which will reduce the size of the JavaScript file. The above JavaScript will be minimized as the following script.
sayHello=function(n){var t="Hello"+n;alert(t)}