本篇内容主要讲解“角如何借助第三方组件和懒加载技术进行性能优化”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“角如何借助第三方组件和懒加载技术进行性能优化”吧!
相关推荐:《角教程》
应该有很多人都抱怨过角应用的性能问题。其实,在搭建角项目时,通过使用打包,懒加载,变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能。
为了帮助开发者深入理解和使用角,本文将以我司客户中最为典型的业务场景——在线表格编辑为例,演示如何借助懒加载技术,在基于角的框架中实现在线导入导出Excel以及数据在线填报的功能。
<强>环境准备
全局安装角CLI: npm安装- g @angular/CLI
<李>使用角CLI创建一个新项目:ng新spread-sheets-angular-cli
<李>下载SpreadJS npm包:npm安装@grapecity/电子表格;npm安装@grapecity/spread-sheets-angular
<李>在角。json中配置SpreadJS CS
<李>在角应用程序中使用SpreadJS
<李>使用角CLI构建和运行项目
完成上述环境搭建,便可将表格编辑器组件集成到角项目中,实现在线导入导出Excel以及数据在线填报等功能。
在开始优化之前,我们先来分析一下是什么因素影响了项目的性能。
<强>影响项目性能的因素
在集成SpreadJS表格组件后,项目的公式数据处理速度符合预期,页面在运行也较为流畅。但是发布后,用户打开页面在加载时间上要比开发环境有所延长,带来的用户体验较差。经过调研,发现在角的默认中,NgModule都是急性加载的,也就是会在应用加载时尽快加载。无论是否要立即使用,所有模块都会一并加载。
因此,对于多路由的大型应用,建议采用懒加载——按需加载的NgModule的模式。通过懒加载可以减少初始包的尺寸,从而减少加载时间。
<强>什么是懒加载?
在网络应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。懒加载会在首次加载时,将必须的模块加载,而其余暂时用不到的模块则不会加载,例如在商城系统中,用户打开首页时,只需展示商品,此时用不上支付模块,所以支付模块就可以使用懒加载技术。
<强>项目优化
<强> 1。划分业务模块
要懒加载角模块,需要在AppRoutingModule路线中使用loadchildren替代组件进行配置。
在懒加载模块的路由模块中,添加一个指向该组件的路由。本次的演示存在两个懒加载的模块。
<强> 2。建立导航UI
虽然可以直接在地址栏直接输入的URL,但是有导航UI会更好用。三个一个标签分别代表主页以及两个需要懒加载的模块。
<强> 3。导入与路由配置
CLI会将每个特性模块自动添加到应用级的路由映射表中,最后通过添加默认路由来最终完成。
<强> 4。特性模块内部
我们到lazy-webexcel.module.ts文件看下,导入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts文件.@NgModule的进口数组列出了LazyWebExcelRoutingModule,让LazyWebExcelModule可以访问他自己的路由模块。另外,LazyWebExcelComponent属于LazyWebExcelModule。
