在 Angular 中使用懒加载路由的方法

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

延迟加载是一种限制加载用户当前需要的模块的方法,这可以提高应用程序的性能并减小初始捆绑包大小,在本文中,您学习了如何在 Angular 应用程序中使用惰性加载路由,本文分步骤讲解的非常详细,感兴趣的朋友一起看看吧

简介

延迟加载是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。

默认情况下，Angular 使用急切加载来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的，但在某些情况下，这种加载时间开始影响性能。

在本文中，您将在 Angular 应用程序中使用延迟加载路由。

先决条件

要完成本教程，您需要：

本地安装 Node.js，您可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行操作。
一些设置 Angular 项目的熟悉程度。

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

步骤 1 – 设置项目

延迟加载的路由需要位于根应用程序模块之外。您将希望将延迟加载的功能放在功能模块中。

首先，让我们使用 Angular CLI 创建一个带有 Angular Router 的新项目：

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

然后导航到新项目目录：

cd angular-lazy-loading-example

让我们创建一个新的功能模块：

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

现在让我们还在我们的 shop 功能模块中创建 3 个组件：

第一个将是 cart 组件：

ng generate component shop/cart

第二个将是 checkout 组件：

ng generate component shop/checkout

第三个将是 confirm 组件：

ng generate component shop/confirm

所有三个组件将位于 shop 目录中。

此时，您应该有一个带有 shop 模块和 3 个组件的新 Angular 项目。

步骤 2 – 使用 loadChildren

在您的主路由配置中，您将希望执行类似以下操作：

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 期望一个使用动态导入语法来导入您的延迟加载模块的函数，只有在需要时才会导入。动态导入是基于 Promise 的，并且可以让您访问模块，其中可以调用模块的类。

步骤 3 – 在功能模块中设置路由配置

现在，剩下要做的就是配置特定于功能模块的路由。

以下是一个示例：

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 { }

现在，您可以使用 routerLink 指令导航到 /shop、/shop/checkout 或 /shop/confirm，并且在首次导航到这些路径时将加载模块。

在终端中，启动服务器：

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 字节
                      | 初始总计     |   2.58 MB
延迟块文件           | 名称         |      大小
src_app_shop_shop_module_ts.js | -             |  10.62 kB

接下来，使用浏览器访问 localhost:4200。

通过打开浏览器的 DevTools 并查看网络选项卡来验证延迟加载是否起作用。当应用程序最初在应用程序根路径加载时，您不应该观察到延迟块文件。当您导航到 /shop 等路径时，您应该观察到 src_app_shop_shop_module_ts.js。

您的应用程序现在支持延迟加载。

结论

在本文中，您学习了如何在 Angular 应用程序中使用惰性加载路由。

继续学习测试带有依赖项的组件、测试服务以及使用模拟、存根和间谍。

您也可以参考官方文档，获取更多关于惰性加载的信息。

您可能感兴趣的文章:

AngulerJS学习之按需动态加载文件
本篇文章主要介绍了AngulerJS学习之按需动态加载文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
angular中的http拦截器Interceptors的实现
本篇文章主要介绍了angular中的http拦截器Interceptors的实现的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-02-02
Angular中实现树形结构视图实例代码
近两年当中使用Angular开发过很多项目，其中也涉及到一些树形结构视图的显示，最近的在项目中封装了大量的组件，一些组件也有树形结构的展示，所以写出来总结一下。
2017-05-05
AngularJS中的Directive自定义一个表格
本篇文章给大家介绍在angularjs中自定义一个有关表格的directive，涉及到angularjs directive相关知识，对本文感兴趣的朋友一起学习吧
2016-01-01
Angular4实现鼠标悬停3d倾斜效果
这篇文章主要介绍了Angular4实现鼠标悬停3d倾斜效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-10-10
浅谈angular.js跨域post解决方案
本篇文章主要介绍了浅谈angular.js跨域post解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Angular8引入百度Echarts进行图表分析的实现代码
这篇文章主要介绍了Angular8引入百度Echarts进行图表分析的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
angularJS 实现长按不触发点击事件可以复制剪贴方法
这篇文章主要为大家介绍了angularJS实现长按不触发点击事件可以复制剪贴方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
Angular.js中ng-if、ng-show和ng-hide的区别介绍
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
AngularJS入门教程之REST和定制服务详解
本文主要讲解 AngularJS REST和定制服务的知识，这里帮大家整理了相关知识，并附示例代码，详细讲解了RES和定制服务的知识，有兴趣的小伙伴可以参考下
2016-08-08