Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记

简介: Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记

默认情况下,NgModules 是贪婪加载的,这意味着一旦应用程序加载,所有 NgModules 也会加载,无论它们是否立即需要。 对于有很多路由的大型应用程序,可以考虑延迟加载——一种根据需要加载 NgModules 的设计模式。 延迟加载有助于保持较小的初始包大小,从而有助于减少加载时间。


要惰性加载 Angular 模块,请在 AppRoutingModule routes 中使用 loadChildren 代替 component 进行配置,代码如下。

image.png

在惰性加载模块,也就是被 AppRoutingModule 加载的模块,的路由模块中,添加一个指向该组件的路由。

image.png

还要确保从 AppModule 中移除了 ItemsModule。这一步很关键,即 AppModule 中不能出现 import ItemsModule 的语句。否则最后 ItemsModule 会和 AppModule 打包在同一个 chunk 里。


Feature Module

特性模块是用来对代码进行组织的模块。


随着应用的增长,你可能需要组织与特定应用有关的代码。 这将帮你把特性划出清晰的边界。使用特性模块,你可以把与特定的功能或特性有关的代码从其它代码中分离出来。 为应用勾勒出清晰的边界,有助于开发人员之间、小组之间的协作,有助于分离各个指令,并帮助管理根模块的大小。


特性模块 vs. 根模块

与核心的 Angular API 的概念相反,特性模块是最佳的组织方式。特性模块提供了聚焦于特定应用需求的一组功能,比如用户工作流、路由或表单。 虽然你也可以用根模块做完所有事情,不过特性模块可以帮助你把应用划分成一些聚焦的功能区。特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作。


创建 feature module 的命令行:


ng generate module CustomerDashboard


这会让 CLI 创建一个名叫 customer-dashboard 的文件夹,其中有一个名叫 customer-dashboard.module.ts,内容如下:

image.png


无论根模块还是特性模块,其 NgModule 结构都是一样的。在 CLI 生成的特性模块中,在文件顶部有两个 JavaScript 的导入语句:第一个导入了 NgModule,它像根模块中一样让你能使用 @NgModule 装饰器;第二个导入了 CommonModule,它提供了很多像 ngIf 和 ngFor 这样的常用指令。 特性模块导入 CommonModule,而不是 BrowserModule,后者只应该在根模块中导入一次。 CommonModule 只包含常用指令的信息,比如 ngIf 和 ngFor,它们在大多数模板中都要用到,而 BrowserModule 为浏览器所做的应用配置只会使用一次。


declarations 数组让你能添加专属于这个模块的可声明对象(组件、指令和管道)。 要添加组件,就在命令行中输入如下命令,这里的 customer-dashboard 是一个目录,CLI 会把特性模块生成在这里,而 CustomerDashboard 就是该组件的名字:


ng generate component customer-dashboard/CustomerDashboard


这会在 customer-dashboard 中为新组件生成一个目录,并使用 CustomerDashboardComponent 的信息修改这个特性模块:


image.png


CustomerDashboardComponent 出现在了顶部的 JavaScript 导入列表里,并且被添加到了 declarations 数组中,它会让 Angular 把新组件和这个特性模块联系起来。


导入特性模块

要想把这个特性模块包含进应用中,你还得让根模块 app.module.ts 知道它。要想把它导入到 AppModule 中,就把它加入 app.module.ts 的导入表中,即将其加入 imports 数组:


image.png


当 CLI 为这个特性模块生成 CustomerDashboardComponent 时,还包含一个模板 customer-dashboard.component.html,它带有如下页面脚本:

image.png

要想在 AppComponent 中查看这些 HTML,你首先要在 CustomerDashboardModule 中导出 CustomerDashboardComponent。 在 customer-dashboard.module.ts 中,declarations 数组的紧下方,加入一个包含 CustomerDashboardModule 的 exports 数组:


image.png


然后,在 AppComponent 的 app.component.html 中,加入标签 :


image.png


2021-7-12 Monday

看一个例子:


CustomerMainModule 是 eager load,在其实现代码里引用了 ProductModule,后者本意是期望Lazy Load,但是这种代码里静态 import 方式,破坏了 ProductModule 的懒加载,最终两个 module 会被打包在一起,出现在一个 chunk 里。

image.png

相关文章
|
4月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
13天前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
27 0
|
13天前
|
开发者 Windows Android开发
跨平台开发新选择:揭秘Uno Platform与.NET MAUI优劣对比,帮你找到最适合的框架,告别选择困难症!
【8月更文挑战第31天】本文对比了备受关注的跨平台开发框架Uno Platform与.NET MAUI的特点、优势及适用场景。Uno Platform基于WebAssembly和WebGL技术,支持Windows、iOS、Android及Web平台,而.NET MAUI由微软推出,旨在统一多种UI框架,支持Windows、iOS和Android。两者均采用C#和XAML进行开发,但在性能、平台支持及社区生态方面存在差异。Uno Platform在Web应用方面表现出色,但性能略逊于原生应用;.NET MAUI则接近原生性能,但不支持Web平台。开发者应根据具体需求选择合适的框架。
33 0
|
13天前
|
开发者 容器 Docker
JSF与Docker,引领容器化浪潮!让你的Web应用如虎添翼,轻松应对高并发!
【8月更文挑战第31天】在现代Web应用开发中,JSF框架因其实用性和灵活性被广泛应用。随着云计算及微服务架构的兴起,容器化技术变得日益重要,Docker作为该领域的佼佼者,为JSF应用提供了便捷的部署和管理方案。本文通过基础概念讲解及示例代码展示了如何利用Docker容器化JSF应用,帮助开发者实现高效、便携的应用部署。同时也提醒开发者注意JSF与Docker结合使用时可能遇到的限制,并根据实际情况做出合理选择。
24 0
|
2月前
|
设计模式 JavaScript 测试技术
Angular服务与依赖注入机制详解
【7月更文挑战第17天】Angular的服务与依赖注入机制为构建模块化、可维护和可扩展的应用程序提供了强大的支持。通过合理定义和使用服务,以及利用依赖注入来管理依赖关系,我们可以编写出更加清晰、可维护和可测试的代码。希望本文能帮助你更好地理解和应用Angular的服务与依赖注入机制。
|
4月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
4月前
|
前端开发
Angular module 的 forRoot 和 forChild 方法
Angular module 的 forRoot 和 forChild 方法
|
10月前
|
Web App开发 前端开发 JavaScript
Angular 应用实现 Lazy Load(懒加载)的项目实战经验分享
Angular 应用实现 Lazy Load(懒加载)的项目实战经验分享
|
11月前
|
设计模式 SQL 关系型数据库
Proxy Facade 在 Angular 应用 Lazy Load 中的作用
Proxy Facade 在 Angular 应用 Lazy Load 中的作用
|
11月前
|
前端开发 JavaScript UED
Angular 应用 Lazy Loading 设计概述
Angular 应用 Lazy Loading 设计概述