Bundling and Minification to Web Forms in ASP.NET 4.5

Before we jump into the codding part its very necessary to know what is Bundling and Minification in ASP.NET, and how to use it. Bundling and Minification are the new features launched by Microsoft in ASP.NET 4.5. The main aim of these features is to reduce the no of requests to the server and to decrease the size of data we are getting from server hence to improve the performance of the web application by decreasing the time consumed by Page Load.

In every web application there is some javascript files, css files and images these play an essential role in every web application which can not be ignored. The problem is if your site contains a large number of .js, .css and image files then it takes too much time to load, which results to a bad user experience.

The Page Load time depends on the number of requests to the server and the the time taken per request. Most of the modern browsers allow 6 requests per host name at a time which means when there is 6 requests on a particular host name are in progress then no other active connections can not be possible rather the browser puts all the rest requests in a que. Once the first 6 requests get completed then another 6 requests get processed. For more information Visit Here.

In addition to it, if you are browsing any website in your mobile device then the battery life is inversely proportional to the no of requests made to the server. So, If a website makes more requests to server then your battery life goes on decreasing.

How to Handle This Problem ?

First of all if we try not to use the Javascript files css files or image files then our website will be faster. But the problem that will arise after this is the website will not be called as a website.

So there is no way that we can exclude those files from a website. But we can do two things to tackle with this problem.

  • (Bundling) Decrease the no of files hence decrease the no of requests, which will increase the performance of the website.
  • (Minification) Decrease the size of the files hence decrease the time elapsed for fetching those files from server, which will increase the performance of the website.

What is Bundling ?

This is the mechanism Microsoft has introduced in ASP.NET 4.5 to combine or bundle multiple files into a single one and to fetch that one from server in a single request in order to decrease the no of requests to a server hence improving the Page Load performance.

What is Minification ?

Minification is the mechanism that is used to decrease the file size by various options like removing the unnecessary white spaces, removing comments, and shortening variable names to one character. Basically this mechanism is used to compress the size of .css and .js files in production. for example consider the below javascript method.
function DecideFirstnameLastName() {
         $(".playerInput[playerid='0']").focusout(function () {
             var name = '';
             var fName = '';
             var lName = '';
             if ($(this).val() != '') {
                 name = $(this).val().trim().split(' ');
                 fName = name[0];
                 lName = name[1];
                 if (fName != '' || fName != 'undefined')
                     $(this).attr('fname', fName);
                 if (lName != '' || lName != 'undefined') {
                     $(this).attr('lname', lName);
If you look into the above code you can find a lot of white spaces inside it those are used for formatting the code, which is very helpful in development phase. But in production stage, these white spaces are just useless and increase the file size so in that case we need to minify the javascripts in production to decrease the file size where all unnecessary white spaces will get removed the big variable names will be replaced with some single letter names to decrease the size of the file.

Look at the below code how the above script looks like after manification.
function DecideFirstnameLastName(){$(".playerInput[playerid='0']").focusout(function(){var e="";var t="";var n="";if($(this).val()!=""){e=$(this).val().trim().split(" ");t=e[0];n=e[1];if(t!=""||t!="undefined"){$(this).attr("fname",t)}if(n!=""||n!="undefined"){$(this).attr("lname",n)}}})}
Same for the.css files also.

How to Use Bundling and Minification in ASP.NET 4.5 Web Application

Checkout the below images those I captured before implementing Bundling in a website and after implementing Bundling in the same website. if you look into the results then you will be surprised.
Before Bundling
Check out the no of requests. Its 12 requests, total size is 313.0kb and total time elapsed is 242ms. Now check the image after I implemented Bundling

After Bundling
Check the no of requests. Its only 1 request, total size is 54.8 kb and the total time elapsed is 32ms only. Isn't it a great improvement over the first one. Of course it is.

Now the point is how to implement this Bundling in your project ? ASP.NET 4.5 has it built in in the ASP.NET WebForms Template. Here are the steps how to achieve the Bundling.

Create a new Project and add a ASP.NET Web-form Application by selecting the below template in your visual studio.
Select Template
Now go the master page you have. Here I have site.Master as my master page. and comment out the below selected scripts.
Comment Scripts
Now check out the global.ascx file there you will find the below line of code.
void Application_Start(object sender, EventArgs e)
    // Code that runs on application startup
Now check the App_Start folder you will find a class file in the name of BundleConfig.cs and check the below file I have modified according to my convenient.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.UI;

namespace UserFriendlyURL
    public class BundleConfig
        public static void RegisterBundles(BundleCollection bundles)
            bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(

            //Enable or desable the debugging mode.
            BundleTable.EnableOptimizations = true;
If you look carefully into that then you can find that I have added a new bundle which will have all the script files listed above in a single package named WebFormsJs. That is all the 8 javascript files are now bundled to a single one.

There is an option to enable and disable the optimization. This is required to be false in development server as we may need to debug the script files to test the application. But in production we should set this to true. Making it true enables the Bundling and vice verse.

For implementing bundling for the css files locate the Bundle.config file in the project. The file will look like below.
<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/Content/css">
    <include path="~/Content/bootstrap.css" />
    <include path="~/Content/Site.css" />
The root node styleBundle has a path "~/Content/css" which is the package to hold all the css files you have written in include nodes inside it. Here I have included 2 files into that. So when I enable the Bundling in my project these two css files will be rendered in a single packet.

Now lets add the scripts in the master page.
<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/WebFormsJs") %>
<webopt:bundlereference runat="server" path="~/Content/css" />
The This is how to include the bundles into your page. The first one includes the scripts we have bundled previously and gave the packet a name of "bundles/WebFormsJs"  and the css to "Content/css".

So now I think you have gathered some idea about bundling and minification in ASP.NET, what are they, why do you need those, and how to achieve that. For any further clarification Here are some links I have gathered those have explained this thing very efficiently. those may help you.

Bundling and Minification
ASP.NET Web Optimization Framework

Happy Coding...

No comments:

Post a Comment