私たちのプロジェクトでは、頻繁な展開プロセスに従います。すべての展開で、クライアントはブラウザのキャッシュのために変更を反映するためにブラウザを更新する必要があります。どのようにこの状況を避けることができるかを知りたいと思います。展開するときは、リフレッシュの必要がないすべてのユーザーのブラウザに直接反映する必要があります。この問題を解決するために私を助けてください。すべてのビルドでブラウザのリフレッシュの状況を避ける必要があります
技術的にあなたはそこに直接アクセスできないため、ブラウザキャッシュをリフレッシュできません。できることはキャッシュ無効化です。サーバーにデプロイするたびに、jsとcssのファイル名を変更します。中
例えばapp_v1.jsのapp_v2.js ...
と
app_v1.cssのapp_v2.css ...
ブラウザをデプロイするたびにこの方法で新しいjsおよびcssファイルを取得する必要があります。詳細については、
は
このリンクをチェックするホットモジュールの交換と呼ばれるソリューションがあります。これにより、Webpackバンドルがシームレスに置き換えられます（既に使用している場合）。
一部の参考文献については、What exactly is Hot Module Replacement in Webpack?を参照してください。 HMRの設定は非常に複雑で、フレームワークごとに異なります。
webpack-dev-serverもwebpackに依存しますが、はるかに簡単です。自動的に更新ボタンがプッシュされます。
レスポンスヘッダーのキャッシュディレクティブを更新して、ブラウザのキャッシュに許容されるキャッシュ期間を短縮または削除することを検討してください。
あなたのウェブサイトが現在使用しているものを確認するには、「検査」オプションを有効にして「ネットワーク」タブを選択してChromeでページを表示します。ダウンロードしたファイルを選択すると、「レスポンスヘッダー」の情報が表示されます。
例として、このSOページでは、「max-age」の値が604800（秒、7日）のados.jsというスクリプトファイルをダウンロードします。これは、Webサーバーからそのファイルの新しいバージョンが利用可能かどうかを確認する前に、ブラウザが待機するまでの時間です。ファイルがほとんど変更されない場合、7日間は許容される可能性があります。
しかし、7日の最大エージングは、ブラウザキャッシュされたファイルが頻繁に変更される動的な状況のための期間の長すぎる可能性があります。
詳細については、このMDNページのHTTP cachingを参照してください。
キャッシュ制御ディレクティブの変更は、Webサーバーによって異なります。 ASP.NETの場合、web.configファイルで実行できます。
考慮すべき1つのオプションは、リリースの2段階アプローチです。
フェーズ1：保留中のリリースによって更新される予定のキャッシュ可能ファイルのリリース前に、キャッシュ制御ディレクティブをキャッシュなしに変更します。
次に、更新されたファイルの現在の最大有効期間の値が現在設定されている最長時間を待ちます。これにより、現在のウェブサイトのブラウザは「キャッシュなし」指示を受け取ることができます。その後、現在のWebサイトのすべてのブラウザは、ファイルの更新がリリースされた直後に更新プログラムを取得する準備が整いました。
フェーズ2：目的のmax-ageキャッシュ制御命令を使用して、ファイルの更新をWebサイトにリリースします。これらの更新は、フェーズ1で行われた処理のため直ちに取得する必要があります。
もう1つの方法は、現在の最大有効期間の値を5分などの小さな値に短くすることです。このオプションは簡単ですが、リリース後5分間で問題が発生する可能性があります。しかし、時間間隔が短いと、キャッシュされたブラウザファイルに対する更新の可能性および/または影響が減少します。
キャッシュをフロントエンドから無効にすることで、キャッシュを防止できます。
v={{number-of-version}}を追加することができます。ロードされたバージョンが必要なものであることを常に確認してください。
gulpプラグインは、ビルド段階でファイルのバージョンを管理するため、手動で行う必要はありません。それは便利で、簡単にビルドプロセスに組み込むことができます。ここにリンクがありますgulp-annotate
幅が広いです。これはすばらしいと思いますが、実際にオーバーヘッドが過度に増加します。突然ユーザーに変わることも良い考えではありません。開発や生産に使用していますか？コードを変更しているのか、パラメータ/テキストだけを変更していますか？ –
現在、開発用にのみ使用しています。時にはコードを変更することもあります。 –