タイトル通り。CSSとか更新した際に、普通はクライアントでF5しないと読み込み直さない。それを無理矢理やらせるのに、「site.css」みたいなのに「site.css?20160508113250」みたいなクエリ文字列をつけると別ファイルと認識して読み込み直させるというやつがある。↓の感じ。

<link href="/Content/site.css" rel="stylesheet"/>
↑を↓にする
<link href="/Content/site.css?20160508113250" rel="stylesheet"/>

.netMVCだと、CSSとかJavaScriptとかはcshtml側で、「@Styles.Render("~/Content/css")」みたいに書くけど、これの結果を↑の日付のクエリ文字列をつけた形に自動で変えたい。日付はファイルの更新日で。

で、これをやるのに、何がいいかなーで探したら一番よさそうなのは下の感じ。

修正するのは「BundleConfig」。こいつを下の感じに変える。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        //とりあえず追加したいBundle作る
        var addBundle = new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/site.css");
        //ここで↓の変換クラスをセットする
        addBundle.Transforms.Add(new FileHashVersionBundleTransform());
        //Bundleの追加
        bundles.Add(addBundle);
    }
}

//IBundleTransformでクエリ文字列を付加するように定義
//キャッシュされてるCSSをクエリストリングでファイルの更新日を付けて認識を変える
public class FileHashVersionBundleTransform : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse response)
    {
        foreach (var file in response.Files)
        {
            string version = System.IO.File.GetLastWriteTime(System.Web.Hosting.HostingEnvironment.MapPath(file.IncludedVirtualPath)).ToString("yyyyMMddHHmmssfff");
            file.IncludedVirtualPath = string.Concat(file.IncludedVirtualPath, "?v=", version);
        }
    }
}

結果は↓の感じ。

<link href="/Content/site.css?v=20160508113250" rel="stylesheet"/>

参考にしたのはココ。っていうかまんまですが。

上のサイト見てて思ったけど、このクエリ文字列って「キャッシュバスティング(cache-busting)」って言うのかしら。

2017/8/6追記：Ver2