Performance Optimization Best Practices for Taro Mini‑Program Development

As an open‑source cross‑platform framework, Taro is widely used in mini‑programs and H5 applications, but developers often report performance issues such as slow rendering, unsmooth scrolling, and gaps compared with native apps.

Taro 3 focuses more on runtime and lightweight compilation, offering a more efficient coding style and richer ecosystem, though it may introduce some performance overhead.

This guide provides practical best‑practice recommendations to maximize mini‑program performance.

1. Improving Initial Render Performance

When the initial data set is large, a white‑screen may appear during loading. Taro’s prerender feature can pre‑render pages to avoid this.

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

2. Enhancing Update Performance

Because Taro uses the mini‑program template system, every setData call updates the whole page object, which can become costly for deep component trees.

Two approaches are recommended:

1. Global baseLevel configuration – Adjust the recursion depth at which Taro switches to native custom components (recommended value: 8 or 4). Note that this may affect flex layout and selector queries.

2. CustomWrapper component – Wrap performance‑critical modules in a native custom component to enable localized setData updates.

import { View, Text } from '@tarojs/components';
export default function () {
  return (
Demo
);
}

3. Improving Long‑List Performance

Large data sets in lists cause severe lag on low‑end devices. Taro provides VirtualList and VirtualWaterfall components that render only the visible viewport.

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 }) => (
Row {index} : {data[index]}
));
export default class Index extends Component {
  state = { data: buildData(0) };
  render() {
    const { data } = this.state;
    const dataLen = data.length;
    return (
);
  }
}

For waterfall layouts, replace VirtualList with VirtualWaterfall (import from @tarojs/components-advanced ).

4. Reducing setData Payload

The two main factors affecting mini‑program performance are the size of the setData payload and the frequency of calls. Taro batches updates, so focus on payload size.

Example 1: When removing a modal, sibling nodes are also updated, inflating the payload. Isolate the modal in its own wrapper to limit updates.

{/* carousel */}
{/* product group */}
{/* modal */}
{isShowModal &&
}

Example 2: Preserve object references for component props (e.g., markers ) to avoid unnecessary shallow‑compare updates.

5. Additional Best Practices

Prevent scroll‑penetration – Use CSS overflow: hidden; height: 100vh; or the catchMove attribute on View components that cannot be styled (e.g., Map ).

{
  overflow: hidden;
  height: 100vh;
}

// View with catchMove

Preload on navigation – Call Taro.preload() before Taro.navigateTo() to fetch data ahead of time.

// pages/index.js
Taro.preload(fetchSomething());
Taro.navigateTo({ url: '/pages/detail' });

// pages/detail.js
console.log(getCurrentInstance().preloadData);

Cache Taro.getCurrentInstance() – Store the result in a class property to avoid repeated calls.

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

6. Upcoming CompileMode

Taro will introduce a CompileMode that scans developer code at build time, converting JSX/Vue templates into native mini‑program templates, reducing virtual‑DOM nodes and improving render performance.

To use it, add the compileMode attribute to a base component.

function GoodsItem() {
  return (
...
);
}

The first beta of CompileMode is near release; developers can follow the RFC for details.

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