当前位置:首页>WordPress资讯>在您的网站上实现Angular中的懒加载

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

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

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

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

在这篇文章中,你将了解Angular懒加载以及它如何帮助加快你的Angular网络应用。

  1. 什么是
  2. Angular中懒加载的好处
  3. 在Angular中实施懒加载
  4. 验证懒加载
  5. 懒加载与急加载

什么是懒加载?

懒加载是指只在需要时才加载网页元素的技术。与之相对应的是急于加载,当所有东西都加载–或试图加载–的时候。急切地获取所有图像、视频、CSS和JavaScript代码可能意味着漫长的加载时间,这对用户来说是个坏消息。

懒加载通常用于承载大量内容的网站上的图像和视频。与其一次性加载所有媒体(这将使用大量带宽并阻碍页面浏览),不如在这些元素在页面上的位置即将滚动进入视野时再加载它们。

Angular是一个单页应用框架,它的大部分功能依赖于JavaScript。随着应用程序的增长,你的应用程序的JavaScript集合很容易变得很大,这也伴随着数据使用和加载时间的相应增加。为了加快速度,你可以使用懒加载来首先获取所需的模块,并将其他模块的加载推迟到需要时进行。

Angular中懒加载的好处

懒加载提供了一些好处,将使你的网站更加用户友好。这些包括:

  • 更快的加载时间: JavaScript包含显示你的页面和加载其数据的指令。正因为如此,它是一种阻碍渲染的资源。这意味着在渲染你的页面之前,浏览器必须等待加载所有的JavaScript。在Angular中进行懒加载时,JavaScript被分割成若干块,分别加载。最初的块只包含页面的
  • 主要模块所需的逻辑:它被急切地加载,然后其余的模块被懒散地加载。通过减少初始块的大小,你将使网站的加载和渲染速度更快。
  • 更少的数据使用: 通过将数据分成几块并根据需要加载,你可能会使用更少的带宽。
  • 节约浏览器资源:由于浏览器只加载需要的数据块,它不会浪费内存和CPU来解释和渲染不需要的代码。

在Angular中实施懒加载

要跟上本教程,你将需要以下东西:

  • 安装NodeJS
  • 具备Angular的基本知识

提升你的项目

你将使用Angular 来创建你的项目。你可以通过运行以下命令用npm来安装CLI:

npm install -g @angular/cli

之后,像这样创建一个名为Lazy Loading Demo的项目:

ng new lazy-loading-demo --routing

该命令创建了一个新的Angular项目,并配有路由。你将只在 src/app 文件夹中工作,该文件夹包含你的应用程序的代码。这个文件夹包含你的主要路由文件,app-routing.module.ts。该文件夹的结构应该是这样的:

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

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 参数而不是 componentloadChildren 参数告诉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中的懒加载

使用Angular的 ng serve 验证懒加载

上面的输出被分为两部分。Initial Chunk Files 是页面第一次加载时加载的文件。 Lazy Chunk Files 是懒得加载的文件。这个例子中列出了博客模块。

通过浏览器网络日志检查懒加载的情况

另一种确认懒加载的方法是使用浏览器 “开发工具”面板中的Network选项卡。(在Windows上,Chrome和 中是F12中是Ctrl-Shift-I。在Mac上,在Chrome、Firefox和中是CommandOptionI)。

选择 JS 过滤器,只查看通过网络加载的JavaScript文件。在应用程序的初始加载之后,你应该得到类似这样的东西:

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

在开发工具中查看的JavaScript下载的初始日志

当你导航到 /blog 时,你会注意到一个新的块,src_app_blog_blog_module_ts.js,被加载。这意味着你的模块只有在你导航到该路线时才被请求,而且它被懒散地加载。网络日志看起来应该是这样的:

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

工具记录的下载中出现了懒加载的模块

懒加载与急加载

为了比较,让我们也创建一个急于加载的模块,看看它是如何影响文件大小和加载时间的。为了证明这一点,你将创建一个用于认证的模块。这样的模块可能需要急于加载,因为认证是你可能要求所有用户做的事情。

通过在CLI中运行这个命令,生成一个AuthModule:

ng generate module auth --routing --module app.module

这就生成了模块和一个路由文件。它还将模块添加到 app.module.ts 文件中。然而,与我们上次用来生成模块的命令不同,这条命令并没有添加一个懒惰的路由。它使用 --routing 参数而不是 。这将认证模块添加到 app.module.ts 的 imports 数组中:

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule //added auth module
],
providers: [],
bootstrap: [AppComponent]
})

将AuthModule添加到你的AppModule导入数组中,意味着认证模块被添加到初始的chunk文件中,并将与主JavaScript捆绑在一起。为了验证这一点,你可以再次运行 ng serve 并观察输出:

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

添加认证模块后Angular的 ng serve 命令的输出

正如你所看到的,认证模块没有作为懒惰块文件的一部分被包含。此外,初始捆绑文件的大小也增加了。 main.js文件的大小几乎增加了一倍,从8 KB增加到15 KB。在这个例子中,增加的幅度很小,因为组件不包含很多代码。但是,当你用逻辑填充组件时,这个文件的大小会增加,为懒加载提供了强有力的理由。

小结

你已经学会了如何在Angular中使用懒加载,只在需要时才获取模块。懒加载是一种很好的技术,可以改善加载时间,减少数据使用,并更好地利用你的前端和后端资源。

懒加载,加上内容分发网络和最小化JavaScript等技术,将提高你的和用户的满意度。

原文地址:https://www.wbolt.com/lazy-loading-in-angular.html

WordPress资讯

云计算2023年热点及未来发展趋势

2024-1-22 1:06:46

WordPress资讯

以正确的方式创建Python注释

2024-1-22 1:06:49

个人中心
今日签到
有新私信 私信列表
搜索