Why is MVC4 bundling and minification making my files bigger?

Question

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.

Answer 1

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);

Answer 2

You have the bundling option working, but the minification is done by an BundleTable.EnableOptimizations = true setting and some "transform" options that you've haven't engaged. See CssMinify and JsMinify.

Something along the lines of:

        var b1 =new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-1.*");

        b1.Transforms.Add(new JsMinify());

        bundles.Add(b1);

- and -

BundleTable.EnableOptimizations = true;