Optimizing ASP.NET Web application performance through Bundling and Minification Part-1
In this article I am going to cover Bundling part. Bundling helps us to minimize the number of HTTP requests sent from browser to improve ASP.NET web page performance. Minification will be covered in Part-2.
Bundling
Usefullness
ASP.NET 4.5 framework introduced some of the new features to improve the performance of web sites, Bundling is one of those which is provided in library System.Web.Optimization. Bundling enables us to combine multiple JavaScript or CSS files into one bundle and thereby reducing the number of HTTP requests which in turns improves performance of the site. Important thing about bundling is that you have to set compilation elements debug attribute to "false" from web.config to enable bundling.Set Up
To install Microsoft ASP.NET Web Optimization Framework, run the following command in the Visual Studio Tools==> Library Package Manager==> Package Manager Console
PM> Install-Package Microsoft.AspNet.Web.Optimization
After this you can see that System.Web.Optimization.dll reference is added to your solution.Code
Add some of the .js files to your solution.Solution Explorer:
Web.config:
<system.web>
<compilation debug="false" />
</system.web>Global.asax:
First you need to register bundles in Global.asax.
protected void Application_Start(object sender, EventArgs e)
{
/* Here I am creating a bundle of .js files */
/* You can directly create ScriptBundle for script files or StyleBundle for .CSS files */
Bundle a = new Bundle("~/bundle/js");
a.Include("Scripts/jquery-1.7.1.js");
a.Include("Scripts/jquery-1.7.1.min.js");
a.Include("Scripts/jquery-ui-1.8.20.js");
a.Include("Scripts/jquery-ui-1.8.20.min.js");
/* You can directly add all these .js files in a bundle using a single line as follows
a.Include("~/Scripts/*.js");*/
BundleTable.Bundles.Add(a);
}
TestForm.aspx [Page with Bundling]:
Now you have to give reference of your bundle to your aspx page to access all those .js file functions.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page With Bundling</title>
<%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
</head>
<body>
<form id="form1" runat="server">
<div>
<B>Asp.net Web Optimization using Bundling </B>
</div>
</form>
</body>
</html>TestForm2.aspx [Page without Bundling]:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Without Bundling</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery-ui-1.8.20.js"></script>
<script src="Scripts/jquery-ui-1.8.20.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<B>Asp.net Web Page without Bundling </B>
</div>
</form>
</body>
</html>Performance Analysis:
Here you can easily see the difference between number of requests both the web pages have sent to server.TestForm.aspx [Page with Bundling]:
Single request for all the .js files as bundle/js.
TestForm2.aspx [Page without Bundling]:
4 seperate requests for 4 .js files.
Summary:
Hope I had explained all the details regarding bundling in a proper way. Please try it for improving your website performace and you will see the difference. You can find attached source code for your reference. Please post if any suggestions or feedback.
Attachments
