Cache Buster を esbuild パイプラインに追加する
素晴らしい JS アプリケーションがあり、ユーザーはそれを気に入っています。ただし、新しいコードをデプロイするたびに、ユーザーから同じサポート メッセージが表示されます。
「見たことがありませんか?」
「まだ動作しません。」
「何をしているか知っていますか?」
「解決したとは思えません。」
もちろん、画面は次の開発者で埋め尽くされます。世界中で彼らのことをハーピーで叫んでいる スクリーンには同じ文章が表示されていた：
「でも、私の画面ではとてもきれいに見えます！」
これはすべて、Web サイトの以前のリソース (特に CSS および JS ファイル) がユーザーのブラウザーにキャッシュされているために発生します。キャッシュの有効期限が切れる前にすべてのユーザーにラップトップを発送することはできないため、ユーザーがコードの更新バージョンをできるだけ早く入手できるようにする方法が必要です。入力キャッシュのクリア。
キャッシュクリアとは何ですか?
Web が若く、今日のほとんどの人が利用できる消火栓として帯域幅がなかった頃、ブラウザー会社は Web パフォーマンスを向上させる方法に非常に興味を持っていました。現在問題になっていないというわけではありませんが、現代のインターネットでは 250kb ファイルと 125kb ファイルのロード時間の差は非常に小さいのに対し、2002 年の Dial-Up™ ではこれはかなり大きな問題でした。ロジックとしては、一部のアセットはページの読み込み中に静的なままとなるため、ブラウザーがアセットのコピーをローカルに保持している場合、ハード ドライブからアセットを読み込む方が、インターネット経由でリクエストして送信するよりも高速です。
これにより、サーバーに届く受信リクエストを個別に処理する必要が少なくなるため、サーバーのパフォーマンスも向上します。利点は、最初のページが読み込まれた後にページを迅速に再読み込みするブラウザの機能が大幅に向上することです。
もちろん、欠点は、キャッシュされたバージョンの有効期限が切れる前に HTML、CSS、JS などのリソースが変更された場合、ユーザーには新しいコードが表示されず、エクスペリエンスが理想的ではなくなることです。
キャッシュ無効化は、各ファイル名リクエストに必ず一意の識別子を追加し、毎回ブラウザにファイルの新しいコピーを強制的にロードさせることで、この問題を解決します。
以前のコンテンツ https://somesite.com/js/app.js は、 https://somesite.com/js/app.1693597811135.js または https://somesite.com/js/app.js のようなコンテンツになります。 ?バージョン=1693597811135。どちらの場合も、ファイル名または URI に値を追加すると、ローカルに保存されているものと一致しないため、ブラウザーはファイルの新しいコピーを取得する必要があります。
どちらの方法も有効ですが、ファイルのファイル名を変更する最初の例を使用します。これは、一部のサイト速度ツールや CDN がキャッシュ無効化にクエリ文字列の使用を推奨していないためです。
esbuild でこれを行う
Create React App (CRA) の廃止後、多くの開発者は esbuild ベースのツールを使用し始めました。CRA は Webpack に基づいており、キャッシュ無効化は簡単に処理できます。Vite のようなツールの出現により、業界の多くの人がバンドラー/ビルド ツールの選択肢として esbuild に目を向けるようになっています。
はい、これが唯一の優れたバンドラーではないことはわかっていますが、優れたバンドラーです。esbuild と esbuild <選択したバンドラー/ビルド ツールを挿入> の相対的な利点は、別の記事で紹介できます。
実行する必要がある手順の大まかな概要は次のとおりです。
- 「テンプレート」バージョンのindex.htmlを作成します。
- ビルド中に Unix ミリ秒タイムスタンプを生成する
- この値をindex.htmlに置き換えます。
- Index.html を書き換えます
- エスビルドでビルドする
- 利益
テンプレート
Index.html の作成 これを実現するには、論理的にアクセスできる場所にファイルのコピーを作成する必要があります。プロジェクトのトップ ディレクトリに、パブリック フォルダーへのビルドを対象としたビルド スクリプトがあるため、プロジェクトにテンプレート フォルダーを追加しました。
そのディレクトリに、既存のディレクトリindex.htmlをコピーし、template.htmlという名前を付けました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/index.css" /