Vue 組件緩存問題與解決方案

在開發 Vue.js 應用程式時，我們經常會遇到組件緩存的問題。特別是使用 httpVueLoader 動態載入組件時，瀏覽器的緩存機制可能會導致更新後的組件無法即時反映在畫面上。本文將分享幾種實用的解決方案，幫助你擺脫緩存困擾。

問題情境

假設我們有以下幾個使用 httpVueLoader 載入的組件：

1
2
3
4
Vue.component('x-spit', httpVueLoader('DrainFacility/SurveyPit.vue')); // 陰井
Vue.component('x-shole', httpVueLoader('DrainFacility/SurveyHole.vue')); // 人孔
Vue.component('x-spiple', httpVueLoader('DrainFacility/SurveyPiple.vue')); // 連接管
Vue.component('x-spipeline', httpVueLoader('DrainFacility/SurveyPipeline.vue')); // 管線

當我們修改這些 .vue 檔案的內容時，可能會發現修改後的內容並沒有立即反映在網頁上。這是因為瀏覽器為了提升效能，會將這些檔案暫存起來，導致我們看到的還是舊版本的內容。

解決方案

1. 加入版本號或時間戳

最簡單的解決方案是在檔案路徑後面加入一個動態參數：

1
2
3
4
5
6
// 使用時間戳
Vue.component('x-spit', httpVueLoader('DrainFacility/SurveyPit.vue?v=' + Date.now()));

// 或使用版本號
const VERSION = '1.0.1';
Vue.component('x-spit', httpVueLoader(`DrainFacility/SurveyPit.vue?v=${VERSION}`));

2. 設定伺服器快取控制

在伺服器端設定適當的 HTTP 標頭，可以告訴瀏覽器不要快取特定檔案：

1
2
3
4
5
6
# Nginx 設定範例
location /components/ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

3. 使用 Webpack 動態引入

如果你的專案使用 Webpack，可以改用動態引入的方式：

1
2
3
4
5
// 改寫前
Vue.component('x-spit', httpVueLoader('DrainFacility/SurveyPit.vue'));

// 改寫後
Vue.component('x-spit', () => import('./DrainFacility/SurveyPit.vue'));

4. 使用 Vue 的 keep-alive 控制緩存

如果你想要更細緻地控制組件的緩存行為，可以使用 Vue 內建的 keep-alive 組件：

1
2
3
4
5
<template>
  <keep-alive :include="['ComponentA', 'ComponentB']">
    <router-view></router-view>
  </keep-alive>
</template>

5. 開發時的實用技巧

  1. 使用 Chrome 的開發者工具：

    • 勾選 Network 頁籤中的 "Disable cache"
    • 或按住重新整理按鈕，選擇「強制重新整理」(Ctrl + F5)

  2. 在 Vue CLI 專案中設定 devServer：

1
2
3
4
5
6
7
8
// vue.config.js
module.exports = {
  devServer: {
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate'
    }
  }
}

總結

組件緩存問題雖然困擾，但有多種解決方案可以選擇。建議根據專案的實際需求，選擇最適合的方案：

  • 如果是開發階段，使用時間戳或禁用快取是最直接的解決方案
  • 如果是生產環境，則建議使用版本號或 Webpack 的動態引入
  • 若需要更細緻的緩存控制，可以考慮使用 keep-alive 組件

記住，快取機制本身是為了提升效能而存在的，我們的目標是在開發便利性和執行效能之間取得平衡。

參考資料

  • Vue.js 官方文件
  • Vue Router 文件
  • MDN Web 文件（HTTP 快取）