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触发事件例如click
Sep 11 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
Vue通过懒加载提升页面响应速度
如何开发一个渐进式Web应用程序PWA
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
You might like
php实现对文件压缩简单的方法
2019/09/29 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery实现跨域
2015/02/03 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python分割指定页数的pdf文件方法
2018/10/26 Python
python与字符编码问题
2019/05/24 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
从python读取sql的实例方法
2020/07/21 Python
python切割图片的示例
2020/11/12 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
技校毕业生自荐信范文
2014/03/07 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS