asp.net mvc 5 - Bundle.config confused about debug and release and minification

Question

I read this article http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification and I just feel there's a lot of content missing from it.

I was developing on a project using unminified javascript files. However, this became an issue when I decided to publish my project to another server, where bundle.config hijacks my javascript files and does things I never knew that I needed to test on my development, and now my dev machine is throwing all kinds of javascript errors. So now, I'm here, reading up on what bundle.config does with min files.

After reading the article, I made the following assumptions:

If I set my project to debug mode, my project will get all javascript files that does not contain any "min.js" files.

if I set my project to release mode, my project will attempt to get all my min.js files, and if there are no min.js files, then the non-min files will be converted to a minified version.

Based on those two assumptions, turns out I was wrong. Switching to Release mode doesn't do anything with min files, it acts the same way as my Debug mode.

Secondly, going into the web.config and setting the following to false (previously true):

<compilation debug="false" /> 

takes all my files that are not minified and minifies them, ignoring any min files I have! I don't see anything about File.min.js, all I see is something like: "File?v=dw-fikdksdm..." which is fine, since this is considered a "bundle" and gets minified, but why can't I just see my mins loaded? and what happens if minification and bundling throws javascript errors? What would I have to do at this point? Can I prevent some javascript files from not being included in a bundle and/or minified?

Also I've noticed there are a couple of 403 errors that occur when tried to load up the javascript resources.

Can someone explain what's going on here and why this is goes against my original assumption?

Answer 1

Okay, here are a few things I discovered about this:

When in debug mode, and you check the web.config:

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

then all your javascripts will be preserved within the bundle virtual directory (they will not merge into a single file and they will not be minified).

When switching to release mode, then switch to:

 <system.web>
     <compilation debug="false">

so that all your javascript files within a bundle are minified and compiled into a single file, this reduces round trips to the network. Please note, one file is created for each bundle.

If you want to get the optimizations enabled regardless of whether or not you're in debug mode, then set BundleTable.EnableOptimizations = true, which forces the minification and bundling. If you leave this out of the code, then BundleConfig will look at the web.config instead.

RegisterBundles(BundleCollection bundles) method in BundleConfig.cs, you put in:

    BundleTable.EnableOptimizations = true;
    bundles.UseCdn = true;
    var cssTransformer = new CssTransformer();
    var jsTransformer = new JsTransformer();
    var nullOrderer = new NullOrderer();

and this is how you'd add in javascript files:

    var jqueryBundle = new CustomScriptBundle("~/bundles/jquery");
    jqueryBundle.IncludeDirectory("~/Scripts/JQuery", "*.js");
    jqueryBundle.Transforms.Add(jsTransformer);
    jqueryBundle.Orderer = nullOrderer;
    bundles.Add(jqueryBundle);

Couple notes:

• Bundle.config does ignore all min files. I added File.min.js, and File.js, and it ignores File.min.js, and it minifies File.js and bundles it with other files included in the bundle. I checked because when I minified one of the files myself, all the variable names (not the structured code) compared to what was downloaded in my website was completely different than the min file I included in the project. So, this verifies that min files are not needed in your project.
• Bundle.config ignores minifying any files named like this.. "File.debug.js", this will never be minified, in fact, it will never be included in your project in release. I found this out after realizing one of my javascript files never making it to the site.

• 403 errors will occur if you use "Content/css" as your virtual directory of where your bundle will appear, this needs to be changed to "bundles/css" and the 403 will go away like so (using razor):

  @Styles.Render("~/bundles/css")

meaning if you have this in your code (notice where ~/bundle/css" is, this will be where your css files will go):

BundleTable.EnableOptimizations = true;

bundles.UseCdn = true;
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
#region CSS Styles
var cssBundle = new CustomStyleBundle("~/bundles/css");
cssBundle.IncludeDirectory("~/Content/CSS", "*.css")
         .IncludeDirectory("~/Content/CSS/Override", "*.css");
cssBundle.Transforms.Add(cssTransformer);
cssBundle.Orderer = nullOrderer;
bundles.Add(cssBundle);
#endregion

• If your css has a relative path, this may also be changed, so look for 404 errors
• Not all minified files will behave the way you want them to.. so you will have to ultimately do a semi bundled version (or you do not have to minify any js at all, and just bundle them)

But if you want to continue on doing the minified javascript and you do not know which files is throwing the error, the following steps will help:

1. Bundle everything
2. Open your browser and find all the sources of your bundled minified js
3. Copy working bundled js into another file
4. start manually inserting javascript using the tags instead of bundleconfig.cs, and keep adding them one by one until one fails.. if that fails.. then you'd have to use the un-minified version of that project
5. repeat step 3-4

I wish there was better documentation of bundle.config at the time of this writing, but I found this entire experience to be severely disappointing.