2024-05-24-【工程化】小程序代码规范

性能与体验
启动性能、运行性能

性能分析

性能扫描工具和代码优化

加载时优化

1. 包体积优化： 首屏优化；
   静态资源网络化：图片、视频、文件等网络化，利用 webp 技术降低图片体积
   降低代码包大小：合理使用分包加载（降低代码包下载耗时、降低小程序代码注入耗时、降低页面渲染耗时、降低内存占用
2. 优化启动耗时（分包合理性）
   独立分包
   分包预下载
   分包异步化（页面粒度细化到组件甚至文件粒度）
3. 避免非必要的全局自定义组件和插件
4. 控制代码包内的资源文件
5. 及时清理无用代码和资源

运行时优化

1. cr 代码评审，找出复杂逻辑优化点
   生命周期，网络请求提前到 onLoad
   合并 setData（通信的开销 + webview 更新的开销）
   data 数据合理性分析

1.1 分包

分包原则 单个包体积 < 2MB，总包 < 20MB

自然人、企业、交易历史、主包（首页、个人中心、宣传页）

「独立分包」
「分包预下载」

https://developers.weixin.qq.com/community/develop/doc/000e44abb2c7e89c2287f84b956c09
https://github.com/dujuncheng/blogs/blob/master/mini_program/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%A1%88%E2%80%94%E2%80%94%E8%AE%A9%E4%BD%A0%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%A6%82%E6%AD%A4%E4%B8%9D%E6%BB%91.md
https://juejin.cn/post/7117179043430006820

实施方案

图片很重要

如果使用图片不当（过多过大的图片），在加载时会消耗更多的系统资源，从而影响整个页面的性能，因此做好图片优化非常重要。

如何进行图片优化

1. 第一步：控制大小
   （1）针对本地图片

​ 由于放置在本地的图片会被直接打包到小程序包内，图片过大会导致包体积过大，加载时间变长。同时图片过大也会导致渲染时间变长，因此开发者需尽可能的压缩图片的大小。以下列出一些图片优化的思路：

对于不需要透明格式的图片，推荐采用 jpeg 格式来代替 png 格式。

安卓端可使用 webp 的图片格式。webp 图片格式在有损压缩的情况下，肉眼不易察觉出压缩前后的变化，但是体积却得到很明显的减小（注意： iOS 百度 App 版本 < 11.22 时不支持 webp 格式）。

确保小程序包内无冗余和无用的图片资源。

请注意默认情况下会加载，但可能之后永远不会渲染的图片，例如“轮播图”，“手风琴”和“图片画廊”。

为了缩短渲染关键图片所需的时间，请延迟加载不太重要的图片，并在关键图片渲染完成后再加载后续内容。

使用工具对图片进行压缩。常见的压缩工具如下：

图片格式 压缩工具 压缩比例
png 格式 https://www.npmjs.com/package/pngquant-bin 50-70
jpeg 格式 https://www.npmjs.com/package/mozjpeg 默认
（2）针对网络图片

在智能小程序项目中，除了小程序的 icon，基本都会部署到 CDN 上。对于这样的网络图片，也需要进行压缩。下面列出一些优化的思路：

通过 CDN 静态资源服务器获取图片资源，并添加图片压缩规则。
使用如上节提起的工具对图片进行压缩后，再上传至 CDN。 2. 第二步：开启图片懒加载
可以使用懒加载优化小程序。智能小程序的 image 组件提供了 lazy-load 属性，可以开启图片的懒加载功能：

3. 第三步：谨慎使用耗费性能的属性 image组件mode属性提供了 13 种模式，其中widthFix模式是其中一种，作用是保持图片宽度不变，高度自动变化，并保持宽高比不变。由于widthFix模式需要动态计算图片的宽度，导致页面的重绘，因此应谨慎使用mode属性的widthFix模式。

4. 第四步：使用渐进式 JPEG 来优化用户体验
   使用 mozjpeg 不仅可以压缩 JPEG 图片的体积，还可以将图片转换为渐进式的 JPEG。 渐进式的 JPEG 图片在加载时会先展示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以预览到图片的轮廓，一定程度上可以提升用户体验。

5. 第五步：减少页面抖动
   当网络图片资源加载过慢时，页面可能会出现抖动现象，这是因为当 webview 无法获取到图像的 width, height 属性值，不能为图片预留空间，导致页面元素出现重排，在视觉上出现抖动现象。

为了减少页面的抖动，可以设置一个和图片资源宽高一致的默认图片或者空元素，这样可以避免页面重排带来的性能损耗，同时也能优化用户的体验。

6. 第六步：利用体验评分工具检测图片问题
   利用开发者工具提供的体验评分工具（Audits），开发者可以识别和检测影响智能小程序性能、体验的图片问题。
   具体使用方法，详见体验评分工具说明。