vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案

更新時間：2024年06月14日 11:00:42 作者：Cola-blog

vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧

背景：

vite+vue3項目發(fā)布后，瀏覽器上還是舊代碼，沒有及時更新到最新代碼。

解決：

vite采用的rollup打包。rollup打包默認輸出文件格式[name]-[hash].js,將輸出格式改為[name].[hash].js解決了上述問題。

 build: {
      rollupOptions: {
        output: {
          entryFileNames: `assets/[name].[hash].js`,
          chunkFileNames: `assets/[name].[hash].js`,
          assetFileNames: `assets/[name].[hash].[ext]`,
        }
      },
    },

原因：

[name]-[hash].js與[name].[hash].js有什么區(qū)別

討論[name]-[hash].js和[name].[hash].js這兩種命名方式時，瀏覽器緩存的行為確實是一個關(guān)鍵點。這兩種命名策略的主要區(qū)別在于哈希值的應(yīng)用范圍和計算方式，這直接影響到瀏覽器如何識別文件的更新和是否需要清除緩存來下載新文件。

[name]-[hash].js：

在這種命名方式中，-連接符用于將文件名（[name]）和哈希值（[hash]）分開。這里的[hash]通常是對整個文件內(nèi)容的哈希。當(dāng)文件內(nèi)容發(fā)生任何變化時，哈希值都會變化，從而生成一個新的文件名。
緩存行為：如果文件名（包括哈希值）發(fā)生了變化，瀏覽器通常會認為這是一個全新的文件，因此會忽略緩存并重新下載。然而，如果構(gòu)建過程中存在某些問題，導(dǎo)致文件內(nèi)容更新但哈希值沒有變化，那么瀏覽器可能會繼續(xù)使用緩存中的舊文件，因為它認為文件名（和哈希值）沒有變化。

[name].[hash].js：

在這種命名方式中，.點連接符用于將文件名和哈希值分開。這里的[hash]可能是基于整個構(gòu)建內(nèi)容的哈希，而不僅僅是單個文件的內(nèi)容。這意味著即使單個文件沒有變化，但如果構(gòu)建過程中其他文件有變動，該文件的哈希值也可能發(fā)生變化。
緩存行為：由于哈希值是基于整個構(gòu)建內(nèi)容的，即使單個文件沒有變化，它的文件名（和哈希值）也可能因為其他文件的變動而發(fā)生變化。這通常意味著瀏覽器會忽略緩存并重新下載該文件，即使它的內(nèi)容實際上沒有變化。

為什么[name]-[hash].js有時需要清除瀏覽器緩存？

盡管[name]-[hash].js命名方式旨在通過哈希值來確保瀏覽器識別文件的更新，但在某些情況下，你可能仍然需要清除瀏覽器緩存：

緩存控制指令：如果服務(wù)器返回的HTTP響應(yīng)頭中設(shè)置了緩存控制指令（如Cache-Control或Expires），這些指令可能會告訴瀏覽器緩存文件更長的時間，即使文件名（和哈希值）發(fā)生了變化。
服務(wù)器或CDN緩存：如果你的應(yīng)用部署在具有緩存層的服務(wù)器或CDN后面，這些緩存層可能會緩存舊的文件版本，即使文件名已經(jīng)變化。
瀏覽器行為：某些瀏覽器或插件可能有自己的緩存機制，這些機制可能不總是按預(yù)期工作。

為什么[name].[hash].js通常不需要清除瀏覽器緩存？

由于[name].[hash].js中的哈希值是基于整個構(gòu)建內(nèi)容的，即使單個文件的內(nèi)容沒有變化，但其他文件的變動也可能導(dǎo)致哈希值變化，進而改變文件名。這通常意味著瀏覽器會忽略緩存并重新下載該文件，因此不需要手動清除瀏覽器緩存。