06 — 性能优化:预构建、分包、compileMode 等
1. setData 优化:批量、路径、CustomWrapper
TaroRootElement.performUpdate 将多次 enqueueUpdate 合并为一次 setData,并对 子树重置路径 做去重(同文件 resetPaths 逻辑),减少冗余字段写入。
更进一步的 自定义组件级 setData(custom-wrapper)在同文件中实现:把更新限制在小组件上下文,降低 整页 data 传输量(大列表、复杂页面常用)。
依据:packages/taro-runtime/src/dom/root.ts 内注释明确讨论过 微任务 vs setTimeout 对连续 setData 的影响(见 03 文档引用)。
2. 模板体积:递归 vs 非递归 + baseLevel
shared/src/template.ts 文件头注释(已在前文引用)说明:不支持模板递归 时必须生成 tmpl0 → tmpl1 → … → tmplN,N 由 config.mini.app.baseLevel 控制;MiniPlugin 构造时把 baseLevel 写入 UnRecursiveTemplate。
表述话术:这是在 小程序模板编译限制 / 包体积 与 渲染能力 之间的折中;不同平台能力不同,故抽象成模板类 + 配置。
3. WXS / SJS:isUseXS 与 experimental.useXsForTemplate
MiniPlugin 支持通过 experimental.useXsForTemplate === false 关闭 XS,对应模板生成走 纯 xml 三元 分支(createMiniComponents 里 isUseXS 为 false 时的表达式更冗长但兼容性不同)。
4. compile mode
experimental.compileMode === true 时设置 template.isUseCompileMode = true,配合 小程序「编译模式」(微信等能力)把部分节点标记为编译期优化路径;仓库内 miniCompilerLoader、MiniCompileModePlugin、hydrate 中的 COMPILE_MODE 常量等共同完成这一链路。
要点:属于 「利用宿主新特性换性能」 的可选路径,需按平台版本与限制评估。
5. 依赖预构建(Prebundle)
@tarojs/webpack5-prebundle 的 TaroPrebundle 根据 platformType(web / mini 等)生成不同预构建配置,统一处理 chunk 命名 hash 占位、别名、defineConstants 等:
export default class TaroPrebundle {
// ...
constructor (protected params: IPrebundleParam) {
const { env = process.env.TARO_ENV || 'h5', isBuildPlugin = false } = params
const platform = params.platformType || process.env.TARO_PLATFORM || PLATFORM_TYPE.WEB
this.isBuildPlugin = isBuildPlugin
this.platformType = getPlatformType(env, platform)
this.env = env || platform
}设计原因:
- 小程序场景 npm 包体与解析成本高,预构建可把 CommonJS/复杂入口 打成更适合小程序运行与分包 的形态(具体策略见包内
prebundle/、mini.ts、web.ts)。 - 与 Vite 的
optimizeDeps思想接近,但 Taro 要兼顾 多平台与 webpack chain。
6. 列表与组件变换:transform-taro-components
babel-preset-taro 在 小程序 + React 下启用 transform-taro-components,对 ScrollView、List 等做 AST 级优化或改写(见 packages/babel-preset-taro/transform-taro-components.js 常量与 visitor)。这是 编译期减枝 的典型手段。
7. CLI 侧原生加速:@tarojs/binding
taro-cli 的 create/project/page 等命令引用 @tarojs/binding(Rust N-API),把 脚手架生成、文件操作密集路径 放到 native 层,降低 Node 纯 JS 开销。该优化与「渲染运行时」无关,但属于 工具链性能 的一部分。
8. 小结(自测 checklist)
- 数据路径短键(
Shortcuts)+ 合并 setData + custom-wrapper 拆分。 - 模板层级 / XS / compileMode 与宿主能力对齐。
- Prebundle 优化依赖图与小程序加载。
- Babel 插件针对热点组件模式做变换。
参考资料
packages/taro-runtime/src/dom/root.tspackages/taro-webpack5-prebundle/packages/taro-webpack5-runner/src/plugins/MiniCompileModePlugin.ts- Taro 性能优化专题(官方文档检索)