使用路徑層級的程式碼分割功能提升應用程式效能!
本文說明如何在 Angular 應用程式中設定路徑層級的程式碼分割,藉此縮減 JavaScript 組合大小,並大幅改善互動時間。
您可以在 GitHub 中找到本文的程式碼範例。如需緊急轉送範例,請參閱Eager 分支版本。路徑層級的程式碼分割範例位於「Lazy 分支版本」中。
程式碼分割功能的重要性
網頁應用程式日益複雜,使得提供給使用者的 JavaScript 數量大幅增加。大型 JavaScript 檔案可能會延遲互動,因此可能需要花費高昂的資源,尤其是在行動裝置上。
如要在不犧牲應用程式功能的情況下,縮減 JavaScript 套件,最有效率的方法就是導入積極的程式碼分割功能。
程式碼分割可讓您將應用程式的 JavaScript 分為多個與不同路徑或功能相關聯的區塊。這個方法只會在初始應用程式載入期間傳送使用者所需的 JavaScript,以縮短載入時間。
程式碼分割技術
程式碼分成兩個層級:「元件層級」和「路徑層級」。
- 在元件層級程式碼分割中,您必須將元件移至專屬的 JavaScript 區塊,並在需要時延遲載入。
- 在路徑層級程式碼分割中,您要將每個路徑的功能封裝成獨立的區塊。使用者瀏覽您的應用程式時,他們會擷取與個別路線相關的區塊,並在需要時取得相關功能。
本文著重說明如何在 Angular 設定路徑層級的拆分功能。
應用程式範例
在深入瞭解如何在 Angular 中使用路徑層級程式碼分割功能之前,我們先來看看範例應用程式:
查看應用程式模組的實作方式。在 AppModule
中定義了兩條路徑:與 HomeComponent
相關聯的預設路徑,以及與 NyanComponent
相關聯的 nyan
路徑:
@NgModule({
...
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
pathMatch: 'full'
},
{
path: 'nyan',
component: NyanComponent
}
])
],
...
})
export class AppModule {}
路徑層級程式碼分割
如要設定程式碼分割功能,就必須重構 nyan
緊急路徑。
Angular CLI 8.1.0 版本可以使用以下指令執行所有操作:
ng g module nyan --module app --route nyan
這會產生:
- 名為 NyanModule
的新路線模組
- AppModule
中名為 nyan
的路徑,會動態載入 NyanModule
- NyanModule
中的預設路徑
- 名為 NyanComponent
的元件,會在使用者點選預設路徑時轉譯
讓我們手動執行這些步驟,更加瞭解如何使用 Angular 導入程式碼分割功能!
當使用者進入 nyan
路徑時,路由器會在路由器插座中顯示 NyanComponent
。
如要在 Angular 使用路徑層級程式碼分割功能,請設定路徑宣告的 loadChildren
屬性,並與動態匯入功能結合:
{
path: 'nyan',
loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}
跟急時路線有以下兩個主要差異:
- 你設定了
loadChildren
,而非component
。使用路徑層級程式碼分割時,您必須指向動態載入的模組,而非元件。 - 在
loadChildren
中,承諾一旦解析,就會傳回NyanModule
,而不是指向NyanComponent
。
上述程式碼片段指定當使用者前往 nyan
時,Angular 應從 nyan
目錄動態載入 nyan.module
,並轉譯與模組中宣告的預設路徑相關聯的元件。
您可以使用以下宣告,將預設路徑與元件建立關聯:
import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [NyanComponent],
imports: [
RouterModule.forChild([{
path: '',
pathMatch: 'full',
component: NyanComponent
}])
]
})
export class NyanModule {}
此程式碼會在使用者前往 https://example.com/nyan
時算繪 NyanComponent
。
如要檢查 Angular 路由器是否會在本機環境中延遲下載 nyan.module
:
- 按下 `Control+Shift+J 鍵 (在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。
按一下 [網路] 分頁標籤。
按一下範例應用程式中的「NYAN」。
請注意,
nyan-nyan-module.js
檔案會顯示在「Network」分頁中。
請前往 GitHub 查看這個範例。
顯示旋轉圖示
目前,當使用者點選「NYAN」按鈕時,應用程式不會指示正在背景載入 JavaScript。如要在載入指令碼時向使用者提供回饋,建議您加入旋轉圖示。
方法是先在 app.component.html
的 router-outlet
元素內新增指標標記:
<router-outlet>
<span class="loader" *ngIf="loading"></span>
</router-outlet>
接著新增 AppComponent
類別來處理轉送事件。這個類別會在聽到 RouteConfigLoadStart
事件時將 loading
標記設為 true
,並在聽到 RouteConfigLoadEnd
事件時將旗標設為 false
。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loading: boolean;
constructor(router: Router) {
this.loading = false;
router.events.subscribe(
(event: RouterEvent): void => {
if (event instanceof NavigationStart) {
this.loading = true;
} else if (event instanceof NavigationEnd) {
this.loading = false;
}
}
);
}
}
在以下範例中,我們導入了 500 毫秒的人工延遲時間,方便您看到旋轉圖示的實際運作情形。
結語
您可以套用路徑層級的程式碼分割功能,縮減 Angular 應用程式的套件大小:
- 使用 Angular CLI 延遲載入模組產生器,自動管理動態載入的路徑。
- 在使用者前往延遲路徑時新增載入指標,顯示目前有一項動作。