October 2017 : Online course in ASP.NET MVC / Core. Conducted by Bipin Joshi. Read more...
Registration for October 2017 batch of ASP.NET MVC / Core online course has already started. Conducted by Bipin Joshi. Book your seat today ! Click here for more details.

Bundling and Minification Features of ASP.NET 4.5

A few days ago I wrote an article Using Bundling and Minification Features of ASP.NET 4.5 that talks about the new script and CSS bundling and minification features of ASP.NET 4.5. The article was written based on the Beta version of Visual Studio 2012 and there are certain changes introduced in the Release Candidate (RC). This post essentially outlines those changes. The basic concepts of the bundling and minification features described in the above article are still applicable.

Default Bundling and Minification

In Beta version you find the following code added to the Global.asax automatically:

protected void Application_Start()
{
    ...
    BundleTable.Bundles.RegisterTemplateBundles();
}

This default scheme has changed in the RC. The Application_Start event handler in the RC looks like this:

protected void Application_Start()
{
    ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

The BundleConfig class is not a framework defined class. It is an auto-generated class that gets added to your project in App_Start folder.

Using Script and CSS bundling in Views

In Beta version you used the following syntax to use Script and CSS bundles inside views:

<script src="<%= BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js") %>"></script>
<script src="<%= BundleTable.Bundles.ResolveBundleUrl("~/Content/css") %>"></script>

In the RC you will use :

<%= Scripts.Render("~/Scripts/js") %>
<%= Styles.Render("~/Content/css") %>

While testing the bundling features make sure to change debugging mode in web.config:

<compilation debug="false" targetFramework="4.5" />

If you keep the debug mode to true the entire script will be sent for easier debugging. So, to verify the bundling and minification features in the browser set debug attribute to false and then run the application.

Customizing Bundling and Minification

In Beta version you used the following syntax to create custom bundles:

protected void Application_Start()
{
    ...
    var bundle = new Bundle("~/MyScripts");
    bundle.AddFile("~/Scripts/jquery-1.6.2.js");
    bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js");
    bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js");
    BundleTable.Bundles.Add(bundle);
    ...
}

In RC you will use the following syntax instead:

protected void Application_Start()
{
    ...
    var bundle = new ScriptBundle("~/MyScripts");
    bundle.Include("~/Scripts/jquery-1.6.2.js",
                   "~/Scripts/jquery-ui-1.8.11.js",
                   "~/Scripts/modernizr-2.0.6-development-only.js");
    BundleTable.Bundles.Add(bundle);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Custom Transforms

In Beta version you specify custom transform class like this:

protected void Application_Start()
{
    ...
    var bundle = new Bundle("~/MyScripts", new MyBundleTransform());     
    bundle.AddFile("~/Scripts/jquery-1.6.2.js");
    bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js");
    bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js");
    BundleTable.Bundles.Add(bundle);
    ...
}

In RC the same code can be re-written as:

protected void Application_Start()
{
    ...
    var bundle = new ScriptBundle("~/MyScripts");
    bundle.Include("~/Scripts/jquery-1.6.2.js",
                   "~/Scripts/jquery-ui-1.8.11.js",
                   "~/Scripts/modernizr-2.0.6-development-only.js");
    bundle.Transforms.Add(new MyBundleTransform());
    BundleTable.Bundles.Add(bundle);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

 


Bipin Joshi is a software consultant, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Meditation and Mindfulness to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 07 June 2012


Tags : ASP.NET MVC Configuration Performance