Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间
项目体积是困扰小程序开发者的一大问题,如果开发者使用 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 项目
- 将 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 版本的小程序生命周期钩子
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 月初会发布首个可用的体验版本。
相关文章
- Flask中的请求上下文和应用上下文
- 腾讯入资东方金信数亿元,共建大数据生态体系
- 浅谈大数据开发工程师的两年工作经验总结
- 大数据应用案例:Dealer Tire通过大数据预测消费者何时需要轮胎
- 医疗大数据:如何实现商业化变现?
- 大数据分析建模及其应用建议
- 招聘行业大数据应用场景分析
- 大数据入门学习必读好书推荐,请收藏!
- 区块链与大数据的整合,未来必然趋势
- 如今的大数据究竟发展到了什么阶段
- InterSystems IRIS医疗版助力东华医为推动中国医疗行业数字化转型
- 大数据产业进入提质增效关键期
- 社交网络大数据的应用有多大的价值
- 大数据安全防护方法研究与建议
- InterSystems IRIS 数据平台通过AWS云应用商店认证
- 大数据在医疗行业中的5种应用
- 中国大地保险数据管理应用中心大数据应用平台案例分析
- 大数据在应急管理中的应用
- 大数据:产业链条将更为完备
- 2019年大数据发展将走向何方