Angular 中的延迟加载

作者 : 慕源网 本文共3035个字,预计阅读时间需要8分钟 发布时间: 2022-03-27 共73人阅读

介绍

Angular 创建 SPA(单页应用程序),因此所有组件、模块和其他文件都编译在一个文件中并立即加载。不必要的模块也可能会被加载。例如,如果我们为前端和后端办公室创建了一个应用程序,那么即使前端办公室用户登录,两个模块文件也会被加载。在这里,后台办公模块文件被不必要地下载。如果我们的应用程序很小并且功能有限,这很好,但对于大型应用程序,这将增加应用程序的初始加载时间。

延迟加载功能允许在需要时加载 Angular 应用程序的组件、模块和其他文件。这有助于保持初始包大小较小,因此减少了初始加载时间。

在 Angular 中,每个应用程序都使用至少一个作为应用程序根模块的 NgModule 类。该应用程序使用根模块进行引导。根据应用程序的性质,Angular 应用程序可能有多个模块。根模块或应用模块在 /src/app 下创建。

模块的延迟加载可以使用根路由模块来完成。这使用 loadChildren 方法延迟加载模块。可以使用字符串或 LoadChildrenCallback 定义 loadChildren。在 Angular 8.0 中,基于字符串的 loadChildren 方法已被弃用,因此我们必须使用 LoadChildrenCallback 方法。

一步一步的例子,

强烈推荐

海量程序代码,编程资源,无论你是小白还是大神研究借鉴别人优秀的源码产品学习成熟的专业技术强势助力帮你提高技巧与技能。在此处获取,给你一个全面升级的机会。只有你更值钱,才能更赚钱

如果你是初级程序员可以研究别人的代码提高技术,如果你喜欢搞网盟或者外包,可以让你快速建站,还等什么赶快关注吧,我们会持续输出相关资源

海量源码程序,学习别人的产品设计思维与技术实践

第 1 步:使用路由创建 Angular 应用程序

如果您使用的是 Angular CLI,请使用“–routing”标志创建 Angular App

ng new LazyLoadingTestApp --routing

上面的命令创建了名为“LazyLoadingTestApp”的 Angular 应用程序,这里我们传递了“–routing”标志,因此也会生成包含所有路由的“app-routing.module.ts”。该文件用于为我们的功能模块定义延迟加载。

第 2 步:创建功能模块“FeatureModuleExample”

ng generate module FeatureModuleExample --route exp1 --module app.module

上面的命令创建了“feature-module-example”文件夹,它是新的可延迟加载的功能模块“feature-module-example.module.ts”。

第 3 步:在“feature-module-example”中创建 Demo 组件

ng g c .\feature-module-example\demoComponent

上面的命令在“feature-module-example”文件夹中创建了新组件,并在“feature-module-example.module”中注册了这个组件。

第 4 步:为新模块添加路由

“app-routing.module”包含应用程序所需的所有路由。延迟加载模块有自己的路由文件,因此可以使用“loadChildren”方法在主路由文件中定义延迟加载模块。

定义 loadChildren 方法有两种方式:动态导入(LoadChildrenCallback)和基于字符串。

延迟加载模块不引用应用程序根模块,因此我们需要使用浏览器内置的 import (‘…’) 语法进行动态导入。

const routes: Routes = [
  {
    path: 'demo',
    loadChildren: () => import('./feature-module-example/feature-module-example.module').then(m => m.FeatureModuleExampleModule)
  }
];

使用动态导入方法时可能会出现编译错误。将 tsconfig.json 文件中的“target”和“module”属性值更改为“esnext”。

{
	...
	"module": "esnext",
    "target": "esnext",
	....
}

loadChildren 方法也可以使用字符串指定,但在 Angular 版本 8 中已弃用此方法。

const routes: Routes = [
  {
    path: 'demo',
	loadChildren:'./feature-module-example/feature-module-example.module#FeatureModuleExampleModule'
  }
];

下一步是在新模块中创建一个单独的路由文件。为 Route 数组中的新延迟加载模块定义所有必需的路由。

feature-module-example-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DemoComponentComponent } from './demo-component/demo-component.component';

const routes: Routes = [
    { path: 'test', component: DemoComponentComponent }
];

 @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FeatureModuleExampleRoutingModule { }

第五步:设置导航链接

您可以在浏览器的地址栏中键入 URL,也可以定义导航以加载在延迟加载模块下定义的组件。使用以下代码,我们可以向 app.component.html 添加导航以加载演示组件。

app.component.html

定义延迟加载模块几乎完成了。现在,是时候运行应用程序了。当我们运行应用程序并查看网络选项卡时,只加载了“main.js”文件。它不包含 HTML 和功能模块和演示组件的代码。

Angular 中的延迟加载

当我们单击“lazy loading”链接时,角度路由模块将功能模块及其组件作为单个文件加载到用户的浏览器。

Angular 中的延迟加载

创建应用程序的构建时,您可以看到两个不同的 main.js 文件:一个包含根模块,另一个包含功能组件

Angular 中的延迟加载

当我们创建应用程序的根路由文件 (app-routing.module.ts) 时,CLI 将 RouterModule.forRoot(routes) 添加到 AppRoutingModule 导入数组中。使用它,Angular 知道这是应用程序的根路由模块。Angular 只允许在应用程序中使用 forRoot() 一次。CLI 将 RouterModule.forChild(routes) 添加到功能路由模块。使用它,Angular 知道这是需要使用功能模块加载的附加路由。

概括

延迟加载功能允许在需要时加载 Angular 应用程序的组件、模块和其他文件。这有助于保持初始包大小较小,因此减少了初始加载时间。但是,它需要额外的服务器访问才能加载功能模块。如果用户频繁访问,建议不要使用延迟加载模块。

您可以从此处的 GitHub 链接查看或下载源代码


慕源网 » Angular 中的延迟加载

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录