Using MVC4 Minification and Bundling in MVC3

Using MVC4 Minification and Bundling in MVC3

I have been testing ASP.net MVC4 lately and one of the things I really like in it is the built in minification and bundling that it provides. I discovered the other day that there is a nuget package that contains this MVC4 bundling and minification. The problem I ran into with the nuget package is that it uses a different namespace than the actual file in MVC4. The nuget package uses Microsoft.Web.Optimization and MVC4 uses System.Web.Optimization so I was unable to get the nuget package to work properly in my view. Then I thought to myself “I already have the actual file in my MVC4 project”, so I grabbed it from my project and dropped it into the bin folder of my MVC3 project and added a reference to it. What do you know, it works!!

So here is how to use it:

  1. Reference the System.Web.Optimization dll file in your project. I suggest getting it from an MVC4 project or downloading it here.
  2. Open up your global.asax file and add this line to the end of your Application_Start() function.
  3. Add bundling to your view(s)

The last part of the bundling path is the file type to bundle, so in my examples the paths are actually “/stylesheets” & “/scripts”. This takes all of the css files in the stylesheets folder and combines and minifies them into a single file. It does the same thing with the js files in the scripts folder.

The output will look similar to this:

As you can see, it gives the bundled files a version id so that you can cache the files and when you make a change to one of them, the ID will change so that your browser will download the new changes.

Just as a warning, MVC4 is still in beta so be careful with using this file. The final version of the system.web.optimization will probably be different


Donate Bitcoins
Posted Under: ASP.net C# MVC3
Tagged:

Author

Written by Joey Iodice

I'm a software developer focusing on ASP.net, HTML5, jQuery, & Javascript.

11 Comments

  1. Vitaly says:

    This is an interesting experiment that you did. I repeated the steps you suggested here, and ran into two problems:

    1. This bundling came into conflict with my DotLess CSS files, as it happens prior to DotLess processing, and thus produced errors about the DotLess syntax. I wasn’t sure how to solve it, so I skipped my own DotLess CSS, bundling only third-party CSS files, like jQuery, FancyBox, etc…That went Ok then.

    2. Once I got it working for everything CSS + JS (except my own DotLess CSS), It all seemed fine, until I tried to re-deploy it to my hosting, which is GoDaddy (proper IIS7 and all). The new CSS and JS links generated by bundling (ones with hash key appended to them) produced a security exception on the server and refused to load. I didn’t know what to make of it, and had to abandon the idea, given it is probably too unique for anyone to know what’s going on.

    If you want to share your thoughts on the troubles I described, I may try and have another go at it.

    Much appreciate your post. Cheers!

    • joey says:

      Yea, it has problems bundling non valid CSS. I had some IE CSS hacks in one CSS file and it did not bundle it properly. You can however do the bundling by doing custom bundling in the global.asax file. Basically you would call on the dotless to run first then the MVC4 bundling. I think there are security problems with GoDaddy right now handling the bundled URLs. Since this is still in beta, you will probably have to wait until it is final for GoDaddy to support it.

    • joey says:

      Yea, I saw your post on the asp.net forums. I did not see however how you fixed your GoDaddy problem. Glad you got it working, I will probably write up something about doing custom bundling soon.

  2. Vitaly says:

    About GoDaddy problem – it is there at the bottom. The culprit was folder Content/css created by an earlier deployment. And bundling doesn’t allow such folder name, if you specify Content/css for your bundle. So, I just deleted subfolder css from there, and it worked.

    As for the custom bundling article good idea ;) This is what I started off with anyway, because you can explicitly specify the order in which files are bundled, which is very important.

    Last but not least, I still haven’t figured out why on earth Opera is the only browser in the world that doesn’t process my JS bundle correctly…

  3. Joey Iodice says:

    This feature was added to the final release of MVC4. You will have to obtain that on your own because I only have the dll file from the beta. Also, you will have to do custom bundling in your global.asax.cs file. Here is an example from the MVC4 documentation:
    http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

    public static void RegisterBundles(BundleCollection bundles)
    {
    //bundles.Add(new ScriptBundle(“~/bundles/jquery”).Include(
    // “~/Scripts/jquery-{version}.js”));

    bundles.UseCdn = true; //enable CDN support

    //add link to jquery on the CDN
    var jqueryCdnPath = “http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js”;

    bundles.Add(new ScriptBundle(“~/bundles/jquery”,
    jqueryCdnPath).Include(
    “~/Scripts/jquery-{version}.js”));

    // Code removed for clarity.
    }

Leave a Reply