碧桂园凤凰云小程序首屏加载优化 ​

背景 ​

上面是我们面向C端用户体量最大的产品——碧桂园凤凰云。由于前期设计上的考虑不周以及长期的需求迭代，它变得越来越臃肿，以致于它现阶段存在一个比较明显的问题：慢！

首页作为凤凰云的门面，也是用户使用频率极高的一个页面，因此我们需要对首页加载进行一次优化。

原因分析 ​

用户为什么觉得小程序慢？从小程序启动流程来看，最终我们总结了以下原因：

1. 下载耗时长 ​

就首屏加载而言，下载耗时指的是主包下载的耗时。小程序主包大小限制在2M以内，因为微信认为，主包大小超过了2M，代码包下载时间过长用户就会觉得太慢，影响用户体验，而且也达不到小程序“小”的初衷。

而凤凰云小程序，主包大小到达了1854.3KB，虽然还没到2M，但是也非常接近了。理论上，网络环境相同的情况下，主包越大，下载耗时越长。

2. 启动耗时长 ​

启动耗时主要指的是代码注入时机是否合理，有没有使用缓存策略等等。

3. 渲染耗时长 ​

导致渲染耗时长的原因比较多，但 setData 的使用是绕不开的话题，其它的就是代码设计逻辑的问题了。我们发现：

• 首屏首次加载，有一个跳转空白页面再跳回首页的过程
• 等待位置授权的过程中，渲染是中断的，导致首页一直处于骨架屏状态

这2个问题特别明显，而且特别影响用户体验。

优化方案 ​

针对分析出的原因，我们从以下方向对凤凰云首屏加载进行了优化：

优化结果 ​

• 总包大小从 9980KB 降低到了 9738KB；主包大小从 1854.3KB 降低到了 1701.3KB
• 开启了按需注入与用时注入，启用首页初始渲染缓存，启动耗时明显降低
• 优化了代码逻辑，降低用户等待时间，及时给予用户反馈

总结 ​

本次优化，主包大小虽然只是减少了 153KB，但是弱网情况下，比如下载速度只有 150kb/s ，那也是减少了1秒的下载耗时，效果还是很明显的。 这两年小程序推出了一些新特性，目的也是帮助开发者优化小程序的，比如代码按需注入与用时注入，还有初始渲染缓存等等，所以这次就安排上了。 还有一点非常重要：一定要及时给予用户反馈，用户在长时间的等待过程中，极其容易流失！