浅谈Angular如何借助第三方组件和懒加载技术进行性能优化-js教程-PHP中文网

首页

web前端

js教程

浅谈Angular如何借助第三方组件和懒加载技术进行性能优化

青灯夜游

Mar 08, 2021 am 10:10 AM

angular性能优化懒加载技术第三方组件

浅谈Angular如何借助第三方组件和懒加载技术进行性能优化

环境准备

全局安装Angular CLI：npm install -g @angular/cli
使用Angular CLI创建一个新项目：ng new spread-sheets-angular-cli
下载SpreadJS Npm包：npm install @grapecity/spread-sheets;npm install @grapecity/spread-sheets-angular
在angular.json中配置SpreadJS CS
在Angular应用程序中使用 SpreadJS
使用Angular CLI构建和运行项目

完成上述环境搭建，便可将表格编辑器组件集成到 Angular 项目中，实现在线导入导出Excel以及数据在线填报等功能。

在开始优化之前，我们先来分析一下是什么因素影响了项目的性能。

影响项目性能的因素

在集成 SpreadJS 表格组件后，项目的公式数据处理速度符合预期，页面在运行也较为流畅。但是发布后，用户打开页面在加载时间上要比开发环境有所延长，带来的用户体验较差。经过调研，发现在Angular的默认中，NgModule都是急性加载的，也就是会在应用加载时尽快加载。无论是否要立即使用，所有模块都会一并加载。

因此，对于多路由的大型应用，建议采用懒加载——按需加载的NgModule的模式。通过懒加载可以减少初始包的尺寸，从而减少加载时间。

什么是懒加载？

在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。懒加载会在首次加载时，将必须的模块加载，而其余暂时用不到的模块则不会加载。例如在商城系统中，用户打开首页时，只需展示商品，此时用不上支付模块，所以支付模块就可以使用懒加载技术。

项目优化

1. 划分业务模块

要懒加载Angular模块，需要在AppRoutingModule routes中使用loadchildren替代component进行配置。

在懒加载模块的路由模块中，添加一个指向该组件的路由。本次的demo存在两个懒加载的模块。

2. 建立导航UI

虽然可以直接在地址栏直接输入URL，但是有导航UI会更好用。三个a标签分别代表主页以及两个需要懒加载的模块。

3. 导入与路由配置

CLI会将每个特性模块自动添加到应用级的路由映射表中，最后通过添加默认路由来最终完成。

4. 特性模块内部

我们到lazy-webexcel.module.ts文件看下，导入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts文件。@NgModule的imports数组列出了LazyWebExcelRoutingModule，让LazyWebExcelModule可以访问他自己的路由模块。另外，LazyWebExcelComponent属于LazyWebExcelModule。

设置path为空，因为AppRoutingModule 中的路径已经设置了，LazyWebExcelRoutingModule中的此路由已经位于lazywebexcel这个上下文中。另一个模块配置也类似，因此不再赘述。

5. 确认它正常工作

我们可以通过Chrome的开发者工具的网络页标签来确认这些模块是否懒加载。点击Designer Component LazyLoad，可以看到下图的文件出现，表示准备就绪，特性模块被惰性加载成功。

总结

经过优化，首屏加载时间能得到有效的降低。另外，再说一下forRoot和forChild。CLI会把RouterModule.forRoot(routes)添加到AppRoutingModule的imports 数组中。这会让Angular知道AppRoutingModule是一个路由模块，而 forRoot() 表示这是根路由模块。它会配置传入的所有路由、让你能访问路由器指令并注册 Router。

CLI 还会把 RouterModule.forChild(routes) 添加到各个特性模块中。这种方式下 Angular 就会知道这个路由列表只负责提供额外的路由并且其设计意图是作为特性模块使用。你可以在多个模块中使用 forChild()。

以上就是 SpreadJS结合Angular框架，并借助懒加载技术优化在线Excel项目的主要过程。除了懒加载，Angular还提供了很多性能优化方式，如浏览器缓存策略、RxJS、Tree Shaking、使用AoT编译等，用好这些技术能让你的项目性能有所提升，为用户提供更良好的使用体验。

更多编程相关知识，请访问：编程视频！！

以上是浅谈Angular如何借助第三方组件和懒加载技术进行性能优化的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：博客园。如有侵权，请联系admin@php.cn删除

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。