Bundling and Minification in ASP.NET 4.5


Background:

Aa developer always requires to use multiple Javascript (Js) and CSS files for readability and maintainability of code. But such practice leads to degradation of the overall performance of the website. Because multiple Js and CSS files require multiple HTTP requests from a browser leads to degrade the performance & load time of your web pages.

Bundling and Minification is new feature in ASP.NET 4.5. This feature can help to reduce the size of javascript and css files and make the site perform faster.

Bundling

This feature 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 the page load  performance.

Minification

This feature performs a variety of different code optimizations to scripts or CSS, such as removing unnecessary white spaces and comments and shortening variable names to one character.

Bundling and minification is performed at runtime. They identify the user agent (e.g Firefox, Chrome, IE etc) and improve the compression by targeting the user browser (browser specific changes).

Normal Web application approach (Without Bundling and Minification)

1. Let’s start with a sample project, we will add some sample js and css files to our Default.aspx page.


<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.js"></script>
 <script src="Scripts/jquery-1.10.2.min.js"></script>
 <script src="Scripts/require.js"></script>
 <script src="Scripts/shadowbox.js"></script>
 <script src="Scripts/jquery.mixitup.js"></script>

<link href="Styles/bootstrap-responsive.min.css" rel="stylesheet" />
 <link href="Styles/bootstrap.min.css" rel="stylesheet" />
 <link href="Styles/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
 <link href="Styles/shadowbox.css" rel="stylesheet" />

2. Let’s add a script code on the page. It will display “Page loaded” message on our page.


<script type="text/javascript">
 $(document).ready(function () {
 $('#span1').text('Page loaded');
 });
 </script>

<h1><b><span id="span1" style="color:blue;"></span></b></h1>

Let’s run this project and inspect it with developer tool plugin of the browser (F12). Switch to Network tab, it will show the timing for assets required by our sample application. As shown below.

3. If you observe Default.aspx page carefully, you can see that client has 15 requests to server, 1.5 KB of data is transfered and it takes 665 ms to complete the request.

Bundling and Minification Approach:

1. First, install the Bundling and Minification Package from NuGet. Open the Package Manager Console, type Install-Package Microsoft.AspNet.Web.Optimization

The command will add references to required assemblies automatically.

2. Create script and style bundles using a class called “BundleConfig”. The following code shows the complete class:


using System.Web.Optimization;

public class BundleConfig
 {
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/js").Include(
 "~/Scripts/*.js"));

bundles.Add(new StyleBundle("~/bundles/css").Include(</span>
 "~/Styles/*.css"));

            //Files can be added to bundle by different ways like shown below
            //bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            //        "~/Scripts/jquery.unobtrusive*",
            //        "~/Scripts/jquery.validate*"));

            //bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
            //      "~/Scripts/WebForms/WebForms.js",
            //      "~/Scripts/WebForms/WebUIValidation.js",
            //      "~/Scripts/WebForms/MenuStandards.js",
            //      "~/Scripts/WebForms/Focus.js",
            //      "~/Scripts/WebForms/GridView.js",
            //      "~/Scripts/WebForms/DetailsView.js",
            //      "~/Scripts/WebForms/TreeView.js",
            //      "~/Scripts/WebForms/WebParts.js"));

 }
 }

3. As shown in the code, Wildcard Character (*) can also be used to Select Files.

4. Once a “BundleConfig” class is created, we need to register a bundle in the Application_Start method in the Global.asax.


void Application_Start(object sender, EventArgs e)
{
 BundleConfig.RegisterBundles(BundleTable.Bundles);
}

5. Once it is done, we need to add reference to these bundles in the Default.aspx page.


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

6. Now comment out the javascript and css references from the code.

7. Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element  in the Web.config file.


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

8. To enable bundling and minification, set the debug value to “false”. You can override the Web.config setting with the EnableOptimizations property on the BundleTable class.


void Application_Start(object sender, EventArgs e)
{
 BundleConfig.RegisterBundles(BundleTable.Bundles);
 BundleTable.EnableOptimizations = true;
}

9. Let’s rebuild the solution now and run it and compare the result of Bundling and Minification approach with the normal approach as shown below.

Now, If you observe Default.aspx page carefully implemented with Bundling and Minification, you can see that client has only 7 requests to server, 1.2 KB of data is transfered and it takes 467 ms to complete the request.

Source Code Download:

Github [Repository Link]

Box.com [Direct Link to Zip file]

Advertisements

3 thoughts on “Bundling and Minification in ASP.NET 4.5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s