事先預先載入路徑,以加快使用者瀏覽速度。
路徑層級程式碼分割可協助您延遲與初始不必要的路徑相關的 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
在很多情況下非常實用。不過,當您擁有數十個模組時,積極預先載入會真正增加網路使用量。此外,由於路由器必須在所有預先載入的模組中註冊路徑,因此可能會使 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 的內建
- 設定 Angular 路由器的
preloadStrategy
屬性,設定預先載入策略。