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);
}