Why is MVC4 bundling and minification making my files bigger?

asp.net-mvc-4, asp.net-optimization

Solution

Most likely what you are seeing here is some of the debug/release 'magic' that comes from the `FileExtensionReplacementList`.

Let's take jQuery for example. Typically in your scripts folder you will see two copies of each file, i.e. `jquery-1.6.2.js` and `jquery-1.6.2.min.js`.

By default optimization will use the `min.js` version when `debug=false`, and use the regular `jquery-1.6.2.js` when `debug=true`, since typically that makes debugging easier (no bundling and no minification of the bundle).

This file selection 'magic' is controlled via the `FileExtensionReplacementList` on `BundleCollection`.

In the next release (RTM), there will be a bit more granularity in this list, as typically developers will want to target when these are should be used, i.e.

list.Add("min", OptimizationMode.WhenEnabled);
list.Add("debug", OptimizationMode.WhenDisabled);

Problem

I am implementing the bundling and minification support in MVC4 and it appears as though it is making my javascript files bigger than if they weren't bundled/minified. I am using the latest build available in nuget (pre-release option on). I have the following bundle set up in my RegisterBundles class. ``` bundles.Add(new ScriptBundle("~/bundles/baseJS").Include( "~/Scripts/jquery-1.7.1.js", "~/Scripts/jquery.cookie.js", "~/Scripts/jquery-ui-1.8.11.js", "~/Scripts/bootstrap.js", "~/Scripts/jquery.pjax.js", "~/Scripts/kendo/2012.1.515/js/kendo.all.min.js", "~/Scripts/jquery.jstree.js", "~/Scripts/jquery.unobtrusive-ajax.js", "~/Scripts/jquery.validate.js", "~/Scripts/jquery.validate.unobtrusive.js", "~/RIS.Scripts/PostJson.js")); ``` And I am loading it into my _Layout.cshtml using ``` @Scripts.Render("~/bundles/baseJS") ``` When I add up the bytes received in Fiddler for these scripts in debug mode I get the following ``` Name Size(bytes) jquery 98013 jquery cookie 1455 jquery ui 124704 bootstrap 52378 pjax 8138 kendo.all 219751 jstree 55045 unobtrusive-ajax 2492 validate 13323 validate-unobtrusive 5138 postjson 634 Total 581071 ``` And when I run it on my production server I get the following from fiddler for the entire js bundle. ``` Bytes Received: 999,396 ``` What is going on here? Most of the files are minified to some extent, but it shouldn't almost double the size of my payload. Additional details- When I download the js files off my local dev box (fiddler reported size 379kb) and the server (fiddler reported size 999kb) and put them in kdiff they are binary identical. When I look in Chrome's developer tools network tab, the local server downloads 379kb, but the 'Parser' value is 975kb. What is this parser value. Could it be that there is some IIS compression setting that is not set in my server but is on my local IIS server? The only difference I note is the fact that the IIS Express I am running on my dev machine is 8.0 where the server is IIS 7.5.

Original source