首页 > 其他 > 详细

Angular6 组件树结构优化

时间:2019-03-06 15:49:58      阅读:190      评论:0      收藏:0      [点我收藏+]

本片博客主要是记录实际项目开发中使用Angular6框架,遇到的一个问题。

现象:

  Angular6框架写的前端web网页,在实际部署运行过程中遇到了一种现象,引入懒加载以后,加载登录面速度很快,但是登录成功以后,页面切换到首页面组件这个过程却很慢,总是登录页面显示登录成功以后,停留好长时间页面才会切换到首页面。

现象分析:

  加载登录页面花费了一段时间开销,登录成功以后,页面切换到首页面,加载首页面又需要花费一段时间开销。加载首页module模块时候,花费的时间开销远大于登录组件的时间开销,所以呈现了现在的现象。

解决策略:

  出于易用性的考虑,调整组件树结构,详情图1 和图2:

        技术分享图片

                          图1(原组件树结构)

          技术分享图片

                              图2 (调整后的组件树结构)

说明:

  将组件树调整以后,首先加载homeModule,加载仪表盘组件,仪表盘组件设置一个登陆拦截,判断是否已经登录,已登录,正常加载仪表盘组件,未登录,加载登录组件。其实时间花销并没有缩短,只是将加载首页的时间花销融汇到了首次加载页面的时间花销里面,缺点是首页面加载时间开销变大,首页面显示时间边长。

 

Angular6 组件树结构优化

原文:https://www.cnblogs.com/mycnblogs-guoguo/p/10483215.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!