Taro 3.4 beta 发布： 支持 Preact 为应用开辟更多体积空间

项目体积是困扰小程序开发者的一大问题，如果开发者使用 Taro React 进行开发，更是不得不引入接近 100K 的 React 相关依赖，这让项目体积变得更加捉襟见肘。因此，Taro v3.4 的主要方向，是探索对于 Preact 的支持。

Preact ^[1] 是一款体积超小的类 React 框架，提供和 React 几乎一致的 API，而体积只有 5k 左右。

支持使用 Preact —

Taro v3.4 正式实现了对 Preact 的支持，下文将简单介绍适配思路及用法。

适配思路

1. 运行时改造

Taro 在小程序环境模拟实现了 类浏览器环境 ^[2] ，因此理论上任意的前端框架都可以在 Taro 中使用。

对于 Preact，它与 React 最大的不同在于没有实现 合成事件系统 ^[3] ，而是直接使用浏览器的事件方法，此外还使用了少量和 React 不一样的 DOM API。

对于事件的适配，Taro 已经提供了浏览器规范的事件方法，因此只需要再处理 Preact 的事件名与小程序事件名的差异。而对于 DOM 方法，则需要额外实现 Preact 使用到的 DOM API。

2. 兼容 React 生态

Preact 使用了 preact/compat 去磨平与 React 的 API 差异，让 React 的各种生态库可以直接运行在 Preact 上。得益于此，开发时我们可以使用任意的 React 生态库，甚至对 React、ReactDOM 的 API 引用也不需要修改，只需要简单地配置 alias ^[4] 即可：

// Webpack configconst config = {  "resolve": {    "alias": {      "react": "preact/compat",      "react-dom/test-utils": "preact/test-utils",      "react-dom": "preact/compat",      "react/jsx-runtime": "preact/jsx-runtime"    },  }}

用法介绍

文档地址 ^[5]

新项目

运行 taro init 时，框架选择 Preact 即可创建基于 Preact 的项目。

现有的 React 项目

1. 将 CLI、项目中 Taro 相关的依赖更新到 v3.4.0-beta 版本。

2. 安装依赖：

yarn add preact @tarojs/plugin-framework-react

1. 修改 Taro 编译配置：

const config = {  // ...  framework: 'preact'}

1. 修改 Babel 配置：

module.exports = {  presets: [    ['taro', {      framework: 'preact'    }]  ]}

1. 如果项目使用了 TypeScript，请打开 skipLibCheck 配置，以避免和其它 React 生态库配合使用时报类型错误：

{  ...  "skipLibCheck": true,}

Vue 3 支持 Composition API 版本的小程序生命周期钩子 —

文档地址 ^[6]

Vue3 提供了 Composition API（组合式 API） ^[7] 特性，和传统的 Options API 不同，Composition API 提供了全新的编码方式 ，可以让我们更好地去组织和复用代码逻辑。

过去 Taro 只提供了 Options API 版本的小程序生命周期钩子，开发者往往对于这些钩子和 setup 函数内部该如何通讯、如何共享数据等问题感到困惑，更是不能很好地兼容 script setup ^[8] 语法。

因此 Taro v3.4 提供了 Composition API 版本的小程序生命周期钩子，让开发者更方便地使用 setup 语法，例子：

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

运行时体积优化 —

目前 Taro 对于前端框架的适配层代码都放在了运行时库 @tarojs/runtime 里，意思即当开发者使用 React 时，还是会包含 Vue2、Vue3 的适配层代码。（Tree Shaking 失败的原因是使用了 Webpack Provider Plugin 导出 @tarojs/runtime 里的 BOM API）

因此，Taro v3.4 以 Taro 插件的形式去实现对于各前端框架的适配，其中一个好处是可以把上述运行时适配层的代码拆分到各个插件内。加上对运行时代码的写法优化，3.4 版本的运行时减少了约 30k 的空间。

另一个好处是现在开发者可以通过编写 Taro 插件去支持任意的前端框架，而几乎不需要改动 Taro 的核心代码。

升级指南 —

1. 安装 v3.4.0-beta 的 CLI 工具：

npm i -g @tarojs/cli@beta

2. 更新项目依赖

如果安装失败或打开项目失败，可以删除 node_modules 、 yarn.lock 、 package-lock.json 后重新安装依赖再尝试。

修改 package.json 文件中 Taro 相关依赖的版本修改为 ~3.4.0-beta.0 ，再重新安装依赖。

3.【Breaking Changes】安装对应的框架适配插件

因为 Taro v3.4 把各前端框架的适配逻辑拆分到对应的插件中，因此旧项目升级时需要安装对应框架的适配插件：

• 使用 React，请安装 @tarojs/plugin-framework-react
• 使用 Vue2，请安装 @tarojs/plugin-framework-vue2
• 使用 Vue3，请安装 @tarojs/plugin-framework-vue3

其他 —

Breaking Changes

• 百度小程序使用 onInit 代替 onLoad 生命周期，以优化首次启动时间。

最后 —

接下来 Taro 的重心将会放在编译系统升级（如升级 Webpack5）和优化 H5 能力（如输出 SSR 方案、优化路由系统等）上。

鸿蒙应用 && OpenHarmony

Taro 迭代的另一条主线是对 鸿蒙应用 && OpenHarmony 的适配，Taro 与 OpenHarmony 团队成立了跨平台 UI 兴趣组（SIG-CROSS-PLATFORM-UI），联合社区共同展开适配工作。目前第一阶段的开发工作即将完成，12 月初会发布首个可用的体验版本。

相关咨询：

• 鸿蒙 && OpenHarmony 适配小组 ^[9]
• 适配进度 ^[10]

鸿蒙 & OpenHarmony 交流群：

引用资料 —