Using the ASP.Net bundler without minification

The bundler shipped with ASP.Net works pretty well with minimal configuration. In short, when the debug flag is off the bundler will do a few things for us:

Bundle related files into single web response
Apply minification transformation such as shortening variable\method names, trimming whitespace, removing comments, etc
Add a version token to the querystring of the resource filename. It recognizes when a file within a group changes and produces a new token, which will keep our users’ browsers from using cached files.

Below is a sample BundleConfig.cs file that defines four javascript bundles and a single css bundle. When debug is turned on, each of the files will be served independently.

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

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));
    }
}

Let’s turn debug off so we can see the bundler in action.

<system.web>
  <authentication mode="None" />
  <compilation debug="false" targetFramework="4.5" />
  <httpRuntime targetFramework="4.5" />
</system.web>

Looking at the Network tab in Chrome’s developer tools shows that the files are now being minified and loaded from /bundles/ url paths instead of the physical /scripts/ path. Also, now /bundles/boostrap.js includes the contents of both bootstrap.js and respond.js.

Since the minifying process involves rewriting javascript code, it’s possible that a bug could appear as a result. Luckily, if a particularly nasty bug appears, there are methods available to bypass minification while continuing to take advantage of bundling and versioning.

Our first option is to register our scripts as generic Bundle objects instead of ScriptBundles. In the sample below, we’ve changed the ‘bootstrap’ bundle from a ScriptBundle to a regular Bundle and we can see that the the bootstrap.js and respond.js files have been merged, but not minified.

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

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new Bundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));
    }
}

This approach would allow us to configure minification on a bundle-by-bundle basic. But what if we wanted to disable it site-wide? We can do this by clearing the Transforms collection for each bundle after they’re registered in the Global.asax.cs.

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        BundleTable.Bundles.ForEach(x => x.Transforms.Clear());
    }
}

Now all of our javascript resources will continued to be bundled (and versioned), but without going through the minification process!