Week 09 · Day 03 — 路由懶載入（Lazy Loading）

學習目標

• 用 loadChildren 建立懶載入
• 只在需要時才載入該模組
• 縮短首次載入時間

重點

為什麼要懶載入 - 預設所有模組都打包進初始 bundle → 首載慢 - 懶載入：使用者進入 /admin 時才下載 admin 的程式碼 - 對減肥 initial bundle 非常重要

定義懶載入路由

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule)
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module')
      .then(m => m.UserModule)
  }
];

特點 - 「功能模組 + 自己的路由」才適合懶載入 - Angular CLI 建置時會把懶載入模組切成獨立 chunk - 未造訪前不會進入初始 bundle

實作

1. 用 ng g m admin --routing 建立含路由的功能模組
2. 在根路由以 loadChildren 指向它
3. ng build 後查看輸出，確認独立 chunk 產生

作業

• 用 loadChildren 建立懶載入
• 說出動態 import() 的作用
• 建置後確認產生獨立 chunk