ASP.NET Coreで静的ファイルのブラウザキャッシュを有効にする

静的ファイルのブラウザキャッシュには2種類ある。

• UseStaticFilesミドルウェアでオプションで指定する。
• 静的ファイルを読み込むタグ（img、script）にasp-append-version=trueをつける

UseStaticFilesミドルウェアで行う場合

以下のようにするとレスポンスヘッダにCache-Controlがつくようになる。 max-age秒キャッシュを保持する。

            app.UseStaticFiles(new StaticFileOptions
            {
                OnPrepareResponse = ctx => ctx.Context.Response.Headers.Add("Cache-Control", "public, max-age=3600")
            });

Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 GET http://localhost:44382/css/site.css  
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 GET http://localhost:44382/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0  
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 GET http://localhost:44382/lib/bootstrap/js/bootstrap.js  

max-age秒間はキャッシュを使うので、画像やライブラリに変更があっても直ちには反映されない。

asp-append-version=trueを使う場合

画像やCSS、Javascriptを読み込むタグにasp-append-version=trueをつけておくと、対象のファイルのハッシュを比較して、変更があった場合にだけダウンロードするようになります。

ハッシュ計算の処理が発生するが大きな負荷にはならないだろうし、「変更があったときだけ」ダウンロードするというのが効率的だし、変更がすぐに反映される。

参考

blog.shibayan.jp

qiita.com