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

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

緩存清除的作用

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

緩存清除的目的

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

緩存清除的機制

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

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

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

在 public 文件夾中創(chuàng)建 meta.json 文件來存儲版本信息，方便客戶端代碼的運行時可訪問性。

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

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

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

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

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

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

緩存清除過程的核心在于自動生成新構(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 讀取當前版本
const packageJson = require('./package.json')
const appVersion = packageJson.version

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

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

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

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

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

// 基于新版本號創(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')

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

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

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

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

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

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

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

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

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

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

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

完結(jié)撒花

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

緩存清除的注意事項：

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

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

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

當不需要緩存清除時：

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

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

愿您的代碼沒有錯誤，并且您的緩存速度極快！

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

最新評論