ASP.NET Web Optimization Framework

• Download source (no EXE) - 304.8 KB
• Download source - 1.1 MB

Introduction

The ASP.NET Web Optimization Framework was introduced by Microsoft for optimizing the ASP.NET web application performance. In order to optimize web application, this framework uses the following two techniques:

1. By reducing the number of requests to server
2. By reducing the size of requested resources

Now I think the questions that comes to your mind is - why should we use this framework and what is the necessity of this framework. So first, let’s try to understand this. There are multiple reasons for using this framework. Some are as follows:

1. Nowadays, in single web pages, we use many JavaScript libraries for different functionalities like calendar, model popup, etc. or we can say because of richer visual content demand, the cost of downloading different resources like CSS, images grows significantly. So fewer and smaller requests can save bandwidth, reduce latency and lengthen battery life. Battery life I mentioned specially for mobile applications.
2. Most of current browsers limit the number of simultaneous connections for each hostname to six (for more information about it, click here). It means if more than 6 requests are being processed, then additional request will be queued by the browser.

Currently, the following two services are provided by this framework:

1. Bundling: This feature was introduced in ASP.NET 4.5 and reduces the number of requests to server. It means combine multiple resources like script, CSS files, etc. to single resources so that there will be fewer requests by browser. It improves page load performance.

   

   

2. Minification: This feature reduces the size of requested resources in order to optimize code by shortening the variable names, remove white spaces, tabs, comments, etc. Let's take an example and see how it works.

function ( firstNumber, secondNumber)
{   ///<signature>
    //<summary> Adds two integer
    // </summary>
    //<param name="firstNumber" type="Integer">First Number.</param>
    //<param name="secondNumber" type="Integer">Second Number.</param>
    ///</signature>
   var thirdNumber=firstNumber+SecondNumber;
}

Let’s see how this JavaScript code will change after minification:

function(n,p){var i=n+p;}

Now you have better understood how this framework actually performs optimization to improve web performance.

Now let’s see how we can implement this:

1. In Web Form
2. In Web page Site
3. In ASP.NET MVC

I know that in this article, it is not possible to discuss all three but here I can cover some common things which are common in all three implementations.

Enable or Disable Bundling and Minification

There are two ways to enable or disable Bundling and Minification:

1. Using Web.config: In web.config, you can set debug attribute of compilation element as follows:

   <system.web>
       <compilation debug="true" />
   </system.web>

2. By setting EnableOptimizations: Set this to true for bundling and minification as follows:

   public static void RegisterBundles(BundleCollection bundles)
   {
       bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));
   
        BundleTable.EnableOptimizations = true;
   }

If you have set both the values, then EnbaleOptimizations overrides the debug attribute.

Bundling this framework provides Bundle class. So let's have a look at this class and its methods because this will be used in all three implementations.

Bundle Class

This class has Include method which takes an array of strings, where each string is a virtual path to resource. We can add multiples files as follows:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
          "~/Content/themes/base/jquery.ui.autocomplete.css",
          "~/Content/themes/base/jquery.ui.accordion.css",
          "~/Content/themes/base/jquery.ui.selectable.css",
          "~/Content/themes/base/jquery.ui.code.css",
          "~/Content/themes/base/jquery.ui.button.css",));

But if you want to include all files of a particular directory, then this class provides one more method called IncludeDirectory. You can use this method as follows:

public Bundle IncludeDirectory(
    string dvirtPath,  // The Virtual Path for the directory.
    string pattern,         // The search pattern.
    bool subDirectory)    // true to search subdirectories.

We can use patterns while searching files or subdirectories by using “*” wildcard character as follows:

Include(“~/Scripts/Common/*.js”) ===> this will include all js files.

IncludeDirectory(“~/Scripts/Common”,”T*.js”) ===> this will include all js files whose name starts from T.

Now, the next question is we have created bundles, now how will we include in view or aspx file?

We will use Styles.Render for CSS and Scripts.Render for script file as follows:

@Styles.Render("~/Content/theme/base/css","~/Content/css");

@Scripts.Render("~/bundles/jquery");

So here, I have covered all the basic details about this framework.

Now, let’s see how we can use this framework in a web form application step by step. Here I am going to describe from scratch by taking an empty template of Web form application:

1. Create an Empty Web site and please make sure that .NET framework should be 4.5

   

2. Now, you need to install this framework in your website so open NuGet Package Manager console as per screenshot

   

3. Write command “Install - Package Microsoft.AspNet.Web.Optimization” and press enter. It will install ASP.NET Optimization Framework in your web site.

   

4. You can check in bin folder required DLLs have been added.

   

5. Now you need to create two folders, Scripts and Styles for keeping scripts and CSS files and one web form named as Test.aspx. Here, I have not used MasterPage because the same thing that I have used in Test.aspx, you can use in masterpage. Now your solution explorer should look like the image shown below:

   

   Here, I have added 4 files in scripts folder and 2 files in Styles for demonstration. You can add as per your requirement.

6. Add Global.asax file in your website in the following way:
   1. Right click on solution explorer
   2. Click on Add and from submenu, select Add new item
   3. Select Global.aspx file

   You can see that there are many events in Global.asax file. I am focusing on Application_Start event here. You need to write the following code inside this event.

   System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.ScriptBundle("~/bundle/js")
                 .Include("~/Scripts/*.js"));
           System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.StyleBundle("~/bundle/css")
                .Include("~/Styles/*.css"));

   Here, I am directly creating and adding two bundles into bundle table. You can define according to your classification and use. You can further classify a single bundle into other sub bundles. One more thing you might have noticed here is that I am using *.js, because I am adding all js files into one bundle and same for CSS. So exactly what I did here is I bundled all JavaScript files into one bundle, it means they will load as a single entity not as multiple different files and same for CSS, I created a single bundle for all CSS files.

   I think now you can better understand practically how this framework optimizes the calls and loading of resources.

   In some articles, you might find that they have created a separate file called as BundleConfig for creating the bundle in a static file and they add bundles in global.asax file by calling that static method. This provides one more level of abstraction. Since this is very basic article, I have directly created and added bundles in global.asax file.

7. Now we are ready with our bundle, so the last task is to include this bundle into our aspx file. That we can do by using Scripts.Render and Styles.Render method as follows:

   <%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
      <%: System.Web.Optimization.Styles.Render("~/bundle/css") %>
   

8. Now we are ready with all the implementation. Now only one task is remaining, i.e., enabling the bundling and minification. As I have described in my previous article, there are two ways to enable it. So you can use either of the ways. Here I am enabling by setting web.config file’s compilation elements’s debug attribute as shown below:

   <system.web>
       <compilation debug="false" />
   </system.web>

9. So now, it is time to be happy and test our work. So run the application and you will get the following screen:

   

   Now press F12 to see the real magic of web optimization framework.

   Click on Script tab and select Test.aspx dropdown list. You can seejs?v…….. like some random string that is the bundle name.

   

Here, if you have observed that in place of separate js files, only one bundle is loading. You can see the real calling for the different resources into Network tab. Here you can see that there is only one call for JavaScript files and one for CSS files.

If you have not seen this developer tool of Internet Explorer and you did not observe here for normal application without ASP.NET Optimization Framework, then you might not be able to differentiate the real one, so for those people I can show you the proper difference.

Now just go back in your web.config file and set debug = true and run the application and again press F12. Now, you will get the following screen when you click on Script tab:

If you can observe here now you can see two separate JavaScript files are loading separately, so suppose you have added 20 js files in your aspx page, then there are 20 separate calls which will be made for 20 js files. Now just check in network tab so here you can see that there are 4 separate calls for 4 separate files.

Now I think you can better understand the use of ASP.NET Web Optimization framework. So here in this article, I tried to cover all the basics on how to use ASP.NET web optimization framework in your website. Please try to use it and you will surely get a good experience with it. Thanks for reading.