Knoldus博客音频 |
阅读时间： 6 分钟
在开始介绍angular的lazy-loading功能模块之前，首先，让我们了解一下什么是模块？所以，模块是一种将组件、管道和服务等都组合在一起的方式，它们之间是相互关联的。模块集被组合在一起，形成一个应用程序。一个组件可以使用其他模块的数据。
Angular模块。
在angular中，这个功能是由NgModule定义的。每个应用程序至少有一个NgModule类，它是一个应用程序的根模块。根模块是AppModule，我们在src/app/app.module.ts文件中定义它。
为了创建一个Angular Module，我们必须使用类装饰器@NgModule，这个装饰器使用一个带有定义模块的属性的元数据对象。主要的属性是。
- **imports:**包含其他模块的数组，这些模块可以被该模块的组件使用。
- declarations: 接收属于该模块的组件的数组。
- 出口：定义一个可以被其他模块使用的组件、指令和管道的数组。
- providers：声明服务，如果它是根模块，那么这些服务对整个应用程序都是可用的。
根模块的基本根结构看起来像这样。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
因此，这段代码表明，在@NgModule装饰器的帮助下，AppModule类变成了Angular Module。
现在我们来了解一下什么是Angular中的懒惰加载功能模块？
懒惰加载功能模块。
Angular创建了一个单页应用程序，也就是说，所有的组件都是一次性加载的。所以，有可能很多不需要的库或模块也会被加载。对于小项目来说，这没有问题，但随着项目功能的增加，如果所有的东西都一次性加载，那么加载的时间也会增加。懒惰加载有助于保持较小的初始包尺寸，这反过来又有助于减少加载时间。
让我们开始一步步的指导。
有以下步骤，我们可以通过这些步骤来设置懒惰加载的功能模块。
1）设置一个应用程序（如果你已经创建了应用程序，你可以跳过这一步
首先，我们必须在CLI的帮助下创建angular应用程序。我们必须写。
ng new angular-lazy-loading --routing
(i) 这个命令将创建名为angular-lazy-loading的angular应用程序。
(ii) -routing标志会生成一个名为app-routing.module.ts的文件，这是我们为功能模块设置懒惰加载所需要的文件之一。
(iii) 现在通过 "cd "移动到应用程序，即cd angular-lazy-loading
2）在路由的帮助下创建功能模块
接下来，我们需要一个名为lazy-loading的独立路由文件的功能模块。
要了解更多关于路由和导航的信息，你可以参考这里。
这里，lazy-loading是功能模块的名称。加载lazy-loading功能模块的路径也是lazy-loading，因为它是用-route选项指定的。因此，我们要把命令写成。
ng generate module lazy-loading --route lazy-loading --module app.module
这样就创建了一个懒惰加载文件夹，其中包括文件中定义的新的可懒惰加载功能模块LazyLoadingModule和lazy-loading-routing.module.ts文件中定义的路由模块LazyLoadingRoutingModule。该命令自动声明了Lazy-loadingComponent，并在新功能模块内导入了LazyLoadingRoutingModule
在app.module.ts中定义了路由数组
const routes: Routes = [
{
path: 'lazy-loading',
loadChildren: () => import('./lazy-loading/lazy-loading.module').then(m => m.LazyLoadingModule)
}
];
这里，lazy-loading使用loadChildren后面的函数。导入路径是模块的相对路径。
3.添加另一个功能模块
与存根组件一起添加一个新的功能模块。为此，我们必须编写上述相同的命令来生成它。
ng generate module lazy-loading2 --route lazy-loading2 --module app.module
现在，src/app/app-routing.module.ts将变成这样。
const routes: Routes = [
{
path: 'lazy-loading',
loadChildren: () => import('./lazy-loading/lazy-loading.module').then(m => m.LazyLoadingModule)
},
{
path: 'lazy-loading2',
loadChildren: () => import('./lazy-loading2/lazy-loading2.module').then(m => m.LazyLoading2Module)
}
];
4.设置用户界面
现在我们必须设置我们的用户界面。在app.component.html中，我们必须用一个简单的自定义导航来替换默认的HTML，它可以帮助我们在浏览器中导航我们的模块。app.component.html将看起来像这样。
<h1>
{{title}}
</h1>
<button routerLink="/lazy-loading">Lazy-loading-1</button>
<button routerLink="/lazy-loading-2">Lazy-loading-2</button>
<button routerLink="">Home</button>
<router-outlet></router-outlet>
现在要在浏览器中运行该应用程序，请在终端中写下以下命令。
ng serve
之后，到浏览器中写，localhost:4200，在这里我们看到我们的懒人应用程序有三个按钮。
UI看起来像这样。
所有的三个按钮将自动工作，因为它们是通过CLI添加的。
5.输入和路由配置
在CLI的帮助下，它自动添加了功能模块的路由。我们已经在app-routing.module.ts文件中定义了rote数组，另外，现在我们只需要添加默认路径就可以完成了。我们可以像下面的代码那样更新它。
const routes: Routes = [
{
path: 'lazy-loading',
loadChildren: () => import('./lazy-loading/lazy-loading.module').then(m => m.LazyLoadingModule)
},
{
path: 'lazy-loading2',
loadChildren: () => import('./lazy-loading2/lazy-loading2.module').then(m => m.LazyLoading2Module)
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
前两条路径是通往LazyLoadingModule和LazyLoading2Module的路由。最后一条定义了一个默认路径。
6.在功能模块内部
现在移到第一个功能模块，即LazyLoadingModule。如果你使用CLI，那么按照上面提到的步骤，你不必做任何事情，但如果不使用CLI，那么在LazyLoadingModule内包含以下代码。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyLoadingRoutingModule } from './lazy-loading-routing.module';
import { LazyLoadingComponent } from './lazy-loading.component';
@NgModule({
declarations: [
LazyLoadingComponent
],
imports: [
CommonModule,
LazyLoadingRoutingModule
]
})
export class LazyLoadingModule { }
与此同时，路由特定的功能模块文件，即lazy-loading-routing.module文件看起来像这样。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyLoadingComponent } from './lazy-loading.component';
const routes: Routes = [{ path: '', component: LazyLoadingComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LazyLoadingRoutingModule { }
这里的路径被设置为空字符串，因为AppRoutingModule中的路径已经被设置为lazy-loading。
第二个功能模块即LazyLoading2Module也将以类似方式配置。
7.验证懒惰加载
我们有几种方法可以验证。
(i)现在，所有代码 完成后 ，我们必须验证does模块是否被懒惰地加载**。我们可以通过使用chrome开发工具来验证。**
在chrome中，通过使用Ctrl+Shift+i打开开发者工具，然后移动到网络标签。
之后，现在点击Lazy-loading-1或Lazy-loading-2按钮。你会看到，路线也是根据点击的按钮来确定的。为了清楚地了解情况，首先点击清楚的选项，然后再继续前进。
例如，如果你第一次点击Lazy-loading-1按钮，你就会发现。
而当你第一次点击Lazy-loading-2按钮时，你就会发现。
结果是，如果你能看到文件一切都被正确地连接起来，功能模块正在被懒惰地加载。
要再次测试，请点击清除选项，并通过使用Ctrl+Shift+R重新加载页面，这取决于你的平台。
(ii) 第二个验证方法是。
运行下面的命令来生成构建。
npm run build
之后，当你运行该命令时，你会发现像这样。
上面的图片验证了为懒人加载模块生成了一个单独的块。
(iii)另一种验证方法是打开你的项目的dist文件夹。在那里你会注意到有一个单独的文件用于使用懒加载的模块。
所以，这就是我们可以在我们的应用程序中实现懒惰加载的完整方法。
它包括几个缺点，具体如下。
缺点
- 首先，为了实现懒惰加载，需要在现有的基础上增加额外的代码行，这使得代码变得有点复杂。
- 用户体验可能会受到影响。例如，如果页面结构不理想，可能无法进行回溯操作。
- 用javascript加载一个大的图片并把它放到DOM中，会占用主线程。这可能会使用户界面（UI）在解码过程中没有反应。
关于源代码，你可以参考这个github。
总结。
在这篇博客中，我们已经了解了angular中的懒惰加载功能模块。我们已经看到了到底什么是懒惰加载，为什么我们需要它，以及如何在我们的项目中实现它的分步指南。总结一下，它有助于最大限度地减少应用程序的启动时间。它避免了对服务器的不必要的请求，并且消耗较少的内存，因为它提供了我们可以按需加载模块的功能。
