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

2021 年 11 月 30 日
本文字数：2475 字
阅读完需：约 8 分钟

项目体积是困扰小程序开发者的一大问题，如果开发者使用 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 项目

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

yarn add preact @tarojs/plugin-framework-react

复制代码

修改 Taro 编译配置：

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

复制代码

修改 Babel 配置：

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

复制代码

如果项目使用了 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 的核心代码。