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:
- By reducing the number of requests to server
- 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:
- 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:
- 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.
- 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)
Now you have better understood how this framework actually performs optimization to improve web performance.
Now let’s see how we can implement this:
- In Web Form
- In Web page Site
- 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:
- Using Web.config: In web.config, you can set debug attribute of compilation element as follows:
<compilation debug="true" />
- By setting
EnableOptimizations: Set this to
true for bundling and minification as follows:
public static void RegisterBundles(BundleCollection bundles)
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.
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:
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(
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:
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:
- Create an Empty Web site and please make sure that .NET framework should be 4.5
- Now, you need to install this framework in your website so open NuGet Package Manager console as per screenshot
- Write command “
Install - Package Microsoft.AspNet.Web.Optimization” and press enter. It will install ASP.NET Optimization Framework in your web site.
- You can check in bin folder required DLLs have been added.
- 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.
- Add Global.asax file in your website in the following way:
- Right click on solution explorer
- Click on Add and from submenu, select Add new item
- 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.
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.
- 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
Styles.Render method as follows:
<%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
<%: System.Web.Optimization.Styles.Render("~/bundle/css") %>
- 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:
<compilation debug="false" />
- 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 see
js?v…….. like some random
string that is the bundle name.
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:
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.