angular 首屏优化

前一段时间把公司的一个angular项目做了一次大的优化，记录一下过程。

起因：

起因是用户反映网站加载时间过长，从loading画面显示到页面可响应要13s，对于一般的页面恐怕没有用户愿意等待这么久。因为这是一个在线编辑的工具类的项目，有使用需求的用户只能等待页面加载完成，所以才会反馈到客服那边。

分析：

页面加载时间过长，首先就是要分析到底是哪些环节导致的，工具呢就是用 chrome 开发者工具里 Performance 进行 Record 后根据数据分析。有很多相关的教程贴，此处不做具体操作说明，直接说结果。分析最后得到的数据，Evaluate Script 就花掉了 9s 的时间，主要是花在项目打包下来的几个 xxx.bundle.js 上了。Evaluate Script 这个阶段到底做了什么处理需要花这么久时间呢？查了些资料，翻了下 angular 的官方文档，在预先（AOT）编译一节找到如下说明：

Angular 应用由大量组件及其 HTML 模板组成。 在浏览器渲染应用之前，组件和模板必须由 Angular 编译器转换成可执行的 JavaScript 代码。

Angular 提供了两种方式来编译你的应用：

1. 即时（JIT）编译，它会在浏览器中运行时编译你的应用

2. 预先（AOT）编译，它会在构建时编译你的应用。

应该就是这个编译过程花了这么久时间，那么下一步就是实现预先编译，把编译过程从浏览器渲染阶段搬到服务器构建项目的时候。

实现步骤：

开启预编译可参考 angular 官网的介绍： https://www.angular.cn/guide/aot-compiler。

开启预编译后一般会报一大堆错误，不用担心，多半是一些语法问题，常见的有：

• 调用函数时传递的参数个数、类型与函数声明时不符；
• 组件内声明为private的变量和函数，不能在模板上引用；
• 详细内容参考上面的官网预编译介绍；

修改完报错信息，重新构建，刷新页面，duang！！！这次只用了不到 4s 就打开了，用户体验大大提升。

其他优化：

虽然开启预编译以后，问题已经基本得到解决了，但为什么不趁此更全面地优化一下呢？

最终优化项：

1. angular框架升级至5.1.3；
2. 通过实现模块懒加载，进一步减少停留在页面 loading 画面的时间；
3. 分析页面初始化时无需加载的资源、请求数据，全部做延迟加载处理，在使用时进行加载；
4. 删除废弃的旧组件50多个；
5. 移除组件内的冗余引用；
6. 清除引用的无用的静态资源；
7. 部分不常变动的静态资源进行压缩；

大部分优化都没遇到什么问题，除了模块懒加载这一块，废了不少力气才完成。

要实现模块的懒加载，需要引入路由，而我们这个项目之前并没有用到路由，所以从配置路由开始着手。

首先，决定将项目内的所有弹窗作为一个模块，在进入页面时不加载，调用弹窗时再做加载。

然后查文档，配置路由。路由配置还是比较简单的，但是配完路由后发现，一些弹窗内部会打开其他的弹窗，所以需要多个弹窗能同时打开。

再查文档，找到 第二路由 ，简单配置测试后可以实现多个弹窗同时打开，但光弹窗就三十多个，配置改起来也是麻烦。本以为这样就结束了，没想到又遇到一个问题，当路由导航到当前URL时，路由器会忽略本次导航，这样我们没法更新组件内的内容。

再再查文档，Router 的属性列表里有 onSameUrlNavigation 这么个参数可以让路由器不忽略，同时搭配 Routes 里的 runGuardsAndResolvers 最终实现了，同一路由刷新触发路由导航钩子函数继而更新组件数据。

最终，优化后的首屏加载时间仅为 1s 多，大大超出了之前的期望值，我也在本次项目的优化过程中学到了很多东西。完美！