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

Angular 中的路徑預先載入策略

在使用者瀏覽前預先載入路徑，加快瀏覽速度。

Minko Gechev

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

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

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

Angular 的路徑預先載入策略

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

PreloadAllModules，顧名思義，會預先載入所有延遲載入的路徑
QuicklinkStrategy，只會預先載入與目前網頁上連結相關聯的路徑。

本篇文章的其餘部分會提到 Angular 應用程式範例。您可以在 GitHub 找到原始碼。

使用 `PreloadAllModules` 策略

範例應用程式有多個延遲載入的路徑。如要使用 PreloadAllModules 策略 (已內建於 Angular) 預先載入所有圖片，請在路由器設定中將其指定為 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

在專案中提供 QuicklinkStrategy 後，您可以指定路由器的 preloadingStrategy 並匯入 QuicklinkModule，即可使用 QuicklinkStrategy：

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

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

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

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

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

上述範例適用於基本應用程式，但如果您的應用程式包含多個延遲載入模組，您必須將 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 屬性，藉此設定預先載入策略。