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
をつけておくと、対象のファイルのハッシュを比較して、変更があった場合にだけダウンロードするようになります。
ハッシュ計算の処理が発生するが大きな負荷にはならないだろうし、「変更があったときだけ」ダウンロードするというのが効率的だし、変更がすぐに反映される。