Enabling and disabling optimizations of JavaScript and CSS files in ASP.NET MVC applications (and two tips)

If you start a new ASP.NET web application project in Visual Studio 2013 (such as choosing the MVC template), you have surely noticed that you have built-in support for bundling and minification of your JavaScript and CSS files, which is also enabled by default.

Bundling and minification (just bundling or "b/m" for short) is very useful and recommended approach in production, but sometimes, it makes debugging more difficult, especially if you want to set breakpoints in your JavaScript code and step the code line-by-line.

In previous versions of ASP.NET MVC applications, you could enable and disable this bundling of files with the "debug=true" attribute setting in your web.config file (in the system.web/compilation element), but in the latest ASP.NET MVC version 5, this no longer applies. Instead, with new projects, optimizations are on by default.

Of course, you can still control if such optimizations are made or not. Firstly, you know if optimizations are in use if your JavaScript and style sheet references look like this:

<link href="/Content/css?v=MDbdFKJHBa_ctS5x4He1bMV0_RjRq8jpcIAvPpKiN6U1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>

Optimizations are enabled and disabled in a file named "BundleConfig.cs", which can be found from the App_Start folder of the project. There is a single routine called "RegisterBundles", which contains the logic to set up bundles and at the end, enables or disables optimizations:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
  "~/Content/bootstrap.css",
  "~/Content/site.css"));

BundleTable.EnableOptimizations = true;

Here, the last line is key. You can set value here easily, but there are two things I usually do to improve things a bit.

Firstly, I like to declare a new constant at the top of the file, and use this constant value to set the BundleTable.EnableOptimizations value at the bottom of the routine/file. This is because as you develop your application, the number of bundles grows. This pushes the enable/disable setting further down, and to change it in the default manner, you'd always need to scroll to the bottom of the file.

Secondly, I think it's easier to simply disable all optimizations in the debug mode and enable them in release. For this, I'm using the standard Visual Studio build configurations DEBUG and RELEASE, and set the optimization based on these. Then it's very easy to change your JS/CSS optimizations from the main toolbar of Visual Studio. To make this work, I simply use C# language #if and #endif constructs for conditional compilation.

Here's a quick example:

#if DEBUG
   BundleTable.EnableOptimizations = false;
#else
   BundleTable.EnableOptimizations = true;
#endif

Hope this helps!