I've been using CloudFlare for quite some time now, on this blog and on many of my other websites. It's a great service that offers lots of value even in it's free tier. Most useful, for me, is it's built-in CDN (Content Delivery Network) functionality. This means basically the following:

This blog here is hosted on an Azure server somewhere in Europe. That's great for people living near, but bad for all the visitors outside of Europe. Or even just a few hundred kilometers away from my server. It's bad in the sense that web requests take a lot of time when the physical locations of client and server are continents apart. Even worse, when the first request to my main page is finished, a second round of requests retrieves images, CSS and JavaScript files. That's where CloudFlare comes into play: They'll cache all my assets on their servers, of which they have many around the world. So they're kind of a proxy between this blog and it's visitors and they optimize delivery by caching my content, meaning typical page loads from North America, for example, no longer take 8 seconds to complete. Most web requests don't even hit my server, at all.

I'm using the free tier on this site, which works well enough but has some limitations. For example, they're only caching a handful of file extensions, so .js and .css files are cached but, .axd are not. Since I'm using Umbraco on this blog, the built-in ClientDependency package makes sure that all my JavaScript and CSS files are bundled and minified in production builds. The package internally works by routing the requests through a custom handler via a route similar to /DependencyHandler.axd?s=h4sh&t=JavaScript. Bundling and minification is great and what we want, but we also want CloudFlare to cache the requests. We'll have to get Umbraco to serve it via urls with the correct file extensions then!

First, you need to create a custom renderer that outputs the desired file endings in your website links to the bundles:

This new renderer should be registered in your ClientDependency.config file. Simply replace the old one:

Now, for the magic to work, we're using a rewrite rule in IIS' web.config file to map requests that come to either DependencyHandler.js or DependencyHandler.css internally to the route DependencyHandler.axd:

Happy caching!

Update, one week after the original post: With this approach, I managed to increase the cached bandwith via CloudFlare from about 20% to over 60%! Most of the uncached content now is the dynamic content generated by the GAEB converter. Virtually everything else doesn't cost me any more bandwith!