微信小程序优化方案一
最新回答
萌兽
2026-02-19 12:59:06
微信小程序优化方案一主要涵盖资源文件优化、清理无用内容、减少同步逻辑、更早展示首屏数据、图片优化和按需渲染六个方面，具体优化手段如下：
优化资源文件- 图片格式与压缩：对于不需要透明格式的图片，用 jpeg 格式替代 png 格式，并使用 pngquant-bin 或 mozjpeg 等压缩工具进行压缩。
- 避免资源内联：在 TTSS、TTML 等文件中，避免使用 base64 内联过多、过大的图片等资源文件，建议通过外链方式引入。
- 资源外链与 CDN 部署：音频、视频、字体等资源文件压缩有限，尽量避免放到代码包中，可部署到 CDN，通过外链方式使用。
- 大图处理：大图尽量避免放到代码包中，部署到 CDN 时启用并发加载数量控制，并开启 HTTP 缓存功能，下次加载同样路径的图片直接从缓存读取。
- 小图处理：较小的图片（如小于 10KB）建议直接放到代码包中或整合成雪碧图，减少不必要的小图片请求耗时对小程序启动耗时的影响。
- 图片懒加载：开启图片懒加载，设置 lazy-load 属性，避免屏外图片请求影响小程序启动耗时。
- 定期清理：定时清理开发阶段意外引入的第三方库、版本迭代升级废弃的老旧代码或无效依赖、与线上产品环境无关的测试代码、声明但未使用的组件、插件、扩展库等，降低代码包体积。
- 利用工具特性：使用三方框架或打包工具（如 Webpack、Rollup 等）对小程序代码进行预处理时，利用 tree-shaking 等特性去除冗余代码，同时避免在预处理阶段引入不必要的库和依赖。
- 减少同步代码：启动流程中会顺序同步执行 App.onLaunch、Page.onLoad，在这些前置生命周期中应减少使用同步 API 及过多的同步逻辑，避免启动时运行过多同步代码。
- 优先使用异步 API：与渲染数据无关的逻辑优先使用异步 API。
- 按需加载代码：减少启动过程中无用代码的加载，对于启动过程中使用不到的 JS，先不加载，在真正需要使用时再去加载。
- 充分利用缓存：对调用频次高的方法的结果进行缓存，例如对 tt.getSystemInfo、tt.getSystemInfoSync 的结果进行缓存，避免重复调用。
- 尽早调用关键 API 和请求：主页面数据通常来自服务端，逻辑层拿到主页面数据 setData 后，视图层收到数据进行页面更新得到 LCP。为保证 LCP 速度，应尽早请求，拿到页面数据并 setData。
- 接入数据预取：数据预取能显著减少网络请求时间，以西瓜视频小程序为例，线上 FMP 从 1173ms 优化到 818ms，整体优化 300 + ms，速度提升了 30%。
- 避免非必要 reLaunch：尽可能保证页面的及时展示，避免非必要的 reLaunch 操作。
- 缓存请求数据：利用小程序提供的 tt.getStorage、tt.setStorage 等读写本地缓存的能力，若无法采用数据预拉取，优先从缓存中获取数据渲染视图，等待网络请求返回后更新。
- 使用 CDN 并开启缓存：开启 HTTP 缓存控制后，下一次加载同样的图片会直接从缓存读取，提升图片加载速度。
- 合理压缩图片：图片过大会延迟页面完全渲染，应进行合理压缩。
- 选择合适格式：对于不需要透明格式的图片，推荐采用 jpeg 格式代替 png 格式。
- 延迟渲染非可视区域：将首屏可视区域外的页面进行懒加载，滑动到可视区域后再加载。
- 使用框架骨架屏：通过小程序框架提供的骨架屏机制，比业务中创建的骨架屏加载时机更靠前，减少用户白屏等待时长，提升用户体验。
- 使用占位组件：在页面渲染完成前通过占位组件替代组件进行渲染，在该组件注入后再将占位组件替换，降低复杂组件对页面加载的影响。
热门标签
