小程序框架 Taro 和 Uniapp 对比

  目前,还在维护的跨端小程序框架主要有 taro 和 uniapp,两者都在不断的迭代开发,以下是两者截止至目前最新的版本框架版本Issues(open)总提交Taro 3.4.x3.4.118258076Taro 3.5.x3.5.0-beta.28258310Uniapp 3.x3.0.0-alpha9559699

  taro 和 uniapp 均支持、、、、、、、、、、、、,taro 额外支持,uniapp 额外支持

  两者都有较为完善的文档,taro 文档 UI 设计较 uniapp 偏现代化,支持深色模式,问题反馈主要由QQ群、微信群、GIthub Issue组成

  项目

  下面以一个简单的页面编译到微信小程序为例

  源码: taro3.4、taro3.5、uniapp3.0,一样的功能和页面

  使用的依赖包有unplugin-auto-import、unplugin-vue-components、unocss、pinia、unocss - presetIcons、vueuse/core

  编译结果如下:框架编译框架编译速度(取10次平均值)默认构建产物构建时长Taro 3.4webpack v412.108s481kb15.629sTaro 3.5 betawebpack v56.585s266kb12.024sUniapp 3.0 alphavite v2.91.817s79kb5.7s

  Taro 3.5

  Taro 3.5相比上个版本 3.4,提升很明显,几乎提高了一半的性能,但目前处于公开测试期间,老项目升级的话有一定成本。Taro 3.5 构建时默认使用 ,虽然它现在支持使用 ,但打包目标后体积增大 33% 左右,换成、后,与变化不大

  优点:开发和真机效果一样、Typescript 类型声明完善缺点:热更新无效(需要手动刷新)、Composition API 无效、beta 版本刚发布

  Uniapp 3.0

  Uniapp 3.0 处于内部测试有很长一段时间了,相对来说,几乎各项数据都比 taro 要好,但仍然有需要考虑的地方,uniapp 从编译速度来看几乎可以说是无感知,但这并不是最终消耗的时间,如果是web端,可以做到实时更新,但小程序需要等微信开发者工具编译完成,这个时间也需要5 - 10秒。uniapp 使用 vite(rollup)打包后仅79kb,这意味着在2M的限制下使用 uniapp 进行开发,可以开发更多的功能,但是在项目不大的情况下,通过分包可以忽略这个特性

  优点:编译速度快,构建产物体积小缺点:开发和真机效果不一致(canvas 动态设置宽高,CSS样式)、频繁出现错误导致需要重新编译、Typescript 类型声明支持很差

  总结

  综上所述,带来差异的根本原因是 vite(rollup) 和 webpack 的打包方式不同,vite 旨在成为下一代前端开发与构建工具,而实际上是否使用和 vite 类似的打包方案,已经成为区分是不是下一代前端项目的标准了,vite 的出现也让越来越多的框架工具开始考虑支持脱离框架本身了。