Performance Optimization Best Practices for Taro Mini‑Program Development

Taro is an open‑source cross‑platform framework widely used in mini‑programs and H5 applications; however, developers often encounter performance bottlenecks such as slow rendering, janky scrolling, and heavy setData updates. This guide collects practical techniques to maximize performance.

1. Improving First‑Render Performance – When the initial data set is large, a white‑screen may appear. Taro offers a prerender feature that pre‑generates pages during build time. Configure it in one of the project config files (e.g., config/index.js) as follows:

const config = {
  ...,
  mini: {
    prerender: {
      match: 'pages/shop/**', // all pages under pages/shop/ are prerendered
      include: ['pages/any/way/index'], // additional pages
      exclude: ['pages/shop/index/index'] // pages to skip
    }
  }
};
module.exports = config;

More details are available in the official Taro documentation.

2. Enhancing Update Performance – For deep component trees, Taro can switch to native custom components after a configurable baseLevel (recommended 4‑8). Adjust this global setting to balance recursion depth and layout stability. Alternatively, wrap performance‑critical modules with a CustomWrapper component to isolate setData updates:

import { View, Text } from '@tarojs/components';
export default function () {
  return (
    <View className="index">
      <Text>Demo</Text>
      <CustomWrapper>
        <GoodsList />
      </CustomWrapper>
    </View>
  );
}

3. Optimizing Long‑List Rendering – Use VirtualList or VirtualWaterfall to render only the visible viewport. Example for a virtual list:

function buildData(offset = 0) {
  return Array(100).fill(0).map((_, i) => i + offset);
}
const Row = React.memo(({ id, index, data }) => (
  <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;
    return (
      <VirtualList
        height={800}
        width="100%"
        item={Row}
        itemData={data}
        itemCount={data.length}
        itemSize={100}
      />
    );
  }
}

Similar code applies to VirtualWaterfall for waterfall layouts.

4. Reducing setData Payload – Avoid large data structures in setData. Keep component props immutable and reuse references (e.g., store marker arrays in state). Isolate deletions by nesting modal components to prevent sibling updates from inflating setData size.

5. Preventing Scroll Penetration – Use CSS overflow: hidden; height: 100vh; for containers that should block scrolling, or apply the catchMove attribute on View when dealing with components like Map that have their own scroll handling.

6. Preload on Navigation – Call Taro.preload() before Taro.navigateTo() to fetch data early, and store the result of Taro.getCurrentInstance() to avoid repeated calls.

7. CompileMode (Upcoming) – CompileMode converts JSX/Vue templates into native mini‑program templates at build time, reducing virtual‑DOM overhead. Enable it by adding the compileMode attribute to a root component:

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

The feature is slated for a Beta release; see the RFC for details.

By applying these best practices, developers can significantly improve the performance, responsiveness, and user experience of Taro‑based mini‑programs.