静的アセット(static asset)とは? サイトが配信するファイル

静的アセットとは、リクエストごとの処理なしに、保存されたとおりに正確にブラウザへ配信されるファイルです。画像、フォント、JavaScript、CSSなどが含まれます。

webコンテンツは2種類に分かれます。リクエストごとに生成される動的レスポンスと、固定ファイルとして配信される静的アセットです。フロントエンドが出荷するもののほとんどは静的です。コンパイル済みのJSとCSS、画像、フォント、アイコンです。静的アセットは単なるファイルなので非常によくcacheされ、そのためにそれらを準備しfingerprintを付けるのがbuildです。

何が静的アセットに該当するか

コンパイル済みのJavaScriptとCSSのbundle。
画像、SVG、アイコン。
フォントとフォントのサブセット。
HTMLシェルとweb manifest。

なぜ静的アセットはcacheに適しているのか

静的アセットはリクエスト間で変化しないため、CDNやブラウザで積極的にcacheできます。content hashingを使えば、実質的に永久にcacheでき、これが高速な再訪問読み込みの基盤となります。

build時の処理

そのまま配信されるとはいえ、静的アセットは先に処理されることがよくあります。画像は圧縮され、フォントはサブセット化され、JSとCSSはミニファイされhashが付きます。処理はbuildで行われるため、配信されるファイルはすでに最適化されています。

静的と動的

静的アセットはすべての人に同じですが、動的レスポンスはリクエストごとやユーザーごとに生成されます。静的に配信できる部分が多いほど、サイトは安く速くなります。だからこそ静的生成が人気なのです。

CI/CDにおける静的アセット

buildは最適化されhashの付いた静的アセットを生成し、deployはそれらを適切なcache headerとともにCDNや静的ホストへアップロードします。出力フォルダ全体がartifactであり、pipelineは本質的に、ソースをdeploy可能な静的ファイルへ変換するための機械です。

重要なポイント

静的アセットは、リクエストごとの処理なしに固定ファイルとして配信されます。
静的アセットは、特にcontent-hashが付いている場合、積極的にcacheされます。
CIはそれらを最適化してhashを付け、そのフォルダをCDNへdeployします。