在 Angular 中使用懶加載路由的方法

更新時間：2024年02月19日 11:33:40 作者：白如意i

延遲加載是一種限制加載用戶當前需要的模塊的方法,這可以提高應(yīng)用程序的性能并減小初始捆綁包大小,在本文中,您學習了如何在 Angular 應(yīng)用程序中使用惰性加載路由,本文分步驟講解的非常詳細,感興趣的朋友一起看看吧

簡介

延遲加載是一種限制加載用戶當前需要的模塊的方法。這可以提高應(yīng)用程序的性能并減小初始捆綁包大小。

默認情況下，Angular 使用急切加載來加載模塊。這意味著在應(yīng)用程序運行之前必須加載所有模塊。雖然這對許多用例可能是足夠的，但在某些情況下，這種加載時間開始影響性能。

在本文中，您將在 Angular 應(yīng)用程序中使用延遲加載路由。

先決條件

要完成本教程，您需要：

本地安裝 Node.js，您可以按照《如何安裝 Node.js 并創(chuàng)建本地開發(fā)環(huán)境》中的步驟進行操作。
一些設(shè)置 Angular 項目的熟悉程度。

本教程已使用 Node v16.4.0、npm v7.19.0、@angular/core v12.1.0 和 @angular/router v12.1.0 進行驗證。

步驟 1 – 設(shè)置項目

延遲加載的路由需要位于根應(yīng)用程序模塊之外。您將希望將延遲加載的功能放在功能模塊中。

首先，讓我們使用 Angular CLI 創(chuàng)建一個帶有 Angular Router 的新項目：

ng new angular-lazy-loading-example --routing --style=css --skip-tests

然后導航到新項目目錄：

cd angular-lazy-loading-example

讓我們創(chuàng)建一個新的功能模塊：

ng generate module shop --route shop --module app.module

現(xiàn)在讓我們還在我們的 shop 功能模塊中創(chuàng)建 3 個組件：

第一個將是 cart 組件：

ng generate component shop/cart

第二個將是 checkout 組件：

ng generate component shop/checkout

第三個將是 confirm 組件：

ng generate component shop/confirm

所有三個組件將位于 shop 目錄中。

此時，您應(yīng)該有一個帶有 shop 模塊和 3 個組件的新 Angular 項目。

步驟 2 – 使用 loadChildren

在您的主路由配置中，您將希望執(zhí)行類似以下操作：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

新的 Angular 8 中，loadChildren 期望一個使用動態(tài)導入語法來導入您的延遲加載模塊的函數(shù)，只有在需要時才會導入。動態(tài)導入是基于 Promise 的，并且可以讓您訪問模塊，其中可以調(diào)用模塊的類。

步驟 3 – 在功能模塊中設(shè)置路由配置

現(xiàn)在，剩下要做的就是配置特定于功能模塊的路由。

以下是一個示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';
const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShopRoutingModule { }

最后，在功能模塊本身中，您將使用 RouterModule 的 forChild 方法而不是 forRoot 來包含您的路由：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';
@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

現(xiàn)在，您可以使用 routerLink 指令導航到 /shop、/shop/checkout 或 /shop/confirm，并且在首次導航到這些路徑時將加載模塊。

在終端中，啟動服務(wù)器：

ng serve

這將生成一個 main.js 文件和一個 src_app_shop_shop_module_ts.js 文件：

初始塊文件            | 名稱         |      大小
vendor.js            | vendor       |   2.38 MB
polyfills.js         | polyfills    | 128.58 kB
main.js              | main         |  57.18 kB
runtime.js           | runtime      |  12.55 kB
styles.css           | styles       | 119 字節(jié)
                      | 初始總計     |   2.58 MB
延遲塊文件           | 名稱         |      大小
src_app_shop_shop_module_ts.js | -             |  10.62 kB

接下來，使用瀏覽器訪問 localhost:4200。

通過打開瀏覽器的 DevTools 并查看網(wǎng)絡(luò)選項卡來驗證延遲加載是否起作用。當應(yīng)用程序最初在應(yīng)用程序根路徑加載時，您不應(yīng)該觀察到延遲塊文件。當您導航到 /shop 等路徑時，您應(yīng)該觀察到 src_app_shop_shop_module_ts.js。

您的應(yīng)用程序現(xiàn)在支持延遲加載。