项目体积是困扰小程序开发者的一大问题,如果开发者使用 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_modulesyarn.lockpackage-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),不定时推送文章:

Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间的更多相关文章

  1. Taro 3.1 beta 发布: 开放式架构新增 4 端支持

    作者:凹凸曼-JJ 自 7 月初我们正式发布了 Taro 3,至今半年时间已然略去.期间我们不断地修复着问题,同时也在构想着下一个 minor 版本. 面对小程序平台越来越多的大环境,Taro 是选择 ...

  2. Beta发布 _thunder_文案+美工展示

    作业要求:https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/1366 团队介绍:thunder 组成员及各位博客地址: 1.王航:htt ...

  3. CKEditor 4.5 beta 发布,可视化 HTML 编辑器

    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...

  4. 基于CKEditor 你能做很多App。CKEditor 4.5 and CKFinder 3 beta 发布

    直击现场 CKEditor 4.5 and CKFinder 3 beta 发布 oschina 发布于: 2015年04月10日 (0评) 分享到:    收藏 +5 4月18日 武汉 源创会开始报 ...

  5. Taro 3 正式版发布:开放式跨端跨框架解决方案

    作者:凹凸曼 - yuche 从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验.今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Tar ...

  6. 【二食堂】Beta - 发布声明

    Beta - 发布声明 新功能 在Beta阶段,图谱方面的新功能有:自定义关系的添加与删除.实体查找.实体名称的修改.实体之间关系的修改.新增了项目创建与删除功能,此外还增加了好友系统,可以实现好友的 ...

  7. 课堂Beta发布140字评论

    Beta发布140字评论: 第一组:飞天小女警 此项目组的功能是礼物挑选,创意十足,用户只要一听名字便会被深深吸引,并且页面设计感,时尚感十足,不断吸引客户的眼球,而且发布到云服务器上面. 第二组:金 ...

  8. 个人对beta发布的观点

    内容:五个小组的beta发布 时间:2016年11月10日 13:40-15:15 地点:传媒西楼202 发布顺序: 1.飞天小女警(选礼物) 2.金州勇士(在线考试) 3.新蜂(俄罗斯方块) 4.天 ...

  9. PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具 - 开源中国社区

    PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具 - 开源中国社区 PyRedisAdmin v1.0 Beta 发布,Redis 在线管理工具

随机推荐

  1. 函数返回值为 const 指针、const 引用

    函数返回值为 const 指针,可以使得外部在得到这个指针后,不能修改其指向的内容.返回值为 const 引用同理. class CString { private: char* str; publi ...

  2. API代码实战

    API实例一: login.py文件 #!/usr/bin/env python #!coding:utf-8 from flask import Flask,jsonify from flask_r ...

  3. python解释器和Pycharm编辑器安装使用完整详细教程

    一.官网下载或软件管家公众号下载 二.安装Python解释器 1.选择自定义安装并添加到环境变量 2.检验Python是否安装成功 三.安装pycharm编辑器 1.点击安装,修改安装路径,建议安装C ...

  4. 【UE4 C++】 UDataAsset、UPrimaryDataAsset 的简单使用

    UDataAsset 简介 用来存储数据,每一个DataAsset 都是一份数据 可以派生,系统自带派生 UPrimaryDataAsset 方便数据对象的加载和释放 可以引用其他的 UDataAss ...

  5. 记录编译QGIS(3.4+Qt5.11+VS2015)的整个过程

    编译运行整个QGIS耗时耗力,由于本人比较愚钝,来来回回花了大概两个星期最终编译成功,记录一下整个过程,一方面备忘,另一方面可能也给别人一点借鉴. 1.准备工作 参考了许多网上的教程,李民录大神的&l ...

  6. Flink 实践教程:入门(1):零基础用户实现简单 Flink 任务

    作者:腾讯云流计算 Oceanus 团队 流计算 Oceanus 简介 流计算 Oceanus 是大数据产品生态体系的实时化分析利器,是基于 Apache Flink 构建的具备一站开发.无缝连接.亚 ...

  7. 高并发场景下JVM调优实践之路

    一.背景 2021年2月,收到反馈,视频APP某核心接口高峰期响应慢,影响用户体验. 通过监控发现,接口响应慢主要是P99耗时高引起的,怀疑与该服务的GC有关,该服务典型的一个实例GC表现如下图: 可 ...

  8. vscode插件集合整理

    针对PEPE8进行代码规范提示,安装flake8之后写代码的时候编辑器就会提示哪里出错,代码格式不规范也会提示,具体安装方式如下: 1.pip install flake8 2.安装flake8成功后 ...

  9. linux中解压.tgz, .tar.gz ,zip ,gz, .tar文件

    转载:https://blog.csdn.net/fu6543210/article/details/7984578 将.tgz文件解压在当前目录: tar zxvf MY_NAME.tgz 将.ta ...

  10. 连续子序列的最大和 牛客网 剑指Offer

    连续子序列的最大和 牛客网 剑指Offer 题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量 ...