如何向ASP.NET MVC站点中的所有图像添加缓存破坏者

Question

I am trying to improve the performance of a large ASP.NET MVC website and I am currently looking for a way of adding a cache busting query string to image requests in such a way that I don't have to go through all the views and CSS and change each image reference.

Desired result

To verify if the cache buster is being added I am using the Firebug extension in Firefox and what I am looking to see is something like this (screenshot taken from another website)

What I've tried

The simplest answer seemed to me to create a custom HttpModule that intercepted any image request and then appended the cache busting query string to the request URL. So I wrote the following class

public class CacheBusterImageHandler : IHttpModule
{
    public void Init(HttpApplication context)
    {
        context.BeginRequest += this.BeginRequest;
    }

    public void Dispose()
    {            
    }

    public void BeginRequest(object sender, EventArgs e)
    {
        // This conditional check will need to be modified to capture other image types
        // but for testing purposes it is good enough
        if (HttpContext.Current.Request.Path.EndsWith(".gif", StringComparison.OrdinalIgnoreCase))
        {
            // The version number will be generated but again for testing purposes this
            // is good enough
            var pathWithCacheBuster = string.Format("{0}?v1.0.0.0", HttpContext.Current.Request.Path);

            HttpContext.Current.RewritePath(pathWithCacheBuster);
        }
    }
}

I then registered the module in web.config like this

<system.webServer>
  <modules runAllManagedModulesForAllRequests="true">
    <add name="CacheBusterImageHandler" type="MyAssembly.CacheBusterImageHandler" preCondition="managedHandler" />
    ...

I then verified that the requests were getting processed by the module by using breakpoints, however when I checked in Firebug the image requests did not have the cache buster appended to URL. I then decided to read the documentation for the RewritePath method and found that of course it simply redirects the request but does not alter the requested URL.

Questions

Is there a way in an HttpModule to append the cache buster to the query string?

If not, is there some other way I can achieve the same result without having to modify every reference to an image?

Answer 1

"Is there a way in an HttpModule to append the cache buster to the query string?"

No. That is far to late in the process. The URL has to be changed when you put it in the page, that's what the browser uses to check if the image is in the cache or not.

"If not, is there some other way I can achieve the same result without having to modify every reference to an image?"

That depends on how you put the image URLs in the page, but there is no way of changingt he URLs that works for all way to put an URL in the page.

You can make a method that calculates the version number/string to include, and add that to all URLs. That way you only have to make the change once, not every time an image changes.

The method could use the version number or compile time of the assembly if you want to invalidate the cache every time that you deploy the page, or the update time of the image file.

Basically:

<img src="/images/logo.png<%= ImageVersion("/images/logo.png") %>" alt="Logo">

Using something like:

public static string ImageVersion(string name) {
  FileInfo info = new FileInfo(HttpContect.Current.MapPath(name));
  int time = (int)((info.LastWriteTimeUtc - new DateTime(2000,1,1)).TotalMinutes);
  return "?v=" + time.ToString();
}