Bundling Not Working in MVC5 When I Turn on Release Mode

Bundling not working in MVC5 when I turn on release mode

This is the default behavior.

Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web.config file.

http://www.asp.net/mvc/overview/performance/bundling-and-minification

Sample Image

MVC Bundle not working with Release Configuration (Debug is False), CSS and JS not loading

Check that the files are included correctly in the solution to be deployed (right click on the file and select properties).

Bundle Config does not work in release mode

I think all javascript methods are interlaced and duplicate, so I close the bundle and add all scripts layout a manual.This may be from the libraries I use.

Running an ASP.NET MVC 4 app in release mode does not bundle and minifiy the js files

Thanks to aleyush's comment that Web.release.config is only used during publishing the app, and not when running it locally, I was able to fix it by adding the following lines to the BundleConfig.cs file:

#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif

Since Debug mode will define the DEBUG constant, and during Release mode it is not defined, this line will only execute during Release mode. (you can test it by setting a breakpoint)

Bundle.config confused about debug and release and minification

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.

Bundling with subdirectories and Areas not working in release mode

You could try it like this:

bundles.Add(new Bundle("~/tinymce")
.IncludeDirectory("~/Scripts/tinymce", "*.js", true));

It works for me on my project.

ASP.NET MVC bundle working on local but not in server

I found the issue, after trying everything I went back an check the build scripts on the TFS server, we have continuous integration configured, turns out the build server was removing the .js and only letting the .min.js files on the final build. I removed that instruction and it started working.

Basically the .js did not exist on the server so there was nothing to bundle.

Thank you guys for your help!



Related Topics



Leave a reply



Submit