ASP.NET MVC 4 Beta – Bundling and Minification Dymystified

One of the handy new features in ASP.NET MVC 4 is the ability to easily bundle and minify your JavaScript and CSS.

  • Bundling: The process of combining all of your disparate js and css files into one file (one for js and one for css)
  • Minification: The process of shrinking the js and css content. This process involves removing all of the carriage returns and line feeds as well as shortening the variables

For better performing websites, bundling and minifcation is a vital concept and one you must be familiar with.

When you create a new ASP.NET MVC 4 application, you will find this code in the Application_Start() event in the Global.asax:

BundleTable.Bundles.RegisterTemplateBundles();

As it turns out, the code in the template does not allow you to conditionally minify the code based on whether you are in debug mode. There are also a number of unused/unavailable scripts referenced in the default bundler. The following custom bundler addresses those issues:

public class MyBundler
 {
  public static void init()
  {
   IBundleTransform jstransformer;
   IBundleTransform csstransformer;

   #if DEBUG
      jstransformer = new NoTransform("text/javascript");
      csstransformer = new NoTransform("text/css");
   #else
      jstransformer = new JsMinify();
      csstransformer = new CssMinify();
   #endif

   var bundle = new Bundle("~/Scripts/js", jstransformer);

   bundle.AddFile("~/Scripts/jquery-1.6.2.js", true);
   bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js", true);
   bundle.AddFile("~/Scripts/jquery.validate.unobtrusive.js", true);
   bundle.AddFile("~/Scripts/jquery.unobtrusive-ajax.js", true);
   bundle.AddFile("~/Scripts/jquery.validate.js", true);
   bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js", true);
   bundle.AddFile("~/Scripts/AjaxLogin.js", true);
   bundle.AddFile("~/Scripts/knockout-2.0.0.debug.js", true);

   BundleTable.Bundles.Add(bundle);

   bundle = new Bundle("~/Content/css", csstransformer);

   bundle.AddFile("~/Content/site.css", true);

   BundleTable.Bundles.Add(bundle);

   bundle = new Bundle("~/Content/themes/base/css", csstransformer);

   bundle.AddFile("~/Content/themes/base/jquery.ui.core.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.button.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css", true);
   bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css", true);

   BundleTable.Bundles.Add(bundle);
  }
 }

To call this code, navigate to your Global.asax file, replace the RegisterTemplateBundles with this:

MyBundler.init();

Now, when you are in debug mode, while your js and css files will be bundled, they won’t be minfied.

About johnvpetersen

I've been developing software for 20 years, starting with dBase, Clipper and FoxBase + thereafter, migrating to FoxPro and Visual FoxPro and Visual Basic. Other areas of concentration include Oracle and SQL Server - versions 6-2008. From 1995 to 2001, I was a Microsoft Visual FoxPro MVP. Today, my emphasis is on ASP MVC .NET applications. I am a current Microsoft ASP .NET MVP. Publishing In 1999, I wrote the definitive whitepaper on ADO for VFP Developers. In 2002, I wrote the Absolute Beginner’s Guide to Databases for Que Publishing. I was a co-author of Visual FoxPro Enterprise Development from Prima Publishing with Rod Paddock, Ron Talmadge and Eric Ranft. I was also a co-author of Visual Basic Web Development from Prima Publishing with Rod Paddock and Richard Campbell. Education - B.S Business Administration – Mansfield University - M.B.A. – Information Systems – Saint Joseph’s University - J.D. – Rutgers University School of Law (Camden) In 2004, I graduated from the Rutgers University School of Law with a Juris Doctor Degree. I passed the Pennsylvania and New Jersey Bar exams and was in private practice for several years – concentrating transactional and general business law (contracts, copyrights, trademarks, independent contractor agreements, NDA’s, intellectual property and mergers and acquisitions.).
This entry was posted in Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Pingback: Yet Another Bundling Approach for MVC 4

  • Pingback: Friday Links #193 | Blue Onion Software *

  • Anonymous

    Hey Bob – our plan is not to provide a default LESS bundle transform out of the box because actually writing a bundle transform that uses LESS is about 5 lines of code. Check out this example where I wrote a LESS transform as well as an implementation for chaining transforms together – https://gist.github.com/1998379

    Also, based on this example, we’ve modified the design so that you can pass in a params array of bundle transform instances and they will be chained together in the order you specified – since we figured that everyone would end up having to write their own composite transform to do this kind of thing.

    Hope that helps,

    _howard

  • Anonymous

    Glad you like and found the post useful!!

  • http://twitter.com/Rhysling Bob Kummer

    Thank you! “NoTransform” is what I was missing.

    Is there a .LESS processor hiding in there somewhere or available as a plug in? I know it’s a planned capability, but I haven’t seen any examples.

  • Anonymous

    aha! so that’s how I can handle not minifying stuff in DEBUG builds. Excellent! Thanks for posting this up.

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1059