Taro 高性能小程序开发最佳实践

前言

Taro 是一个开放式的跨端跨框架解决方案，在小程序和 H5 应用中广泛应用。Taro 3 相比前代版本更加注重运行时而轻量化编译时，虽然提供了更高效的代码编写方式和更丰富的生态系统，但在性能方面可能存在一些损耗。本文详细介绍如何通过最佳实践提升 Taro 小程序的性能表现。

一、提升初次渲染性能

预渲染功能(Prerender)

当初次渲染数据量很大时，可能导致页面白屏。Taro 提供了预渲染功能来解决这个问题。

配置方法：
在项目配置文件(index.js/dev.js/prod.js)中添加以下配置：

const config = {
  mini: {
    prerender: {
      match: 'pages/shop/**',  // 匹配路径
      include: ['pages/any/way/index'],  // 包含特定页面
      exclude: ['pages/shop/index/index']  // 排除特定页面
    }
  }
};
module.exports = config;

二、提升更新性能

Taro 使用小程序的 template 进行渲染，所有 setData 更新都需要由页面对象调用，当页面结构复杂时性能可能下降。

1. 全局配置项 baseLevel

对于不支持模板递归的小程序(微信、QQ、京东等)，当 DOM 层级达到一定数量后，Taro 会使用原生自定义组件辅助递归渲染。

配置方法：

// 建议设置为 8 或 4
const config = {
  mini: {
    baseLevel: 8
  }
};

注意事项：

• 跨原生自定义组件时，flex 布局会失效
• 在 SelectorQuery.select 方法中，跨组件后代选择器需要增加 >>>：.the-ancestor >>> .the-descendant

2. 使用 CustomWrapper 组件

CustomWrapper 创建原生自定义组件，用于调用后代节点的 setData 方法，实现局部更新。

示例：

import { View, Text } from '@tarojs/components'

export default function() {
  return (
    <View className="index">
      <Text>Demo</Text>
      <CustomWrapper>
        <GoodsList />
      </CustomWrapper>
    </View>
  )
}

三、提升长列表性能

1. VirtualList 组件(虚拟列表)

只渲染当前可见区域视图，提高长列表滚动流畅性。

示例：

import VirtualList from '@tarojs/components/virtual-list'

function buildData(offset = 0) {
  return Array(100).fill(0).map((_, i) => i + offset)
}

const Row = React.memo(({ id, index, data }) => {
  return (
    <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'}>
      Row {index}: {data[index]}
    </View>
  )
})

export default class Index extends Component {
  state = {
    data: buildData(0)
  }
  
  render() {
    const { data } = this.state
    const dataLen = data.length
    return (
      <VirtualList
        height={800}  // 列表高度
        width="100%"  // 列表宽度
        item={Row}    // 列表单项组件
        itemData={data}  // 渲染数据
        itemCount={dataLen}  // 数据长度
        itemSize={100}  // 单项高度
      />
    )
  }
}

2. VirtualWaterfall 组件(虚拟瀑布流)

示例：

import { VirtualWaterfall } from '@tarojs/components-advanced'

// 使用方式与VirtualList类似

四、避免 setData 数据量过大

1. 谨慎处理节点删除

问题示例：

<View>
  <Slider />
  <Goods />
  {isShowModal && <Modal />}
</View>

当 isShowModal 从 true 变为 false 时，Modal 的兄弟节点(Slider + Goods)都会被更新。

优化方案：

<View>
  <Slider />
  <Goods />
  <View>
    {isShowModal && <Modal />}
  </View>
</View>

2. 保持基础组件属性引用

问题示例：

<Map 
  latitude={22.53332} 
  longitude={113.93041} 
  markers={[
    { latitude: 22.53332, longitude: 113.93041 }
  ]} 
/>

每次渲染都会创建新的 markers 对象，触发不必要的更新。

优化方案：

<Map 
  latitude={22.53332} 
  longitude={113.93041} 
  markers={this.state.markers}
/>

五、更多最佳实践

1. 阻止滚动穿透

方法一：使用样式(推荐)

{
  overflow: hidden;
  height: 100vh;
}

方法二：使用 catchMove

<View catchMove />

2. 跳转预加载

示例：

// 当前页面
Taro.preload(fetchSomething())
Taro.navigateTo({ url: '/pages/detail' })

// 目标页面
console.log(getCurrentInstance().preloadData)

3. 缓存 Taro.getCurrentInstance() 结果

示例：

class Index extends React.Component {
  inst = Taro.getCurrentInstance()
  
  componentDidMount() {
    console.log(this.inst)
  }
}

六、即将推出的 CompileMode

CompileMode 在编译阶段将 JSX/Vue template 代码提前编译为小程序模板代码，减少虚拟 DOM 树节点数量，提高渲染性能。

使用方法：

function GoodsItem() {
  return (
    <View compileMode>
      ...
    </View>
  )
}

结语

通过以上最佳实践，可以显著提升 Taro 小程序的性能表现。未来 Taro 将持续探索更多优化方案，为开发者提供更高效的开发体验。