本頁面由 Cloud Translation API 翻譯而成。

Angular 中的路徑預先載入策略

事先預先載入路徑，導覽。

Minko Gechev

路徑層級程式碼分割功能可將與初始不需要的路徑相關聯的 JavaScript 延後，協助您縮短應用程式的初始載入時間。如此一來，Angular 路由器就會等到使用者前往指定路徑，才會觸發網路要求下載相關聯的 JavaScript。

雖然這項技巧非常適合初次載入網頁，但可能會降低瀏覽速度，但會因使用者的網路延遲和頻寬解決這個問題的其中一種方法是路徑預先載入。使用預先載入功能，當使用者到達指定路線時，您就可以下載和快取與接下來可能所需路徑相關聯的 JavaScript。Angular 路由器內建這項功能。

在這篇文章中，您將瞭解如何利用 Angular 中的 JavaScript 預先載入功能，在使用路徑層級程式碼分割作業時加快瀏覽速度。

Angular 的路徑預先載入策略

Angular 路由器提供名為 preloadingStrategy 的設定屬性，用於定義預先載入及處理延遲載入 Angular 模組的邏輯。我們將說明兩種可行的策略：

PreloadAllModules，名稱意味著所有延遲載入的路徑
QuicklinkStrategy，只會預先載入與目前頁面上連結相關聯的路徑。

本文的其餘部分介紹的是 Angular 範例應用程式。您可以在 GitHub 上取得原始碼。

使用「`PreloadAllModules`」策略

範例應用程式有多個延遲載入的路徑。如要使用 Angular 內建的 PreloadAllModules 策略預先載入所有這些項目，請在路由器設定中將其指定為 preloadingStrategy 屬性的值：

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

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

現在提供應用程式，並查看 Chrome 開發人員工具中的「網路」面板：

按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
按一下 [網路] 分頁標籤。

開啟應用程式時，你應該會看到路由器已在背景下載 nyan-nyan-module.js 和 about-about-module.js：

PreloadAllModules 策略實際運作情形。

路由器也註冊了路徑宣告，因此當您導覽至與任何預先載入模組相關聯的網址時，系統會立即轉換。

使用快速連結預先載入策略

PreloadAllModules 在很多情況下相當實用。但是，若您擁有數十個模組，那麼主動預先載入機制確實會增加網路用量。此外，因為路由器需要在所有預先載入的模組中註冊路徑，所以在 UI 執行緒中可能會進行大量運算，進而拖慢使用者體驗。

quicklink 程式庫提供更好的策略，適用於大型應用程式。它使用 IntersectionObserver API，僅預先載入與目前頁面上已顯示連結相關聯的模組。

您可以使用 ngx-quicklink 套件新增快速連結至 Angular 應用程式。首先，從 npm 安裝套件：

npm install --save ngx-quicklink

當專案中有這類元件後，您就可以指定路由器的 preloadingStrategy 並匯入 QuicklinkModule，藉此使用 QuicklinkStrategy：

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

現在，當您再次開啟應用程式時，您會發現路由器只會預先載入 nyan-nyan-module.js，因為頁面中央的按鈕有路由器連結。開啟側邊導覽列時，您會看到路由器接著預先載入「關於」路徑：

快速連結預先載入策略示範。

在多個延遲載入模組中使用快速連結預先載入策略

上述範例適用於基本應用程式，但如果您的應用程式包含多個延遲載入模組，您必須將 QuicklinkModule 匯入至共用模組，將其匯出，然後將共用模組匯入延遲載入的模組。

首先，將 QuicklinkModule 從 ngx-quicklink 匯入至共用模組，然後匯出：

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

然後將 SharedModule 匯入所有延遲載入模組：

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks 現在可在延遲載入模組中使用。

不侷限於基本預先載入方式

雖然透過快速連結選擇性預先載入可加快瀏覽速度，但你也可以使用由 Guess.js 實作的預測預先載入策略，讓預先載入策略更有效率。藉由分析 Google Analytics 或其他分析供應商的報表， Guess.js 可以預測使用者的導覽歷程，並僅預先載入接下來可能會用到的 JavaScript 區塊。

如要瞭解如何將 Guess.js 與 Angular 搭配使用，請參閱這篇 Guess.js 網站的網頁。

結論

使用路徑層級程式碼分割功能時，如何加快導覽速度：

根據應用程式大小，選擇合適的預先載入策略：
- 少數模組的應用程式可以使用 Angular 的內建 PreloadAllModules 策略。
- 內含多個模組的應用程式應使用自訂預先載入策略，例如 Angular 的快速連結，或符合 Guess.js 實作的預測預先載入策略。
如要設定預先載入策略，請設定 Angular 路由器的 preloadStrategy 屬性。