Implementation of the most efficient cache busting technique in ASP.NET

In this article we will learn about the cache busting and its implementation techniques. In this article we are also going to implement one of the most efficient cache busting technique in asp.net.

What is cache busting?

Cache busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn’t retrieve the old file from cache but rather makes a request to the origin server for the new file.

Cache busting techniques:

There are mainly three caching busting technique which can be used:
1)File name versioning (e.g. style.v2.css)
2)File path versioning (e.g. /v2/style.css)
3)Query strings (e.g. style.css?v=2)

Implementation of "File path versioning" technique for cache busting:

For implementation of this technique on static resources like your javascript or CSS(Cascading Style Sheet) files, you need to simply follow the following four steps.

Step1:

First of all we need to cache all the static files which can be easily done in(ASP.NET on IIS7+) by using the following lines of code in the web.config’s <system.webServer> element:

<staticcontent>
  <clientcache cachecontrolmode="UseMaxAge" cachecontrolmaxage="365.00:00:00" />
</staticcontent>

      

Step2:

we need to create a class "CacheBuster" with the method "GetVersionedPath" as shown in the following chunk of code. what actually the purpose of following method "GetVersionedPath" is to check the last updated date of the file and create a version accordingly and it will only update the version if the file updated otherwise it will return the previous one.

using System;

using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Hosting;

public class CacheBuster
{
  public static string GetVersionedPath(string rootRelativePath)
  {
    if (HttpRuntime.Cache[rootRelativePath] == null)
    {
      string absolute = HostingEnvironment.MapPath("~" + rootRelativePath);

      DateTime date = File.GetLastWriteTime(absolute);
      int index = rootRelativePath.LastIndexOf('/');

      string result = rootRelativePath.Insert(index, "/v-" + date.Ticks);
      HttpRuntime.Cache.Insert(rootRelativePath, result, new CacheDependency(absolute));
    }

      return HttpRuntime.Cache[rootRelativePath] as string;
  }
}

      

Step3

For calling the method in MVC Razor syntax for css file you can use the following code(similarly you can call the method for javascript files as well)

<link rel="stylesheet" href="@CacheBuster.GetVersionedPath("/content/Custom.css")" />

      

For calling the method in WebForms syntax for css file will be like following code(similarly you can call the method for javascript files as well)

<link rel="stylesheet" href="<%=CacheBuster.GetVersionedPath("/content/Custom.css") %>" />

      

Result of the above method calling will be like the following one in the actually rendered markup. This versioned folder will act like a virtual folder.

<link rel="stylesheet" href="/content/v-636709631782782461/Custom.css" />

Step4:

Now the final step is to map the virtual versioned folder to the actual physical folder where the file actually exists, for the purpose we will use the url rewrite module of IIS(IIS 7+) by adding the following snippet of XML to the web.config’s <system.webServer> section

<rewrite>
  <rules>
    <rule name="CacheBuster">
      <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
      <action type="Rewrite" url="{R:1}/{R:3}" />
    </rule>
  </rules>
</rewrite>

      

That's it , hope this article will help you big time !!!