本頁面由 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

專案可供使用後，您就可以使用 QuicklinkStrategy，方法是指定路由器的 preloadingStrategy 並匯入 QuicklinkModule：

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

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

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

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

在多個延遲載入模組中使用 Quicklink 預先載入策略

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

首先，將 ngx-quicklink 中的 QuicklinkModule 匯入共用模組並匯出：

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 網站查看如何搭配使用 Guess.js 與 Angular。

結語

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

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