ASP.NET Bundling and Minification Gotcha #1 – Javascript bundle not rendering

ASP.NET Logo

Having used a couple of other bundling and minification libraries like Cassette and RequestReduce in the past, I started playing with the new bundling and minification features in ASP.NET 4.5. While setting up bundles is easy, there are quite a few gotchas that are not yet fully documented on the web.

This specific situation/gotcha took me a couple of hours to figure out, and I almost gave up on using Microsoft’s bundling completely.

In order to ease debugging for us developers, bundling and minification only happens if one of the following conditions are met:

1. You’re running with <compilation debug=”false”> on web.config (or without the attribute at all)
2. You force Bundle Optimizations to be ON by specifiying BundleTable.EnableOptimizations = true; on the RegisterBundles method.

When you’re running in debug mode, the files specified on bundles will not be minified or bundled, and tags will be rendered for each file in the bundle.

While that is great, the problem is the way Microsoft assumed that all developers have both development and release versions of each script that they use. As in, if you’re using jQuery, and you want to add jQuery to a bundle, Microsoft will expect you to have both the jQuery-1.8.0.js and the jQuery-1.8.0.min.js files added to your solution.

If you only have the .min.js file in your project, you configure your bundle to use that already-minified script, and you’re running in debug mode, any .min sripts will not be rendered in debug mode. What’s worse, if you only had .min.js scripts in that bundle, nothing will be rendered for it, as if it did not exist or was not configured, nada. No HTML tag for it.

Why?

Because as this StackOverflow question’s accepted answer states, there is a default ignore list that is enforced when rendering the bundle, and for debug mode, all *.intellisense.js, *-vsdoc.js, *.debug.js, *.min.js and *.min.css files are completely excluded from being rendered, because again, Microsoft assumed that you have both release and debugging versions of the scripts or stylesheets that you use in your project.

To be fair, the official tutorial on ASP.NET Bundling and Minification, does mention of some of the conventions, but it can be confusing. The post states:

“Selecting the non “.min” version for debug.”

“Selecting” implies you have choices. If a project only has release (.min.js) versions of a script, they are not added. If they had two choices, but one of the choices is not even an option in the situation, they should default to the other option, not to ignore the script. The post should have stated

“Only non .min versions are included for debug”

Their intention is good, but I believe the assumption/implementation is a bit flawed. I feel if they’re going to ignore a file that you explicitely specified in your bundle configuration, they should at least check for existance of the debug version of the script in your project before ignoring your request to add the release version to the bundle.

So, in order for your bundle to render those .min.js scripts, you have two choices.

1. Just add the debug version of the script you want to use to your project.
2. Clear the ignore list of the bundle (or just the entry you do not want ignored), although there might be side effects to that if you have other scripts of which you do have both versions.

Hope this saves someone a headache.

2 Responses to ASP.NET Bundling and Minification Gotcha #1 – Javascript bundle not rendering
  1. Tomas

    You saved my life today 🙂

  2. Robert McLaws

    You can also change your code to do this:

    bundles.UseCdn = true;
    const string jqueryCdnPath = “https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js”;

    bundles.Add(new ScriptBundle(“~/bundles/jquery”, jqueryCdnPath).Include(
    “~/Scripts/jquery-{version}.js”));//,

    And use CDNs for those resources wherever possible.

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.