What’s New in Taro v3.4? Preact Support, Vue 3 Enhancements, and H5 Optimizations

Release Overview

Taro v3.4 was released after a beta period, adding official support for Preact and Vue 3.2, a large set of H5 optimizations, and a v3.5.0 canary that targets Harmony (OpenHarmony) applications.

1. Preact Support

To reduce bundle size for mini‑programs, Taro now allows switching from React to the ultra‑lightweight Preact framework (≈5 KB) with minimal configuration.

Preact is a tiny React‑compatible library that provides almost the same API while keeping the size around 5 KB.

Configuration details are documented in the official release notes.

2. Improved Vue 3.2 Support

2.1 Composition API lifecycle hooks

Vue 3.2’s script setup syntax is now fully compatible with Taro’s mini‑program lifecycle hooks. Example:

<script setup>
import { useDidShow } from '@tarojs/taro'
useDidShow(() => console.log('onShow'))
</script>

2.2 <style> v-bind syntax

Taro’s DOM now implements the MutationObserver API, enabling the Vue 3.2 <style> v-bind feature without errors.

Only the Vue 3 DOM exposes MutationObserver ; React and Vue 2 users are unaffected.

2.3 Exposed VueLoader configuration

Developers can now modify compilerOptions.isCustomElement directly via Taro’s exposed VueLoader options, eliminating the need for custom WebpackChain tweaks.

3. H5 Enhancements

3.1 Custom multi‑route configuration

H5 now supports h5.router.customRoutes to map multiple routes to the same page instance.

module.exports = {
  h5: {
    router: {
      customRoutes: {
        '/pages/index/index': '/index',
        '/pages/detail/index': ['/detail'] // array for multiple routes
      }
    }
  }
}

3.2 Route animation

Animation settings can be defined in app.config.js (e.g., duration and delay). Certain CSS scenarios (e.g., position: fixed with translate3d) may require disabling the animation.

export default {
  animation: {
    duration: 300,
    delay: 50
  }
}

3.3 Dynamic‑import‑node plugin

A Babel plugin removes unused lazy‑loaded pages and components during H5 bundling, preventing unnecessary bundle bloat.

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      hot: false,
      'dynamic-import-node': true
    }]
  ]
}

4. New Compilation Macros

Two macros provide type hints and auto‑completion for configuration objects.

defineAppConfig

// app.config.ts
export default defineAppConfig({
  pages: ['pages/index/index'],
  window: { navigationBarTitleText: 'WeChat' }
})

definePageConfig

// page.config.ts
export default definePageConfig({
  navigationBarTitleText: 'Home'
})

Pages can also call definePageConfig directly inside the page file, e.g.:

// page.tsx (React)
definePageConfig({ navigationBarTitleText: 'Home' })
export default function Index() {}

<script>
definePageConfig({ navigationBarTitleText: 'Home' })
export default {}
</script>

5. Other Important Features & Optimizations

Fixed a memory leak caused by eventSource (see commit).

Fixed CustomWrapper nesting issue (thanks to @CS‑Tao).

Runtime bundle size reduced by ~30 KB compared with v3.3.

Supported hot reload in the WeChat Mini‑Program devtools.

Added Alipay Mini‑Program 2.0 build support.

H5 now allows configuring container id, custom entryPagePath, and using CoverView / CoverImage components.

Added NodesRef.context and NodesRef.node methods.

Provided useResize to listen for resize events.

6. Breaking Changes

Projects upgrading to v3.4 must install the corresponding framework adapter plugin (React, Vue 2, or Vue 3).

For Baidu Mini‑Program, onInit replaces onLoad to improve first‑launch time.

H5 showModal now returns errMsg aligned with Mini‑Program APIs; previous adaptations can be removed.

7. Upgrade Guide

Update Taro CLI to v3.4.0: npm i -g @tarojs/cli Update project dependencies. If installation fails, delete node_modules, yarn.lock, and package-lock.json before reinstalling.

Set Taro version to 3.4.0 in package.json and reinstall.

Install the appropriate framework adapter plugin:

React: @tarojs/plugin-framework-react Vue 2: @tarojs/plugin-framework-vue2 Vue 3:

@tarojs/plugin-framework-vue3

8. Future Work

Upcoming focus includes mini‑program performance optimization, migration to Webpack 5, H5 SSR support, routing system improvements, and continued adaptation for Harmony & OpenHarmony (v3.5‑canary already released).

Community groups for Harmony/OpenHarmony adaptation and progress tracking are available.