angular 首屏优化
? ? 前一段时间把公司的一个angular项目做了一次大的优化,记录一下过程。 ? 起因: 起因是用户反映网站加载时间过长,从loading画面显示到页面可响应要13s,对于一般的页面恐怕没有用户愿意等待这么久。因为这是一个在线编辑的工具类的项目,有使用需求的用户只能等待页面加载完成,所以才会反馈到客服那边。 ? ? 分析: 页面加载时间过长,首先就是要分析到底是哪些环节导致的,工具呢就是用 chrome 开发者工具里 Performance 进行 Record 后根据数据分析。有很多相关的教程贴,此处不做具体操作说明,直接说结果。分析最后得到的数据,Evaluate Script 就花掉了 9s 的时间,主要是花在项目打包下来的几个 xxx.bundle.js 上了。Evaluate Script 这个阶段到底做了什么处理需要花这么久时间呢?查了些资料,翻了下 angular 的官方文档,在预先(AOT)编译一节找到如下说明:
应该就是这个编译过程花了这么久时间,那么下一步就是实现预先编译,把编译过程从浏览器渲染阶段搬到服务器构建项目的时候。 ? ? 实现步骤: 开启预编译可参考 angular 官网的介绍: https://www.angular.cn/guide/aot-compiler。 开启预编译后一般会报一大堆错误,不用担心,多半是一些语法问题,常见的有:
修改完报错信息,重新构建,刷新页面,duang!!!这次只用了不到 4s 就打开了,用户体验大大提升。 ? ? 其他优化: 虽然开启预编译以后,问题已经基本得到解决了,但为什么不趁此更全面地优化一下呢? 最终优化项:
大部分优化都没遇到什么问题,除了模块懒加载这一块,废了不少力气才完成。 要实现模块的懒加载,需要引入路由,而我们这个项目之前并没有用到路由,所以从配置路由开始着手。 首先,决定将项目内的所有弹窗作为一个模块,在进入页面时不加载,调用弹窗时再做加载。 然后查文档,配置路由。路由配置还是比较简单的,但是配完路由后发现,一些弹窗内部会打开其他的弹窗,所以需要多个弹窗能同时打开。 再查文档,找到 第二路由?,简单配置测试后可以实现多个弹窗同时打开,但光弹窗就三十多个,配置改起来也是麻烦。本以为这样就结束了,没想到又遇到一个问题,当路由导航到当前URL时,路由器会忽略本次导航,这样我们没法更新组件内的内容。 再再查文档,Router ?的属性列表里有 onSameUrlNavigation 这么个参数可以让路由器不忽略,同时搭配?Routes 里的?runGuardsAndResolvers 最终实现了,同一路由刷新触发路由导航钩子函数继而更新组件数据。 ? 最终,优化后的首屏加载时间仅为 1s 多,大大超出了之前的期望值,我也在本次项目的优化过程中学到了很多东西。完美! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |