Angular是一个由谷歌开发的前端JavaScript框架，用于构建可扩展的企业级网络应用。其中一些应用程序会变得相当大，影响你的应用程序的加载时间。
为了减少加载时间，改善用户的整体体验，你可以使用一种被称为懒人加载的技术。这个原生的Angular功能允许你只先加载网络应用的所需部分，然后根据需要加载其他模块。
在这篇文章中，你将了解Angular懒加载以及它如何帮助加快你的Angular网络应用。
什么是懒加载？
懒加载是指只在需要时才加载网页元素的技术。与之相对应的是急于加载，当所有东西都加载–或试图加载–的时候。急切地获取所有图像、视频、CSS和JavaScript代码可能意味着漫长的加载时间，这对用户来说是个坏消息。
懒加载通常用于承载大量内容的网站上的图像和视频。与其一次性加载所有媒体（这将使用大量带宽并阻碍页面浏览），不如在这些元素在页面上的位置即将滚动进入视野时再加载它们。
Angular是一个单页应用框架，它的大部分功能依赖于JavaScript。随着应用程序的增长，你的应用程序的JavaScript集合很容易变得很大，这也伴随着数据使用和加载时间的相应增加。为了加快速度，你可以使用懒加载来首先获取所需的模块，并将其他模块的加载推迟到需要时进行。
Angular中懒加载的好处
懒加载提供了一些好处，将使你的网站更加用户友好。这些包括：
- 更快的加载时间： JavaScript包含显示你的页面和加载其数据的指令。正因为如此，它是一种阻碍渲染的资源。这意味着在渲染你的页面之前，浏览器必须等待加载所有的JavaScript。在Angular中进行懒加载时，JavaScript被分割成若干块，分别加载。最初的块只包含页面的
- 主要模块所需的逻辑：它被急切地加载，然后其余的模块被懒散地加载。通过减少初始块的大小，你将使网站的加载和渲染速度更快。
- 更少的数据使用： 通过将数据分成几块并根据需要加载，你可能会使用更少的带宽。
- 节约浏览器资源：由于浏览器只加载需要的数据块，它不会浪费内存和CPU来解释和渲染不需要的代码。
在Angular中实施懒加载
要跟上本教程，你将需要以下东西：
- 安装NodeJS
- 具备Angular的基本知识
提升你的项目
你将使用Angular CLI来创建你的项目。你可以通过运行以下命令用npm来安装CLI：
npm install -g @angular/cli
之后，像这样创建一个名为Lazy Loading Demo的项目：
ng new lazy-loading-demo --routing
该命令创建了一个新的Angular项目，并配有路由。你将只在 src/app 文件夹中工作，该文件夹包含你的应用程序的代码。这个文件夹包含你的主要路由文件，app-routing.module.ts。该文件夹的结构应该是这样的：
Angular项目的文件夹结构
用路由创建一个功能模块
接下来，你将创建一个功能模块，它将懒散地加载。要创建这个模块，请运行这个命令：
ng generate module blog --route blog --module app.module
这个命令创建了一个名为 BlogModule 的模块，同时还创建了routing。如果你打开 src/app/app-routing.module.ts，你会看到它现在看起来像这样：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
对懒加载很重要的部分是第三行：
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
这一行定义了路由。博客的路由使用 loadChildren 参数而不是 component。loadChildren 参数告诉Angular懒惰地加载路由–只有当路由被访问时才动态地导入模块，然后再将其返回给路由器。模块在其 routing.module.ts 文件中定义了自己的子路由，如 blog/**。你生成的博客模块看起来像这样：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from './blog.component';
const routes: Routes = [{ path: '', component: BlogComponent }];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BlogRoutingModule { }
你会注意到，这个路由文件包含一个单一的路由， ''。这是对 /blog 的解析，指向BlogComponent。你可以在这个文件中添加更多的组件并定义这些路由。
例如，如果你想添加一个组件来获取某篇博客文章的细节，你可以用这个命令创建这个组件：
ng generate component blog/detail
这就生成了博客细节的组件，并将其添加到博客模块中。要为它添加一个路由，你可以简单地把它添加到你的路由数组中：
const routes: Routes = [{ path: '', component: BlogComponent },
{path:"/:title",component: DetailComponent}];
这增加了一个路由，可解析为 blog/:title（例如，blog/angular-tutorial）。这个路由数组是懒加载的，不包括在初始捆绑中。
验证懒加载
你可以通过运行 ng serve 并观察输出结果来轻松检查懒加载是否正常。在输出的底部，你应该得到类似这样的东西：
使用Angular的 ng serve 验证懒加载
上面的输出被分为两部分。Initial Chunk Files 是页面第一次加载时加载的文件。 Lazy Chunk Files 是懒得加载的文件。这个例子中列出了博客模块。
通过浏览器网络日志检查懒加载的情况
另一种确认懒加载的方法是使用浏览器 “开发工具”面板中的Network选项卡。(在Windows上，Chrome和Microsoft Edge中是F12，Firefox中是Ctrl-Shift-I。在Mac上，在Chrome、Firefox和Safari中是Command–Option–I）。
选择 JS 过滤器，只查看通过网络加载的JavaScript文件。在应用程序的初始加载之后，你应该得到类似这样的东西：
在开发工具中查看的JavaScript下载的初始日志
当你导航到 /blog 时，你会注意到一个新的块，src_app_blog_blog_module_ts.js，被加载。这意味着你的模块只有在你导航到该路线时才被请求，而且它被懒散地加载。网络日志看起来应该是这样的：
开发者工具记录的下载中出现了懒加载的模块
懒加载与急加载
为了比较，让我们也创建一个急于加载的模块，看看它是如何影响文件大小和加载时间的。为了证明这一点，你将创建一个用于认证的模块。这样的模块可能需要急于加载，因为认证是你可能要求所有用户做的事情。
通过在CLI中运行这个命令，生成一个AuthModule：
ng generate module auth --routing --module app.module
这就生成了模块和一个路由文件。它还将模块添加到 app.module.ts 文件中。然而，与我们上次用来生成模块的命令不同，这条命令并没有添加一个懒惰的路由。它使用 --routing 参数而不是 --route <name>。这将认证模块添加到 app.module.ts 的 imports 数组中：
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule //added auth module
],
providers: [],
bootstrap: [AppComponent]
})
将AuthModule添加到你的AppModule导入数组中，意味着认证模块被添加到初始的chunk文件中，并将与主JavaScript捆绑在一起。为了验证这一点，你可以再次运行 ng serve 并观察输出：
添加认证模块后Angular的 ng serve 命令的输出
正如你所看到的，认证模块没有作为懒惰块文件的一部分被包含。此外，初始捆绑文件的大小也增加了。 main.js文件的大小几乎增加了一倍，从8 KB增加到15 KB。在这个例子中，增加的幅度很小，因为组件不包含很多代码。但是，当你用逻辑填充组件时，这个文件的大小会增加，为懒加载提供了强有力的理由。
小结
你已经学会了如何在Angular中使用懒加载，只在需要时才获取模块。懒加载是一种很好的技术，可以改善加载时间，减少数据使用，并更好地利用你的前端和后端资源。
懒加载，加上内容分发网络和最小化JavaScript等技术，将提高你的网站性能和用户的满意度。
评论留言