摘要

路由懶加載是一種程式碼分割技術，它將不同路由對應的元件分割成獨立的程式碼塊 (chunk)，只有在訪問該路由時，才會去下載對應的元件程式碼。

定義與說明

實現路由懶加載非常簡單，只需要將路由設定中的 component 選項從靜態引入，改為使用動態 import() 的函式即可。這能顯著減小應用程式的初始打包體積，加快首屏載入速度。

實作範例

路由懶加載配置

// router/index.js
const routes = [
  {
    path: '/dashboard',
    name: 'dashboard',
    // 使用動態 import() 實現懶加載
    component: () => import('../views/DashboardView.vue')
  }
];

結論

路由懶加載是所有大型 Vue 應用的標準最佳實踐。它能確保使用者只下載他們當前需要的程式碼，是優化網站效能的關鍵手段。

懶加載程式碼分割效能優化