首页天道酬勤toast第三方组件(angular组件间传值)

toast第三方组件(angular组件间传值)

admin 12-03 14:30 277次浏览

许多人应该抱怨过Angular应用程序的性能问题。事实上,在构建Angular项目时,通过使用打包、惰性加载、变更检测策略和缓存技术,以及辅助第三方组件,可以有效提升项目性能。

为了帮助开发者深入理解和使用Angular,本文将以我们客户中最典型的业务场景——的在线表单编辑为例,演示如何借助懒加载技术,在基于Angular的框架中实现Excel的在线导入导出和数据的在线填充功能。

00-1010全局安装Angular CLI:NPM install-g @ Angular/CLI使用Angular CLI创建新项目:ng新展开图-angular-cli下载SpreadJS Npm包:NPM install @ gravity/展开图;在angular.json中配置SpreadJS CS在Angular应用程序和Angular CLI中使用SpreadJS来构建和运行项目。完成上述环境建设后,可以将SpreadJS和在线表格编辑器组件集成到Angular项目中,实现Excel的在线导入导出、在线数据填充等功能。

在开始优化之前,让我们分析一下哪些因素会影响项目的性能。

00-1010集成SpreadJS表格组件后,项目公式数据处理速度达到预期,页面运行流畅。但发布后,用户打开页面的加载时间比开发环境的加载时间长,带来的用户体验较差。经过调查发现,在Angular的缺省情况下,NgModule都是紧急加载的,也就是在加载应用的时候会尽快加载。不管你想不想马上用,所有模块都会一起加载。

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

环境准备

在Web应用中,系统的瓶颈往往在于系统的响应速度。如果系统的响应速度太慢,用户会抱怨,系统的价值会大大降低。延迟加载将在首次加载时加载必要的模块,而暂时不可用的其余模块将不会被加载。比如在商城系统中,用户打开主页时,只需要展示商品,此时不需要支付模块,因此支付模块可以使用懒加载技术。

影响项目性能的因素

1.划分业务模块

要延迟加载角度模块,需要使用loadchildren而不是component在AppRoutingModule路由中配置它。

在延迟加载模块的路由模块中,为该组件添加一条路由。在这个演示中有两个惰性加载模块。

2.建立导航用户界面

虽然可以直接在地址栏输入网址,但最好有导航UI。三个A标签代表主页和两个需要惰性加载的模块。

3.导入和路由配置

CLI会自动将每个功能模块添加到应用层路由映射表中,最后通过添加默认路由完成。

4.在功能模块内部

tion">

我们到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编译等,用好这些技术能让你的项目性能有所提升,为用户提供更良好的使用体验。

unity java移动脚本_Unity3D Player角色移动控制脚本multimap的介绍及使用PHP四大安全策略JavaScript支持的注释字符有哪些DeepRust匹配:有更好的方法吗?配额 云主机 UHost雷士灯具管理系统Java0基础_day11-抽象类与接口
懒加载和预加载(react图片懒加载) 图片太多加载过慢?学学图片懒加载吧
相关内容