在 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 应用程序中使用惰性加载路由。
继续学习测试带有依赖项的组件、测试服务以及使用模拟、存根和间谍。
您也可以参考官方文档，获取更多关于惰性加载的信息。
相关文章
下面小编就为大家带来一篇angular4模块中给标签添加背景图的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文主要介绍AngularJS API（接口）,这里对AngularJS API的知识做了详细讲解,并附简单代码实例,有需要的小伙伴可以参考下2016-07-07
下面小编就为大家带来一篇angularJs指令的Scope(作用域)介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本篇文章主要介绍了基于AngularJS的拖拽上传的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angularjs实现多图片上传预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要为大家详细介绍了angular4实现带搜索的下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了angular6 填坑之sdk的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
一直比较喜欢angular，正巧最近有个项目用到了，所以想和大家来分享下，下面这篇文章主要给大家介绍了关于Angular项目从新建、打包到nginx部署的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-12-12
本篇文章主要介绍了Angular4学习笔记router的简单使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
AngularJS ng-repeat指令及Ajax的应用实例分析
这篇文章主要介绍了AngularJS ng-repeat指令及Ajax的应用,结合实例形式分析了ng-repeat指令的功能及ajax请求交互相关操作技巧,需要的朋友可以参考下2017-07-07
最新评论