在您的网站上实现Angular中的懒加载

WBOLT_COM 2 月 05, 2023 747 0

Angular是一个由谷歌开发的前端JavaScript框架，用于构建可扩展的企业级网络应用。其中一些应用程序会变得相当大，影响你的应用程序的加载时间。

为了减少加载时间，改善用户的整体体验，你可以使用一种被称为懒人加载的技术。这个原生的Angular功能允许你只先加载网络应用的所需部分，然后根据需要加载其他模块。

在这篇文章中，你将了解Angular懒加载以及它如何帮助加快你的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 并观察输出：