Bundling & Minification is a Website Performance Optimization approach provided with asp.net 4.5 version .
It can be added to asp.net 4.0 version too with explicit installation from Nugget Package Manager tool.
Bundling & Minification are two techniques we can use in ASP.NET to improve website load time.
These techniques improve load time by reducing the number of requests to the server and reducing the size of requested resources (CSS, Java Script).
Most of the current major browsers limit the number of simultaneous connections per each hostname to six.
That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser.
Bundling:
As mentioned Bundling is a new feature in ASP.NET 4.5 and that can be implemented in ASP.NET 4.0 version as well with the help of System.Web.Optimization framework and that makes it easy to combine or bundle multiple files into a single file.
You can create CSS, JavaScript and other bundles. Fewer files means fewer HTTP requests and that can improve first page load performance.
Minification:
Minification performs optimization to website CSS styles and Javascript code, such as removing unnecessary white space and comments and shortening variable names to one character.
Consider the following JavaScript function.
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;">
loadDropDownValues = function (lookup) {
///<signature>
///<summary> makes a webservice call and bind data to dropdown
// </summary>
//<!--data-blogger-escaped-&lt;param name=&quot;Lookup&quot; type=&quot;String&quot; /&gt;-->Lookup table name for dropdown
///</signature>
Your code goes here
}</span>]]>
After minification it removes unwanted comments and shortens the variable names, the function is reduced to the following:
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;">
loadDropDownValues = function (l) {your code goes here};
</span>]]>
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>]]>
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;"><br /></span>]]>
Bundling and Minification Impact in Web Sites
The following table shows several important differences between listing all the assets individually and using bundling and minification (B/M) in the sample program.
Following table is for representation and shows the impact of B&M in Web Applications.
|
Using B/M |
Without B/M |
Change |
| File Requests |
9 |
34 |
256% |
| KB Sent |
3.36 |
11.92 |
266% |
| KB Received |
388.51 |
530 |
36% |
| Load Time |
510 MS |
780 MS |
53% |
Bundling and Minification Implementation:
It is very easy to implement B&M in our web applications.
This can be enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web.config file.
In the following XML, disable the bundling and minification by setting debug to true.
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;">
<system data-blogger-escaped-.web="">
<compilation data-blogger-escaped-debug="true">
Lines removed for clarity.
</compilation></system>.</span>]]>
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;"></span>]]>In order to enable bundling and minification, set the debug value to "false".
We can override the Web.config setting with the EnableOptimizations property on the BundleTable class too.
Note: Please note that Unless EnableOptimizations is true or the debug attribute in the compilation Element in the Web.config file is set to false, files will not be bundled or minified.
Additionally, the .min version of files will not be used, the full debug versions will be selected.EnableOptimizations overrides the debug attribute in the compilation Element in the Web.config file.
If you are using .net 4.0 versions then we need to install the System.Web.Optimizatin framework from Nugget Package Manager Tool. It Installs Other Dependent DLL’s like WebGreese.DLL.
Practical Approach to Implement Bundling and Minification:
In my case I have created a separate file for listing all resources (Including CSS, JS) in XML format.
Take a look at the sample of xml file below.
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;">
<bundling>
<js data-blogger-escaped-name="~/BlankMaster.js">
<path>~/Scripts/jquery-1.10.2.js</path>
<path>~/Scripts/jquery-ui-1.10.4.custom.js</path>
<path>~/Scripts/CommonFunctions.js</path>
<path>~/Scripts/jquery.tablednd.js</path>
</js>
<css data-blogger-escaped-name="~/BlankMaster.css">
<path>~/Styles/jquery-ui-1.10.4.custom.css</path>
<path>~/Jqx/Jqx - CSS/jqx.base.css</path>
<path>~/Jqx/Jqx - CSS/jqx.metro.css</path>
<path>~/Styles/Main.css</path>
</css>
<js data-blogger-escaped-name="~/MasterPage.js">
<path>~/Scripts/jquery.js</path>
<path>~/Scripts/CommonFunctions.js</path>
<path>~/Scripts/jquery.tablednd.js</path>
<path>~/Scripts/clsCAPS.js</path>
</js>
<css data-blogger-escaped-name="~/MasterPage.css">
<path>~/Styles/Main.css</path>
</css>
</bundling></span>]]>
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;"></span>]]>Created one helper class which reads the resource URL’s from xml file which is shown above.
This Class reads xml file and adds js/css files to bundle using bundle classes referenced from Optimization framework.
The following code enables bundling and minification and overrides any setting in the Web.config file.
<![CDATA[<span style="font-family: "georgia" , "times new roman" , serif;">
public void AddBundling()
{
string filePath = String.Empty;
string bundleName = String.Empty;
try
{
StreamReader reader = new StreamReader(HttpContext.Current.Server.MapPath("~/Bundle/FileBundling.xml"));
XmlSerializer serializer = new XmlSerializer(typeof(Bundling));
Bundling bundlingInfo = (Bundling)serializer.Deserialize(reader);
reader.Close();
reader.Dispose();
#region Bundling of the css files.
Bundle cssBundle;
foreach (Css css in bundlingInfo.Css)
{
cssBundle = new StyleBundle(css.Name);
foreach (string cssFile in css.Path)
{
cssBundle.Include(cssFile);
}
BundleTable.Bundles.Add(cssBundle);
}
#endregion
#region Bundling of the java script files.
Bundle jsBundle;
foreach (Js js in bundlingInfo.Js)
{
bundleName = js.Name;
jsBundle = new ScriptBundle(js.Name);
foreach (string jsFile in js.Path)
{
filePath = jsFile;
jsBundle.Include(jsFile);
}
BundleTable.Bundles.Add(jsBundle);
}
#endregion
BundleTable.EnableOptimizations = true;
}
catch (Exception ex)
{
throw new Exception("There is a problem while creating Bundle", ex);
}
}
</span>]]>
To identify individual nodes in xml file one model class created with properties which map to nodes in xml file.
This Class Represents Model Class which maps to nodes added in xml file.
<![CDATA[
[Serializable]
public class Js
{
[XmlAttribute]
public string Name { get; set; }
[XmlElement]
public string[] Path { get; set; }
}
public class Css
{
[XmlAttribute]
public string Name { get; set; }
[XmlElement]
public string[] Path { get; set; }
}
[Serializable]
public class Bundling
{
[XmlElement]
public Js[] Js { get; set; }
[XmlElement]
public Css[] Css { get; set; }
}
]]>
Bundling and Minification will be registered from Global.asax file.
In order to enable bundling and minifaction we have to register functionality in global.asax file.
In Global.asax Applicatin_Start() method.Create the object of helper class which we created for bundling and minification.
<![CDATA[
ApplicationSettingsHelper appSettings = new ApplicationSettingsHelper();
appSettings.AddBundling();
]]>
Next step is how to call Bundled resources in webpage/Master pages
Following are the syntaxes to load bundled files(CSS, JS) in webpages
I have called bundled files in master pages as follows
Bundles are referenced in views/aspx using the Render method, (Styles. Render for CSS and Scripts. Render for JavaScript). The following markup from the Master Pages shows how Navigator Pages reference CSS and JavaScript bundles.
BlankMaster.Master:
<![CDATA[
<%# System.Web.Optimization.Styles.Render("~/Common.css") %>
<%# System.Web.Optimization.Scripts.Render("~/BlankMaster.js")%>
]]>
MasterPage Master:
<![CDATA[
<%#System.Web.Optimization.Styles.Render("~/MasterPage.css") %>
<%# System.Web.Optimization.Scripts.Render("~/MasterPage.js")%>
]]>
Comments
Post a Comment