ASP|NET MVC 4 Bundling And Minification

Feeds

Thursday, 23rd February 2012

I was delighted to hear that bundling and minification for JavaScript and CSS was being included as a feature in ASP.NET MVC 4. This is actually something I have implemented myself in MVC apps and PHP apps before, so I know I want this feature quite a lot.

If you don't know why you would use this, here is a quick explanation of these two concepts.

Bundling is where you take multiple files and join them into one larger file. For example, if you have jquery with four plugins, rather than serving five JavaScript files, you join them all together and serve a single JavaScript file. From a size point of view, the single file is roughly the same size as the five original files, but it actually downloads faster because you have less HTTP requests. Each HTTP request gets queued and downloaded, and very often the queue time is a reasonably portion of the total download time. The same principle applies to CSS, quite often you create several CSS files for your website (for example, layout, typography and so on) and bundling these gives you less HTTP requests.

Minification requires two explanations, first up you'll need a really recent dictionary if you want to look up the word. Secondly, it means squishing down the contents of your JavaScript and CSS. On a basic level, if you take a nicely formatted JavaScript file and remove all of the white-space, you'd have a much smaller file. This is the idea behind minification - it finds ways of making your files smaller, so they download faster.

So we are all agreed that bundling and minification rock. The problem is, nobody wants to maintain bundled and minified files - we want to work in neatly cohesive blocks that are laid out in a readable fashion. So we are also all agreed that bundling and minification should be automated at some later time than the development stage.

Enter ASP.NET MVC 4, which will do it all on the fly, will deal with caching and will make your pages a bit faster.

So how do we get our CSS bundled and minified. Well, in MVC 3 you have this:

<link href="styles/style1.css" rel="stylesheet">
<link href="styles/style2.css" rel="stylesheet">
<link href="styles/style3.css" rel="stylesheet">

And all we have to do in MVC 4 to get it all packaged up is this:

<link href="styles/css" rel="stylesheet">

Easy right. The href attribute tells MVC we want all files in the "styles/" folder that are of type "css". So with a brief leap of the imagination, we can guess how to do the same for JavaScript - here is the MVC 3 code:

<script src="scripts/jquery/jquery.min.js"></script>
<script src="scripts/jquery/jquery.uppydowner.js"></script>
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<script src="scripts/script3.js"></script>

And now the MVC 4 equivalent...

<script src="scripts/jquery/js"></script>
<script src="scripts/js"></script>

By including two lines here, we've really easily enforced an order, jQuery first, other stuff next - but you can actually write a custom bundle with an explicit order if you need to have precise control over things. Custom bundles can also be used if you want to run a processor to convert your CoffeeScript or LESS into JavaScript and CSS respectively.

There is an HTML helper coming (Html.Bundle(...)) that will not only do all this, but also add a hash to the src attribute, which will change whenever the contents changes - so no more asking users to "force refresh" the page or clear their cache.

And finally, if you are having trouble trying out bundling, you may need to add this to your Application_Start() method:

BundleTable.Bundles.EnableDefaultBundles();