ASP.NET Bundling and Minification - Including Already Minified Files for Production Bundles and Unminified Files for Development

Question

I want some expert advice on ASP.NET MVC Bundling and Minification. I have in my project script files that have both unminified (.js) and minified versions (.min.js). I have included them in my script bundle as follows:

bundles.Add(new ScriptBundle("~/bundles/layout").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/lib/errorhandling.js",
                    "~/Scripts/lib/errorhandling.min.js",
                    "~/Scripts/vendor/modernizr.custom.js",
                    "~/Scripts/vendor/modernizr.custom.min.js",
                    "~/Scripts/toastr.js",
                    "~/Scripts/toastr.min.js"));

It seems that the bundle indeed contains only once each script file, not twice. I have confirmed this both for development and production. (As a side note, in development, that is, when debug=true, the bundles are not rendered but the files are included as separate script tags. This is the desired behaviour for me, as well.)

My questions are:

(1) Is this the best and recommended way to include already minified files for production setup and unminified files for development?

(2) Does ASP.NET try to minify the whole bundle in production (even though it is already minified)? If yes, what is the best way to prevent ASP.NET from trying to minify the bundle?

Thanks in advance!

Answer 1

There is no need to specifically include the minified versions in your script bundle. By default, MVC will search for a matching file with .min.js and include that (not entirely sure if it trys to minify further). If not, it creates a minified version. You can test this by adding the following to BundleConfig.cs

using System.Web.Optimization;

then adding the following at the end to override debug=true in development

BundleTable.EnableOptimizations = true;

From MS documentation

The bundling framework follows several common conventions such as:

• Selecting “.min” file for release when “FileX.min.js” and “FileX.js” exist.
• Selecting the non “.min” version for debug.
• Ignoring “-vsdoc” files (such as jquery-1.7.1-vsdoc.js), which are used only by IntelliSense.

Answer 2

Minification, or not, the bundling feature is useful to for logical groupings of scripts and css that go together, and as a single place to control things. It also generates unique URLs, so eliminates browser cache problems.

If you use ScriptBundle, the engine will try to minify, (except when you set debug=true as you've shown).

You can turn off minification, but retain bundling, by just using Bundle() instead of ScriptBundle(). See Martin's answer here:

ASP.NET Bundles how to disable minification

As an aside, using pre-minified files with Bundle() as opposed to ScriptBundle(), will preserve the license headers. With jquery's MIT license, it at least stipulates that it should not be removed. I'm not sure how to interpret the fact that the default Microsoft MVC template uses ScriptBundle().