Taro 3.4 beta 釋出： 支援 Preact 為應用開闢更多體積空間

凹凸實驗室發表於2021-11-25
React

專案體積是困擾小程式開發者的一大問題，如果開發者使用 Taro React 進行開發，更是不得不引入接近 100K 的 React 相關依賴，這讓專案體積變得更加捉襟見肘。因此，Taro v3.4 的主要方向，是探索對於 Preact 的支援。

Preact 是一款體積超小的類 React 框架，提供和 React 幾乎一致的 API，而體積只有 5k 左右。

支援使用 Preact

Taro v3.4 正式實現了對 Preact 的支援，下文將簡單介紹適配思路及用法。

適配思路

1. 執行時改造

Taro 在小程式環境模擬實現了類瀏覽器環境，因此理論上任意的前端框架都可以在 Taro 中使用。

對於 Preact，它與 React 最大的不同在於沒有實現合成事件系統，而是直接使用瀏覽器的事件方法，此外還使用了少量和 React 不一樣的 DOM API。

對於事件的適配，Taro 已經提供了瀏覽器規範的事件方法，因此只需要再處理 Preact 的事件名與小程式事件名的差異。而對於 DOM 方法，則需要額外實現 Preact 使用到的 DOM API。

2. 相容 React 生態

Preact 使用了 preact/compat 去磨平與 React 的 API 差異，讓 React 的各種生態庫可以直接執行在 Preact 上。得益於此，開發時我們可以使用任意的 React 生態庫，甚至對 React、ReactDOM 的 API 引用也不需要修改，只需要簡單地配置 alias 即可：

// 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"
    },
  }
}

用法介紹

文件地址

新專案

執行 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 版本的小程式生命週期鉤子

文件地址

Vue3 提供了 Composition API（組合式 API） 特性，和傳統的 Options API 不同，Composition API 提供了全新的編碼方式 ，可以讓我們更好地去組織和複用程式碼邏輯。

過去 Taro 只提供了 Options API 版本的小程式生命週期鉤子，開發者往往對於這些鉤子和 setup 函式內部該如何通訊、如何共享資料等問題感到困惑，更是不能很好地相容 script setup 語法。

因此 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 交流群：

歡迎關注凹凸實驗室部落格：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章。

相關文章