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 config
const 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
const config = {
  // ...
  framework: 'preact'
}
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 的核心代碼。
升級指南—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]
鴻蒙 & OpenHarmony 交流群：
引用資料
—[1]
Preact: https://preactjs.com/
[2]
類瀏覽器環境: https://docs.taro.zone/docs/next/implement-note#%E8%BF%90%E8%A1%8C%E6%97%B6
[3]
合成事件系統: https://reactjs.org/docs/events.html
[4]
alias: https://preactjs.com/guide/v10/switching-to-preact#setting-up-compat
[5]
文檔地址: https://docs.taro.zone/docs/next/preact
[6]
文檔地址: https://docs.taro.zone/docs/next/composition-api
[7]
Composition API（組合式 API）: https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api
[8]
script setup: https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax
[9]
鴻蒙 && OpenHarmony 適配小組: https://github.com/NervJS/taro/discussions/categories/%E9%B8%BF%E8%92%99-openharmony-%E9%80%82%E9%85%8D%E5%B0%8F%E7%BB%84
[10]
適配進度: https://github.com/NervJS/taro/projects/2