Skip to content
目录

06 — 性能优化:预构建、分包、compileMode 等

1. setData 优化:批量、路径、CustomWrapper

TaroRootElement.performUpdate 将多次 enqueueUpdate 合并为一次 setData,并对 子树重置路径 做去重(同文件 resetPaths 逻辑),减少冗余字段写入。

更进一步的 自定义组件级 setDatacustom-wrapper)在同文件中实现:把更新限制在小组件上下文,降低 整页 data 传输量(大列表、复杂页面常用)。

依据packages/taro-runtime/src/dom/root.ts 内注释明确讨论过 微任务 vs setTimeout 对连续 setData 的影响(见 03 文档引用)。

2. 模板体积:递归 vs 非递归 + baseLevel

shared/src/template.ts 文件头注释(已在前文引用)说明:不支持模板递归 时必须生成 tmpl0 → tmpl1 → … → tmplNNconfig.mini.app.baseLevel 控制;MiniPlugin 构造时把 baseLevel 写入 UnRecursiveTemplate

表述话术:这是在 小程序模板编译限制 / 包体积渲染能力 之间的折中;不同平台能力不同,故抽象成模板类 + 配置。

3. WXS / SJS:isUseXSexperimental.useXsForTemplate

MiniPlugin 支持通过 experimental.useXsForTemplate === false 关闭 XS,对应模板生成走 纯 xml 三元 分支(createMiniComponentsisUseXS 为 false 时的表达式更冗长但兼容性不同)。

4. compile mode

experimental.compileMode === true 时设置 template.isUseCompileMode = true,配合 小程序「编译模式」(微信等能力)把部分节点标记为编译期优化路径;仓库内 miniCompilerLoaderMiniCompileModePluginhydrate 中的 COMPILE_MODE 常量等共同完成这一链路。

要点:属于 「利用宿主新特性换性能」 的可选路径,需按平台版本与限制评估。

5. 依赖预构建(Prebundle)

@tarojs/webpack5-prebundleTaroPrebundle 根据 platformType(web / mini 等)生成不同预构建配置,统一处理 chunk 命名 hash 占位别名defineConstants 等:

37:52:packages/taro-webpack5-prebundle/src/index.ts
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.tsweb.ts)。
  • 与 Vite 的 optimizeDeps 思想接近,但 Taro 要兼顾 多平台与 webpack chain

6. 列表与组件变换:transform-taro-components

babel-preset-taro小程序 + React 下启用 transform-taro-components,对 ScrollViewList 等做 AST 级优化或改写(见 packages/babel-preset-taro/transform-taro-components.js 常量与 visitor)。这是 编译期减枝 的典型手段。

7. CLI 侧原生加速:@tarojs/binding

taro-clicreate/project/page 等命令引用 @tarojs/binding(Rust N-API),把 脚手架生成、文件操作密集路径 放到 native 层,降低 Node 纯 JS 开销。该优化与「渲染运行时」无关,但属于 工具链性能 的一部分。

8. 小结(自测 checklist)

  • 数据路径短键Shortcuts)+ 合并 setData + custom-wrapper 拆分
  • 模板层级 / XS / compileMode 与宿主能力对齐。
  • Prebundle 优化依赖图与小程序加载。
  • Babel 插件针对热点组件模式做变换。

参考资料

MIT License.