Web applications of today have richer UI and are more user friendly than ever.For example user is informed about the action he performed immediately instead of waiting for a response from the server.To create such responsive applications javascript or other script files are required and in a typical web application there are many javascript files used .Also libraries such as AngularJS and Jquery uses javascript files for their own functionality.Style sheets are also extensively used for managing the styles applied to the different elements.
As a consequence of this there are lots of javascript and css files in a web application.To load each css and js file browser needs to make many requests to the server.These requests increases the load time of the web pages.To reduce the page load time bundling and minification is used.
Bundling is the process of combining several resources such as javascript files or css files into a single downloadable unit.The impact of this is instead of making several different requests for a resource a bundle can be downloaded in a single request thus reducing multiple requests into a single request.
Minification Minification is a process which removes unnecessary characters from a resource such as javascript file thus reducing its size.For example from a javascript file it means removing the comments,line breaks and other characters which do not impact the functionality.If we remove an extra line the script will function as before but from the request point of view this means that now less data needs to travel from the server to the browser.
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
<add namespace=”System.Web.Optimization”/>
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;
OR
Enable debug mode in web.config
<system.web> <compilation debug="false" /> </system.web>
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)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
}
}
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.
@Scripts.Render(“~/bundles/jquery”)
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.
Leave a Reply