瀏覽器緩存是一種強(qiáng)大的優(yōu)化技術(shù)，用于增強(qiáng) Web App 的性能。它涉及用戶設(shè)備上靜態(tài)資源（比如圖像、樣式表和腳本）的本地存儲(chǔ)。通過(guò)在本地存儲(chǔ)這些資源，瀏覽器可以在后續(xù)訪問(wèn)時(shí)快速檢索它們，顯著減少加載時(shí)間并改善整體 UX（用戶體驗(yàn)）。

雖然但是，這種優(yōu)化策略面臨一個(gè)挑戰(zhàn)：用戶可能會(huì)遭遇過(guò)時(shí)的內(nèi)容。當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)，瀏覽器會(huì)緩存靜態(tài)資源的副本。下次用戶訪問(wèn)該站點(diǎn)時(shí)，瀏覽器在從服務(wù)器獲取這些資源之前，會(huì)檢查其緩存中是否有這些資源。雖然此過(guò)程大大地加速了頁(yè)面加載，但如果服務(wù)器進(jìn)行了更新，那么可能會(huì)導(dǎo)致用戶看到的是過(guò)時(shí)的內(nèi)容。

緩存清除的作用

緩存清除成為克服瀏覽器緩存中過(guò)時(shí)內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù)。術(shù)語(yǔ)“緩存清除（cache-busting）”是指故意使靜態(tài)資源失效或進(jìn)行版本控制，迫使瀏覽器在發(fā)生更改時(shí)獲取新資源。

緩存清除的目的

• 確保最新版本：緩存清除可確保用戶始終收到最新版本的 App。如果沒(méi)有緩存清除，用戶可能會(huì)遇到瀏覽器繼續(xù)提供過(guò)時(shí)資源的問(wèn)題，阻礙新功能、錯(cuò)誤修復(fù)或設(shè)計(jì)更新的交付。
• 優(yōu)化 UX：通過(guò)保證用戶訪問(wèn)最新版本的 Web App，緩存清除優(yōu)化了整體 UX。用戶受益于改進(jìn)的性能并與開(kāi)發(fā)者所做的最新更改保持一致。

緩存清除的機(jī)制

緩存清除涉及在發(fā)生更新時(shí)更改靜態(tài)資源的文件名或 URL。常見(jiàn)策略包括：

• 文件版本控制：在文件名中附加唯一的版本標(biāo)識(shí)符（比如 styles.css?v=123）可確保瀏覽器將每個(gè)版本視為不同的資源，提示其獲取更新的文件。
• 內(nèi)容哈希：根據(jù)文件內(nèi)容生成哈希，并將其合并到文件名中（比如 styles.abcd123.css），這提供了一種識(shí)別更改的可靠方法。即使對(duì)文件進(jìn)行微小的更改也會(huì)產(chǎn)生新的哈希值，并隨后產(chǎn)生新的文件名。

1. 將 meta.json 添加到 Public 文件夾中

在 public 文件夾中創(chuàng)建 meta.json 文件來(lái)存儲(chǔ)版本信息，方便客戶端代碼的運(yùn)行時(shí)可訪問(wèn)性。

meta.json 文件的引入對(duì)于在 Vue App 中動(dòng)態(tài)管理版本信息至關(guān)重要。此 JSON 文件包含有關(guān)當(dāng)前版本和以前版本的重要詳細(xì)信息，允許在運(yùn)行時(shí)進(jìn)行有效的版本比較。

meta.json 的內(nèi)容如下所示：

{
  "version": "1.1.2",
  "oldVersion": "1.1.1"
}

public 文件夾是一大坨 Web 開(kāi)發(fā)設(shè)置中的慣例。將 meta.json 文件放在 public 文件夾中可確?？蛻舳舜a在運(yùn)行時(shí)可以訪問(wèn)該文件。

至關(guān)重要的是，在運(yùn)行時(shí)將 package.json 中指定的版本與 meta.json 版本進(jìn)行比較。此比較可確保當(dāng)前版本與預(yù)期部署版本保持一致。如果檢測(cè)到差異，它會(huì)觸發(fā)操作，比如強(qiáng)制刷新，保證用戶無(wú)縫體驗(yàn)最新的更新和改進(jìn)。

2. 設(shè)置 generate-build-version.js 腳本

緩存清除過(guò)程的核心在于自動(dòng)生成新構(gòu)建版本、更新 package.json 文件并創(chuàng)建 meta.json 文件的腳本。讓我們剖析一下此腳本的關(guān)鍵組件：

// generate-build-version.js

// 導(dǎo)入需要的模塊，也可以按需使用 ESM
const fs = require('fs')
const path = require('path')
const semver = require('semver')

// 從 package.json 讀取當(dāng)前版本
const packageJson = require('./package.json')
const appVersion = packageJson.version

// 基于語(yǔ)義化版本規(guī)則增量更新版本的函數(shù)
const incrementVersion = version => {
  const versionArray = version.split('.')
  const [major, minor, patch] = versionArray

  // 檢查補(bǔ)丁版本是否為 9，然后增量更新次版本號(hào)
  if (parseInt(patch) === 9) {
    const newMinor = parseInt(minor) + 1
    return `${major}.${newMinor}.0`
  }

  // 增量更新次版本號(hào)
  const newPatch = parseInt(patch) + 1
  return `${major}.${minor}.${newPatch}`
}

// 訴諸 incrementVersion 函數(shù)計(jì)算新版本號(hào)
const newVersion = incrementVersion(appVersion)

// 基于新版本號(hào)更新 package.json
packageJson.version = newVersion
fs.writeFileSync(
  './package.json',
  JSON.stringify(packageJson, null, 2),
  'utf-8'
)

// 基于新版本號(hào)創(chuàng)建 meta.json
const metaJson = { version: newVersion, oldVersion: appVersion }
fs.writeFileSync(
  './public/meta.json',
  JSON.stringify(metaJson, null, 2),
  'utf8'
)

// 打印日志，表明版本更新完畢
console.log('Version has been updated in package.json and meta.json')

該腳本自動(dòng)執(zhí)行版本控制過(guò)程，確保每次構(gòu)建都會(huì)妥當(dāng)增量更新版本并更新相關(guān)文件。反而言之，這有助于在 App 生命周期的后續(xù)階段有效清除緩存。

3. 創(chuàng)建 HandleCache.vue 組件

HandleCache 組件通過(guò)管理加載狀態(tài)、檢查最新版本和處理緩存清除，在緩存清除中發(fā)揮著至關(guān)重要的作用。讓我們深入研究其功能：

該組件封裝了檢查最新版本、更新加載狀態(tài)，以及暴露 clearCacheAndReload 函數(shù)，供外部邏輯使用。

4. 在 App.vue 中集成 HandleCache 組件

將 HandleCache 組件集成到 App.vue 主文件中極其簡(jiǎn)單。該組件充當(dāng)中間件，確保在渲染主 App 之前加載最新版本：

此處的 cacheBuster 用作對(duì) HandleCache 組件的引用，允許您訪問(wèn)其功能并響應(yīng)其加載狀態(tài)。

5. 設(shè)置命令腳本和內(nèi)置的 package.json

要簡(jiǎn)化開(kāi)發(fā)和部署過(guò)程，務(wù)必使用必要的腳本更新您的 package.json：

"scripts": {
  ...
  "generate-build-version": "node generate-build-version",
  "build": "pnpm generate-build-version && vite build",
}

這些腳本自動(dòng)生成構(gòu)建版本并觸發(fā)構(gòu)建過(guò)程，確保緩存清除無(wú)縫集成到您的開(kāi)發(fā)工作流程中。

完結(jié)撒花

Vue 3 緩存清除成為提供無(wú)縫且最新 UX 的關(guān)鍵技術(shù)。雖然但是，值得注意的是，緩存清除的必要性可能因不同的 SPA 而異。雖然事實(shí)證明它對(duì)于頻繁更新和動(dòng)態(tài)內(nèi)容的 App 必不可少，但并非所有 SPA 都需要這種級(jí)別的優(yōu)化。

緩存清除的注意事項(xiàng)：

• 更新頻率：如果您的 App 經(jīng)常更新，緩存清除可確保用戶始終訪問(wèn)最新的功能和改進(jìn)。
• 動(dòng)態(tài)內(nèi)容：具有動(dòng)態(tài)變化內(nèi)容的 SPA 可以從緩存清除中受益匪淺，防止用戶遭遇過(guò)時(shí)的信息。

受益于緩存清除的 SPA 示例：

• 實(shí)時(shí)儀表板：顯示實(shí)時(shí)數(shù)據(jù)的 App（比如財(cái)務(wù)儀表板或?qū)崟r(shí)分析）受益于緩存清除，可保持?jǐn)?shù)據(jù)準(zhǔn)確性。
• 新聞門(mén)戶：提供新聞和文章的 SPA 需要及時(shí)更新，因此緩存清除對(duì)于確保用戶收到最新信息至關(guān)重要。
• 電子商務(wù)平臺(tái)：緩存清除可以最好地支持電子商務(wù) SPA 中的動(dòng)態(tài)產(chǎn)品列表、定價(jià)更新和促銷(xiāo)變化。

當(dāng)不需要緩存清除時(shí)：

• 靜態(tài)內(nèi)容：如果您的 SPA 主要提供很少更改的靜態(tài)內(nèi)容，那么緩存清除的好處可能很小。
• 低更新頻率：更新不頻繁且更改最少的 SPA 可能不會(huì)因緩存清除而顯著優(yōu)化 UX。

在實(shí)現(xiàn)緩存清除時(shí)，請(qǐng)考慮 SPA 的獨(dú)特特征，以確定額外的復(fù)雜性是否符合您的 App 需求。

愿您的代碼沒(méi)有錯(cuò)誤，并且您的緩存速度極快！

以上就是關(guān)于Vue如何清除緩存的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue清除緩存的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！