乐趣区

关于uni-app:vue3和vite双向加持uniapp性能再次提升

jiezi

uni-app对 vue3 & Vite 的降级，是一个渐进式过程：

  • 2020 年 9 月：小程序平台反对 vue3 开发，小程序平台编译器仍然应用 webpack；
  • 2021 年 5 月：H5 平台反对 vue3 开发，H5 平台编译器降级为 Vite；
  • 2021 年 8 月：App 平台反对 vue3 开发，App 平台编译器降级为 Vite；
  • 2021 年 11 月：小程序平台编译器降级为 Vite；

至此，uni-app在全平台反对了 Vite 编译及Vue 3.x 运行。

so，这场持续一年之久的大版本升级，到底给 uni-app 我的项目带来了哪些晋升？

是时候总结（秀）一波了。

新版 uni-app 框架次要做了三大改良：

  • 重写框架内核：基于 vue3 + ts 重写内置组件和 API，实现更彻底、更高效的tree-shaking；
  • 新增反对 Vite 构建工具，在 H5 平台实现秒开预览；
  • 新增反对 Vue3.x，实现更灵便的开发方式，及更高的运行性能；

基于这三大改良，uni-app 我的项目取得了 多快好省 四大收益：

  • 更多的语法反对，反对组合式 API，业务聚焦，开发效率更高；
  • 更快的编译速度，H5 平台十倍减速，小程序、App 减速 30% 以上；
  • 更好的运行性能，用户端响应更快，体验更好；
  • 更小的代码体积，瘦身 30% 以上，更省体积、更省流量

更多的语法反对

新版 uni-app 反对 Vue 3.x 框架，反对组合式 API，可实现更聚焦的业务开发。

Vue 3.x 的一些新增个性，uni-app也曾经齐全反对，如：

  • 反对<script setup>
  • 反对<style scoped>、<style module>、State-Driven Dynamic CSS(v-bind)
  • 反对jsx、tsx（h5,app 平台反对，小程序不反对）

另外，在小程序平台，新版 uni-app 也扩大了更多的语法，如：

  • 更欠缺的模板语法反对（如 class、style 反对函数、变量等，不再局限数组、对象类型）
  • 更残缺的 props 反对（如传递函数）
  • 更欠缺的 slot 反对（如作用域插槽）

更快的编译速度

开发者日常工作中，最无聊的就是期待编译构建。

某乎上还有一个”程序员在期待编译的时候都做什么？“的探讨帖，可见编译工夫对开发者而言，是一个如许难堪无聊的碎片工夫。

uni-app本次降级 vue3 & Vite 后，在编译工夫上有多少改良？带给开发者多少福利？咱们安顿实在测试，以数据谈话。

测试环境阐明：

硬件：RedmiBook 14 二代
处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz 
内存：16.0 GB
操作系统：Windows 11 专业版 64 位操作系统

对于编译速度，咱们做了两个维度的比照：

  • 纵向比照：筛选 uni-app 罕用我的项目模板，在 H5、小程序、App 平台，别离测试 vue 2.6 和vue 3.x的编译工夫
  • 横向比照：应用业内优良的其它跨端框架，创立默认我的项目模板，记录其编译工夫，和 uni-app 的vue 3.x版本进行比照

uni-app 历史版本纵向比照

咱们抉择 uni-app 默认模板、uni-starter、hello-uniapp 三个我的项目模板，别离测试 vue 2.6 和vue 3.x的编译工夫。

uni-app 我的项目编译工夫的采集形式：

  • vue 2.6版本编译工夫 = webpack 的 stats.endTime – stats.startTime
  • vue 3.x版本编译工夫 = 构建工具入口处记录 global.__vite_start_time = performance.now()，构建工具编译实现时：performance.now() – global.__vite_start_time

H5 平台

对 uni-app 的三个我的项目模板别离运行到 H5 平台，进行屡次编译测试，并求其均值后，取得如下数据：

由此，咱们能够察看到：

  • 在 vue 2.6 环境下，随着我的项目复杂度的晋升，H5 首页预览所需编译工夫会直线减少；这是因为在 vue 2.6 版本下，尽管仅预览首页，但仍然会应用 webpack 编译整个我的项目资源；故我的项目越简单，编译工夫越长；
  • 在 vue 3.x 环境下，H5 首页预览的编译工夫跟我的项目复杂度也有关系，但增幅不大；这是因为在 vue 3.x 版本下，应用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。

通过图表比照，咱们能够直观得出结论：vue 3.x环境下的首页编译工夫，均匀不到 vue 2.6 环境下的十分之一。

换言之，vue 3.x版本下的首页编译速度，相比 vue 2.6 版本，有 十倍效率晋升。

这个十倍效率晋升，次要得益于新版采纳 Vite 作为构建工具，由此带来了两大益处：

  • 应用原生 ESM 文件，无需打包，实现极速的服务启动；
  • 预览（运行）应用 esbuild 作为打包工具，相比 vue 2.6 环境下的webpack，构建速度快 10-100 倍（这不是咱们夸张，详见 esbuild）

本着这个 十倍效率晋升，小伙伴们还不连忙上手试试？

小程序平台

对 uni-app 的三个模板我的项目运行到小程序平台，屡次编译测试，并求其均值后，取得如下数据：

从上图比照数据来看，咱们能够得出结论：小程序平台，vue 3.x版本下的运行编译，相比 vue 2.6 版本，编译性能至多晋升 30%；且我的项目越简单，编译性能晋升越显著，能够达到 40% ~ 50%。

App 平台

对 uni-app 的三个我的项目模板持续运行到 App 平台，屡次编译测试，并求其均值后，取得如下数据：

从上图比照数据来看，咱们能够得出结论：App 平台，vue 3.x版本下的运行编译，相比 vue 2.6 版本，编译性能晋升将近 50%。

虽没有 H5 平台的十倍效率晋升那么刺激，但将近 50% 的速度晋升，常常开发小程序 /App 的小伙伴，还不心动？

业内优良框架横向比照

除了采纳不同版本的 uni-app 进行纵向比照外，咱们还应用业内优良的跨端框架Taro，创立空的我的项目模板，进行横向比照测试。

具体测试计划：

  1. 装置 Taro 的最新 cli，本文测试时应用的版本为 ”@Tarojs/Taro”: “3.3.16”
  2. 应用 Taro init 命令，别离抉择 react、vue、vue3 框架，创立三个默认我的项目模板，三个项目名称别离为taro3-react、taro3-vue、taro3-vue3，如下图：
  3. 应用npm run dev:h5，运行到 H5 平台进行预览，记录每次预览编译工夫，反复执行，求其均值

对于 Taro 编译工夫的计算计划：

  1. 开发一个 Taro 扩大插件，插件标准参考 Taro 官网 – 插件性能
  2. 在 ctx.onBuildStart 中记录开始编译工夫
  3. 在 ctx.onBuildFinish 中记录编译完结工夫
  4. 两者的时间差，即为编译过程耗费工夫

而后应用 uni-app 的cli命令行，创立基于 vue3.x 的空我的项目模板，我的项目命名为uni-app-vue3。

咱们应用各自框架的命令行，将如上创立的 5 个我的项目别离编译到 H5 平台和小程序平台，屡次测试，并求其均值。

同框架版本在 H5 平台上的编译工夫，后果如下：

从图中能够看出，uni-app的 vue3 版本，在 H5 平台上的首页编译预览性能是遥遥领先的。这个遥遥有多远呢？这么讲吧，你都编译 20 次了，友商第一次还没完呢。

持续编译到小程序平台，屡次测试，求其均值，后果如下：

从图中能够看出，uni-app的 vue3 版本，在小程序平台上的编译性能也是遥遥领先的，这个遥遥也不近。

更好的运行速度

开发环节编译快了，那面向最终用户的软件，运行性能怎么样？

咱们进入性能测试章节。

测试计划：

  • 开发内容：开发一个仿微博小程序首页的简单长列表，反对下拉刷新、上拉翻页、点赞。
  • 界面如下：
  • 测试机型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 开发版)、微信版本 8.0.16
  • 筹备工作：每次开始测试前，杀掉各 App 过程、清空内存，保障测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差别。
  • 评测点：长列表中的某个组件，比方点赞组件，点击时是否能及时的批改未赞和已赞状态？

测试计时形式：

  • 选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），
  • 点赞按钮 onclick 函数结尾开始计时，setData 回调函数结尾完结计时；

在小米手机上进行屡次测试，求其平均值，后果如下：

记录条数 200 400 600 800 1000
vue2 30ms 43ms 56ms 72ms 90ms
vue3 8ms 9ms 9ms 8ms 9ms

从表格中能够看出：

  • 随着页面记录的减少，vue 2.6版本的 uni-app 我的项目，点赞组件响应工夫疾速减少，响应越来越慢；
  • 基于 vue 3.x 的uni-app我的项目，点赞组件的响应工夫跟页面条数无关，始终放弃极高的响应灵敏度，性能体验远高于 vue 2.6 版本。

从这个常见的长列表组件响应试验来看，vue 3.x的性能体验要远高于 vue 2.6 版本。

更小的代码体积

我的项目发行后的代码体积，是一个很重要的考量指标：

  • H5 平台：更小的代码体积，能够帮忙开发者节俭服务端带宽及 CDN 流量，可实现更快的资源加载及页面渲染；
  • 小程序平台：更小的代码体积，可减速小程序包的下载（甚至可能免了分包加载的繁琐），帮忙用户更快进入小程序业务界面；
  • App 平台：更小的代码体积，可实现更快的 App 启动，帮忙用户更快进入 App 首页

为了测试 vue 3.x 新版降级后，代码体积的变动，咱们同样做了两个维度的测试：

  • 纵向比照：抉择 uni-app 罕用我的项目模板，在 H5、小程序、App 平台，别离测试 vue 2.6 和vue 3.x的编译包大小
  • 横向比照：应用业内优良的其它跨端框架，创立默认我的项目模板，记录其编译后的包体积大小，和 uni-app 版本进行比照

Tips：

  • 开发阶段重在编译速度，对应 npm run dev 操作
  • 发行阶段重在编译包大小，对应 npm run build 操作

uni-app 不同版本纵向比照

咱们复用之前创立的 uni-app 默认模板、uni-starter、hello-uniapp 三个我的项目模板，别离测试 vue 2.6 和vue 3.x的编译包体积。

uni-app我的项目编译包体积的采集形式：编译到对应平台后，记录编译后文件夹的大小。

H5 平台

H5 平台编译后代码体积记录如下：

从统计后果来看，uni-app的 vue3.x 版本，在 H5 平台上的编译包体积至多瘦身 30% 以上。

H5 平台的瘦身优化，次要得益于 uni-app 框架的底层全面重构，实现了更彻底的摇树优化。

小程序平台

小程序平台编译后代码体积记录如下：

从统计后果来看，uni-app的 vue3.x 版本，在小程序平台上也有大幅瘦身。

App 平台

App 平台编译后代码体积记录如下：

从统计后果来看，uni-app的 vue3.x 版本，在 App 平台上依据我的项目不同，会有不同幅度的瘦身。

从实践上来讲，我的项目中的页面模板越简单，App 平台的瘦身成果越显著。

业内优良框架横向比照

对于编译后的代码体积，咱们也和业内优良的跨端框架 Taro 进行了比照，复用后面章节创立的三个 Taro 我的项目，别离编译到 H5 平台和小程序平台，计算其编译后的源码文件夹大小。

从图中能够看出，uni-app的 vue3 版本，在 H5 平台上编译包体积是最小的，只有友商的十分之一左右。

咱们持续测试，不同版本框架发行到微信小程序平台，记录其编译包大小：

从图中能够看出，uni-app的 vue3 版本，在小程序平台上编译包体积也是最小的。

Tips：仔细的开发者会发现，所有框架版本编译到小程序上的代码包体积都远小于其在 H5 平台上的包体积，这是因为小程序由平台厂商提供内置组件及接口实现，而 H5 平台则需跨端框架本人实现内置组件及接口，故 H5 平台的代码包广泛要大一些。

总结

综上，咱们以数字谈话，论述了 vue3 版本 uni-app 开发的诸多益处，再回顾一遍：

  • 更多的语法
  • 更快的编译
  • 更好的运行
  • 更少的代码

你还不连忙降级新版 uni-app 来试试吗？

对文本测试过程及后果有疑难的同学，欢送到 github 上提交 issue，欢送斧正。

退出移动版