Taro 小程序优化
status
Published
slug
taro-miniapp-optimization
date
Apr 16, 2023
tags
MiniProgram
type
Post
summary
…
一、性能优化
优化更新性能
此项优化能大大减少 Taro3 的更新卡顿问题，尤其是在低端机上。
Taro3 使用小程序的 template 进行渲染, setData 会引起重绘 大量diff 计算, 可以借用小程序的原生自定义组件，以达到局部更新的效果，从而提升更新性能。
两个办法 注意都有可能造成数据不更新等问题 需要确定使用范围
- 全局配置项 baseLevel, DOM 结构超过 N 层后会使用原生自定义组件进行渲染。N 默认是 16 层，可以通过修改配置项 baseLevel 修改 N。会导致 flex 布局在跨原生自定义组件时会失效, 跨组件的css选择器选择问题
- 使用CustomWrapper 组件创建一个原生自定义组件, 对后代的setData 将由此自定义组件进行调用，达到局部更新的效果。使用它去包裹遇到更新性能问题的模块, 提升更新时的性能。
优化长列表性能
使用虚拟列表
使用 React/Nerv
@tarojs/components/virtual-list 引入虚拟列表（VirtualList）组件, 只会渲染当前可视区域内的组件，非可视区域的组件将会在用户滚动到可视区域内后再渲染，从而减少实际渲染的组件、优化渲染性能。跳转预加载
Taro 3 提供了
Taro.preload API，可以把需要预加载的内容作为参数传入，然后在新页面加载后通过 Taro.getCurrentInstance().preloadData 获取到预加载的内容。预渲染
将页面初始化的状态直接渲染为无状态(dataless)的 wxml，在框架和业务逻辑运行之前执行渲染流程。经过 Prerender 的页面初始渲染速度通常会和原生小程序一致甚至更快。
就是在页面加载前可以先把wxml 结构加载出来但是是没有数据的, 使用wx、localStorage等API 会报错, 需要配置一些mock 数据 防止报错
开启
二、编译优化
WebPack 5 开启缓存, 启动使用
NODE_ENV=production 开启压缩terser
uglify-es 不在维护, uglify-js 不支持es+, taro 内支持terser 配置
很多默认已开启 比如 compress 压缩, booleans 布尔上下文的各种优化, dead_code 删除无法访问的代码
分包加载
在开发小程序时，Taro 编译器依赖 SplitChunksPlugin 插件抽取公共文件，默认主包、分包依赖的 module 都会打包到根目录 vendors.js 文件中（有一个例外，当只有分包里面有且只有一个页面依赖 module 时，会打包到分包中依赖页面源码中），直接影响到小程序主包大小，很容易超出 2M 的限制大小。
开启智能提取分包依赖
因为 sub-common 会在每个分包目录下分别复制一份，所以会增大小程序包整体大小，使用时需根据具体场景具体分析，采用适合自己的性能最优方案。
微信开发者工具 Audits
类似chrome 的灯塔(Lighthouse) 可以生成体验报告
