Optimizing ASP.NET Web application performance through Bundling and Minification Part-2
In the first article we had seen how Bundling helps us to minimize the number of HTTP requests sent from browser to improve ASP.NET web page performance. Now I am going to cover Minification Part which helps to reduce the size of requested resources to improve ASP.NET web page performance in terms of load time of CSS or JavaScript files(resources).
Minification
Usefullness
A single web page may have multiple JavaScript or CSS files included for different different functionalities. Web browser downloads that each and every reference file. So minification helps us to create smaller requests by removing unnecessary white spaces, comments and more importantly it shortens the variable names from each reference file to one character. Which leads to reduction in file size and the bandwidth is properly utilized. It also helps in mobile applications to minimize battery consumption.
Lets take an example of following javascript function:
function (iNumber1, iNumber2)
{
/* This function adds to numbers and return their result*/
var iNumber3=iNumber1+iNumber2;
return iNumber3;
}
JavaScript function after minification:
function(a,b){var c=a+b; return c;}
Debugging
You will see the minified JavaScript function.Code
Add some of the .js files to your solution.Solution Explorer:
Web.config:
<system.web>
<compilation debug="false" />
</system.web>TestForm.aspx:
Now you have to give reference of your bundle(created in first part) 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 and Minification </title>
<%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Asp.net Web Optimization using Bundling and Minification </h2>
</div>
</form>
</body>
</html>TestForm2.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Without Bundling and Minification</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>
<h2>Asp.net Web Page without Bundling and Minification </h2>
</div>
</form>
</body>
</html>Performance Analysis:
Here you can easily see the difference between the sizes of .js files/resources on both the web pages.TestForm.aspx [Page with Bundling and Minification]:
Only 286.20 KB size for all the .js files inside a bundle/js.
TestForm2.aspx [Page without Bundling and Minification]:
Toal 902.34 KB size for all the seperate 4 .js files.
Summary
Hope I had explained all the details regarding minification in a proper way. Please try it for improving your website performance and you will see the difference. Please post if any suggestions or feedback.
Thanks for reading.