フロントエンドがパッケージ化されてリリースされた後にブラウザーのキャッシュをクリアする方法について詳しく説明しましょう。実際、必要なのは単純な Webpack 設定だけです

序文

このようなシナリオはありますか? プロジェクトがオンラインになった後、顧客が使用中にバグを発見し、急いでそれを修正してリリースします。でも公開した後は

テスターや顧客は「変更しても無駄だ」と言うでしょう。

あなた：「キャッシュをクリアしてみてください」

クライアント："？？？？"

そこでこの記事ではブラウザのキャッシュとブラウザのキャッシュをクリアする方法を紹介します。もうキャッシュについて心配する必要はありません。！

ブラウザキャッシュ

ご存知のとおり、Web ページを初めて開くときと、後で開くときの速度は異なります。フロントエンドがルートの遅延読み込みを行わない場合、大量のリソースが読み込まれることになります。ただし、その後の読み込みは非常に高速になります。これはブラウザーキャッシュの利点です。

キャッシングのメリット

Web ページの読み込み速度を向上させ、応答時間を短縮します。
サーバーの負荷を軽減する
帯域幅の消費を削減する

強力なキャッシュとネゴシエートされたキャッシュ

強力なキャッシュ (ローカルキャッシュ)

リクエストはサーバーに送信されず、リソースはキャッシュから直接読み取られます。強力なキャッシュは、Expires と Cache-Control の 2 つの HTTP ヘッダーを設定することで実現できます。

Expires キャッシュの有効期限は、リソースの有効期限を指定するために使用され、サーバー側の特定の時点です。HTTP
/1 の製品であり、現地時間に限定されます。現地時間が変更されると、キャッシュが無効になる可能性があります。。
Cache-Control HTTP/1.1 製品では、例えば Cache-Control:max-age=300 と設定した場合、単位は s となり、5 分以内に再度リクエストするとキャッシュが強化されることを意味します。

キャッシュをネゴシエートする

リソースに対するブラウザのリクエストが強力なキャッシュにヒットしない場合、ブラウザはサーバーにリクエストを送信して、ネゴシエートされたキャッシュがヒットしたかどうかを確認します。ネゴシエートされたキャッシュがヒットした場合、リクエスト応答で返される HTTP ステータスは 304 (未変更) です。、リクエストにエンティティデータが含まれていない場合、ヒットしない場合は 200 を返し、リソースエンティティデータを渡します。ネゴシエーションキャッシュは、ヘッダーの Last-Modified、If-Modified-Since、および ETag、If-None-Match のペアを使用して管理されます。

ブラウザのキャッシュをクリアする方法: Webpack パッケージの出力ファイル名を構成する

まずはパッケージの違い比較表を見てみましょう

初回パッケージ化: 未構成

ここに画像の説明を挿入します

2 番目のパッケージング: 未構成

ここに画像の説明を挿入します

最初のパッケージ化: 構成後

ここに画像の説明を挿入します

2 番目のパッケージ化: 構成後

ここに画像の説明を挿入します

メインの設定コードを添付します


const {
    
     defineConfig } = require('@vue/cli-service')
const timestamp = new Date().getTime()
module.exports = defineConfig({
    
    
  configureWebpack: {
    
    
    output: {
    
    
      // 修改输出js目录名及文件名
      filename: `js/[name]-test-${
      
      timestamp}.js`,
      chunkFilename: `js/[name]-test-${
      
      timestamp}.js`,
    },
  },
})

要約する

設定されていない Webpack の出力ファイル名はパッケージ化するたびに同じであることがわかります。そのため、ブラウザのキャッシュは以前の js ファイルであると判断し、キャッシュから直接取得します。プロジェクト内のパッケージ出力ファイル名は、まだ同じです。これは非常に必要です。リリース後にキャッシュの問題を解決する最も効果的な方法です。構成原理がわかれば、Vite 構成原理も同じです。構成を確認してください。自分で。