微信小程序首次加载优化

前言：

首次加载速度对于微信小程序的用户体验至关重要。微信小程序的成功与否很大程度上取决于其性能和用户体验，而首次加载速度是其中最为关键的因素之一。官方性能优化指标明确了我们需要达到的目标：

• 首屏时间不超过 5 秒；
• 渲染时间不超过 500ms；
• 每秒调用 setData 的次数不超过 20 次；
• setData 的数据在 JSON.stringify 后不超过 256kb；
• 页面 WXML 节点少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个；
• 所有网络请求都在 1 秒内返回结果；

1.控制包大小

• 勾选开发者工具中“上传代码时，压缩代码”选项。
• 及时清理无用的代码和资源文件（包括无用的日志代码）。
• 减少资源包中的图片等资源的数量和大小（理论上除了小icon，其他图片资源从网络下载），图片资源压缩率有限。

2.采用分包加载机制

subpackages字段，在这个字段中进行分包设置；
preloadRule字段，在这个字段中进行预下载设置，preloadRule字段的值是一组key-value，其中key的值是可以触发预下载的页面路径，value的值是在此页面下的预下载配置，配置的字段包括两个：

• packages：字符串数组，是需要预下载分包的root或者name，如果值为_APP_表示预下载主包
• network：字符串，指定可以预下载的网络条件（all：不限网络，只要有网就可以触发预下载；wifi：WiFi下会触发预下载）

3.提前请求

异步请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；当然，如果能在前置页面点击跳转时预请求当前页的核心异步请求，效果会更好；

4.利用缓存

利用storage API, 对变动频率比较低的异步数据进行缓存，二次启动时，先利用缓存数据进行初始化渲染，然后后台进行异步数据的更新，这不仅优化了性能，在无网环境下，用户也能很顺畅的使用到关键服务；

5.避免白屏

可以在前置页面将一些有用的字段带到当前页，进行首次渲染（列表页的某些数据--> 详情页），没有数据的模块可以进行骨架屏的占位，使用户不会等待的很焦虑，甚至走了；

结尾：

通过以上优化策略，我们可以有效地提升微信小程序的首次加载速度，从而改善用户体验，提高用户满意度。在本文中，我们将深入探讨每个优化策略的具体实现方法和效果，帮助开发者更好地优化自己的微信小程序。

参考资料：

《微信开发文档·小程序》