Angular性能优化之第三方组件和懒加载技术


Posted in Javascript onMay 10, 2021

概述

应该有很多人都抱怨过 Angular 应用的性能问题。其实,在搭建Angular项目时,通过使用打包、懒加载、变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能。

为了帮助开发者深入理解和使用Angular,本文将以在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能。

环境准备

1.全局安装Angular CLI:npm install -g @angular/cli

2.使用Angular CLI创建一个新项目:ng new spread-sheets-angular-cli

3.下载SpreadJS Npm包:npm install @grapecity/spread-sheets;npm install @grapecity/spread-sheets-angular

4.在angular.json中配置SpreadJS CS

5.在Angular应用程序中使用 SpreadJS

6.使用Angular CLI构建和运行项目

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

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

影响项目性能的因素

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

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

什么是懒加载?

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

项目优化

1. 划分业务模块

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

Angular性能优化之第三方组件和懒加载技术

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

Angular性能优化之第三方组件和懒加载技术

Angular性能优化之第三方组件和懒加载技术

2. 建立导航UI

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

Angular性能优化之第三方组件和懒加载技术

3. 导入与路由配置

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

Angular性能优化之第三方组件和懒加载技术

4. 特性模块内部

Angular性能优化之第三方组件和懒加载技术

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

Angular性能优化之第三方组件和懒加载技术

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

5. 确认它正常工作

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

Angular性能优化之第三方组件和懒加载技术

总结

经过优化,首屏加载时间能得到有效的降低。另外,再说一下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性能优化之第三方组件和懒加载技术的详细内容,更多关于Angular性能优化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
DOM 事件流详解
Jan 20 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
原生JS中应该禁止出现的写法
May 05 Javascript
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
Vue SPA 首屏优化方案
2021/02/26 Vue.js
python实现给字典添加条目的方法
2014/09/25 Python
python验证码识别的实例详解
2016/09/09 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
人工神经网络算法知识点总结
2019/06/11 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
团队经理竞聘书
2014/03/31 职场文书
投标保密承诺书
2014/05/19 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
文员岗位职责
2015/02/04 职场文书
研究生个人学年总结
2015/02/14 职场文书
推广普通话主题班会
2015/08/17 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书