隨記

Week 09 · Day 04 — 預載入策略（Preloading）

學習目標

  • 理解預載入的好處
  • 用 PreloadAllModules 背景預載
  • 在效能與首次載入間取捨

重點

為何要預載入 - 純懶載入：進入該頁才下載 → 切換時有小延遲 - 預載入：初始頁面載完後，**背景**先把其他模組載好 - 兼顧「首載快」與「切換順」

設定預載入策略 

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules   // 全部背景預載
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

自訂策略（選擇性預載） 

export class SelectivePreload implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.['preload'] ? load() : EMPTY;
  }
}

{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
  data: { preload: true }      // 只有這個模組預載
}

比較 | 策略 | 行為 | |------|------| | 無預載 | 只有進入時載，切換慢 | | PreloadAllModules | 全部背景預載，切換順 | | 自訂 | 只預載標記的部分 |

實作

  1. 加上 preloadingStrategy: PreloadAllModules
  2. DevTools Network 觀察：進入首頁後背景開始下載其他 chunk
  3. 改自訂策略，只預載 data.preload 為 true 的模組

作業

  • 設定 PreloadAllModules
  • 觀察背景預載行為
  • 實作選擇性預載策略