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

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

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

背景：

vite+vue3項(xiàng)目發(fā)布后，瀏覽器上還是舊代碼，沒(méi)有及時(shí)更新到最新代碼。

解決：

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

 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這兩種命名方式時(shí)，瀏覽器緩存的行為確實(shí)是一個(gè)關(guān)鍵點(diǎn)。這兩種命名策略的主要區(qū)別在于哈希值的應(yīng)用范圍和計(jì)算方式，這直接影響到瀏覽器如何識(shí)別文件的更新和是否需要清除緩存來(lái)下載新文件。

[name]-[hash].js：

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

[name].[hash].js：

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

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

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

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

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

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

總結(jié)：

[name]-[hash].js和[name].[hash].js的主要區(qū)別在于哈希值的計(jì)算方式和范圍。
在大多數(shù)情況下，[name]-[hash].js能夠確保瀏覽器在文件內(nèi)容變化時(shí)下載最新文件，但有時(shí)可能需要清除緩存。
[name].[hash].js由于哈希值基于整個(gè)構(gòu)建內(nèi)容，通常不需要手動(dòng)清除瀏覽器緩存即可確保下載最新文件。

到此這篇關(guān)于vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案的文章就介紹到這了,更多相關(guān)vite vue3下載最新代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: