Knowledgebase

I like to use client build systems like grunt, gulp, webpack etc. to bundle and minify JavaScript and CSS files, but on a resent project I had to use the Microsoft Web optimization framework.

Note: All code used in this blog post  can be found at: https://github.com/roelvanlisdonk/POC/tree/master/ASP.NET/CacheBusting

In this I will describe how to create an MVC .NET 4.6 web application, that uses bundeling, minification and fingerprinting for cache busting all by using the System.Web.Optimization framework.

Start Visual Studio 2015, then click:

File> New > Project…

Choose: Installed\Templates\Visual C#\Web\ASP.NET Web Application

Choose: “ASP.NET 4.6 Templates”: “Empty” and “Add folders and core references for”: “MVC”

Add a “MVC 5 Layout Page (Razor)” called “_Layout” to the “Views” folder

Add a “Home” controller to the “Controllers” folder:

Choose: MVC 5 Controller – Empty

Add a “Index.cshtml” view to the /Views/Home folder:

Choose the “_Layout.cshtml” as “layout page”

Change html:

Add some TypeScript files and CSS files to the /Views/Home folder:

To allow static file content serving from the “/Views” folder adjust the Web.config inside the “/Views” folder, remove the “BlockViewHandler”:

Add the System.Web.Optimization NuGet package to your project:

Search for “Optimization” and choose: Microsoft.AspNet.Web.Optimization

This will install the following dependencies to your project:

After installing the package we will first upgrade some of the components, just change the filer to “Upgrade available”:

Upgrade all packages until all package are upgraded:

Add a NonOrderingBundleOrderer.cs class to the “/Common” folder.

This class will prevent automatic ordering of the files inside the bundle.

The files will be placed in the html in the order they are added to the bundle.

Add a BundleConfig.cs class to the “App_Start” folder

Change code like:

The “#if !DEBUG”, means:

In “debug” modus all files are rendered separately to the HTML in “release” modus all JavaScript files are combined to one JavaScript file and all CSS files are combined to one CSS file.

Change the global.asax

Add “BundleConfig.RegisterBundles(BundleTable.Bundles);”

Add a class “AssemblyExtensions.cs” to the “/Extensions” folder:

Edit code like:

Add a class “Bundle.cs” to the “/Common” folder:

Edit code like:

Change the “_Layout.cshtml” like:

The layout page contains the actual rendering of the CSS and JavaScript bundles.

When we run the application at this point we get 4 errors in the Browser console, because all JavasScript files and CSS files are fingerprinted with a version number and do not exist on disk:

To solve this error, we can add Url Rewriting to our Web.config file and start caching files:

To start caching files, add the following xml to the Web.config:

URL Rewrite extension

To start using Url Rewriting, first install the URL from http://www.iis.net/downloads/microsoft/url-rewrite or from the web platform installer inside IIS.

Note that URL Rewriting will work out of the box with IIS Express in Visual Studio 2015.

Then add the following to the Web.config:

All url’s that start with vx.x.x.x/ will be rewritten (the version number will be removed from the URL before passing it to the reset of ASP .NET. Only the part after the first “/” will be presented to the “match” rule.

So only the part “v1.0.0.0/View/Home/Test1.js” of the url http://localhost:4567/v1.0.0.0/View/Home/Test1.js will be passed to the match rule, that’s why the regex can start with a “^”.

Now when you run the application in debug modus you will see:

And when you run in “release mode” you will see:

As you can see the System.Web.Optimization framework automatically adds a “cache busting query parameter”, but in some browsers this is not enough, that’s why we added a version number inside the “folder” part of the url.

The final project structure should look like:

For more resources see: http://madskristensen.net/post/cache-busting-in-aspnet

NOTE

If you use “URLs” inside a CSS file, that is added to a bundle, e.g.

background-image: url(http://www.example.com/bck.png);

Then these URLs should also be fingerprinted.

To fingerprint these URLs you can write a custom BundleTransform:

http://blog.mirajavora.com/deep-dive-into-asp.net-bundling-and-minification/

Or use the https://bundletransformer.codeplex.com/.

This extension to the System.Web.Optimization framework, supports automatic transformation of relative paths to absolute paths in CSS-code (by using UrlRewritingCssPostProcessor).