Bundling and minification are usually used together since they solve the common problem which is to reduce the page load time.
Steps for implementing bundling and minification
1)Install the Nuget package System.Web.Optimization.Add the System.Web.Optimization namespace to the cs file.This is installed by default when we create a new mvc application ,if we use any project template other than empty template.
We can add the Add the System.Web.Optimization namespace to the web.config or to the individual cs file
2)Enabling bundling and minification There are two ways for enabling bundling and minification in a MVC application
Add the following line in the RegisterBundles method of the BundleConfig class which is in App_Start folder
BundleTable.EnableOptimizations = true;
Enable debug mode in web.config
<compilation debug="false" />
3)BundleConfig.cs file in the App_Start folder is used to create the bundles used in a application.RegisterBundles method in the BundleConfig.cs file is called from the Application_Start method of the Global.asax file.
If we look in the BundleConfig.cs file in the App_Start folder it contains these lines
public class BundleConfig
public static void RegisterBundles(BundleCollection bundles)
Styles are represented by the StyleBundle class and scripts are represented by the ScriptBundle class.Once we create an object of these classes we can add the style sheets or the script files to the bundle collection.Constructors for these classes takes a parameter which is the url which refers to a virtual path used by the browser to request the bundle.To add the individual files to the bundle we use the Include() method.
4) Reference Bundles from the View
Once we have added the bundles to the BundleCollection we can reference the individual bundles from the views using the Scripts.Render() method.
In the Render method we reference the bundle using the virtual path of the bundle.
Reduces Number of requests and page size
If we run the default mvc application and see the requests in IE developer tools we can see the following requests.
If we run the same application after setting BundleTable.EnableOptimizations = true in BundleConfig we can see that the number of requests made for the js files have reduced.Instead of six request we now have four requests for js and css files.There are three separate bundles for modernizr, jquery validation and jquery base libraries.
For our custom js files we can even create a single bundle so that there will be a single request for all the js files.
Each Bundle has a Version number which is a hash value calculated based on the files in the bundle.Browser caches a bundle and loads it from the cache if the version number has not changed.If the version number has changed browser reloads the page.
This enables browser caching, if content of the bundle has not changed browser will take it from cache, which is much faster. In case of changes, new version token is generated, so browser would be forced to reload bundle from the server.
While bundling combines several resource files into a single file ,minification optimizes files by removing extra characters and performing other optimizations such as renaming variable names.So if we have a long variable name such as currentDateAndTime ,the long variable name will be renamed to something shorter such as n.
So using Bundling and Minification in MVC application is useful or reducing the page load time and should be used accordingly.