uni-app升级到vue3&Vite是一个循序渐进的过程：2020年9月：小程序平台支持vue3开发，mini程序平台编译器依然使用webpack；2021年5月：H5平台支持vue3开发，H5平台编译器升级为Vite；2021年8月：App平台支持vue3开发，App平台编译器升级为Vite；2021年11月：小程序平台编译器升级到Vite；至此，uni-app支持全平台Vite编译和Vue3.x运行。那么，这一年的大版本升级，为uni-app项目带来了哪些改进呢？是时候结束（显示）波浪了。新版uni-app框架做了三大改进：重写框架核心：基于vue3+ts重写内置组件和API，实现更彻底、更高效的tree-shaking；增加对Vite构建工具的支持，实现在H5平台上秒开预览；增加对Vue3.x的支持，实现更灵活的开发方式，更高的运行性能；基于这三大改进，uni-app项目获得了四大好处：更多语法支持，支持组合API，业务专注，开发效率更高；更快的编译速度，H5平台快10倍，小程序，App比快30%；更好的运行性能，更快的客户端响应，更好的体验Good;代码体积更小，重量减少30%以上，体积更小，流量更小，新版uni-app更多语法支持，支持Vue3.x框架，支持组合API，让业务开发更专注。uni-app完全支持Vue3.x的一些新特性，比如：支持支持,,State-DrivenDynamicCSS(v-bind)支持jsx,tsx(h5、app平台支持，小程序不支持）另外，在小程序平台上，新版uni-app还扩展了更多的语法，比如：更完整的模板语法支持（比如class、style支持函数、变量等等，不再局限于数组和对象类型）更完善的props支持（比如传递函数）更完善的slot支持（比如scopeslots）更快的编译速度在开发者的日常工作中，最无聊的就是等待编制和建设。还有一个关于“程序员在等待编译的时候做什么？”的讨论帖，可见碎片时间编译时间对于开发者来说是多么的尴尬和无聊。uni-app这次升级vue3&Vite后，编译时间提升了多少？它给开发者带来了多少好处？我们安排实测，用数据说话。测试环境说明：硬件：RedmiBook14二代处理器：Intel(R)Core(TM)i7-1065G7CPU@1.30GHz内存：16.0GB操作系统：Windows11专业版64位操作系统关于编译速度，我们做过二维对比：纵向对比：选择uni-app常用项目模板，分别测试vue2.6和vue3.x在H5、小程序、App平台的编译时间。创建默认项目模板，记录其编译时间，并与uni-app的vue3.x版本进行对比uni-app历史版本的纵向对比，我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue2.6和vue3.x的编译时间。uni-app项目编译时间采集方法：vue2.6版本编译时间=stats.endTime-vue3.x版本stats.startTime=构建工具入口记录global.vite_start_time=performance.now()，构建工具编译完成时：performance.now()-global.vite_start_timeH5平台将uni-app的三个项目模板运行到H5平台，多次编译测试，计算平均值后得到如下数据：由此，我们可以观察到:在vue2.6环境下，随着项目复杂度的增加，H5首页预览所需的编译时间会线性增加；这是因为在vue2.6版本中，虽然只预览了首页，但整个项目资源仍然会使用webpack进行编译；因此，项目越复杂，编译时间越长；在vue3.x环境下，H5首页预览的编译时间也与项目复杂度有关，但增加幅度不大；这是因为在vue3.x版本中，使用Vite来构建，在预览首页时，只会编译首页和首页依赖的资源，不会编译其他页面资源。通过图表的对比，我们可以直观地得出一个结论：首页在vue3.x环境下的编译时间平均不到vue2.6环境下的十分之一。也就是说，vue3.x版本下首页的编译速度是vue2.6版本效率的十倍。这十倍的效率提升，主要得益于新版本使用Vite作为构建工具，带来两大好处：使用原生ESM文件，无需打包，实现极速服务启动；preview(run)使用esbuild作为打包工具，与vue2.6环境下的webpack相比，构建速度快了10-100倍（不夸张，详见esbuild官网）。配合这十倍的效率提升，大家还不赶紧试试看吗？小程序平台将uni-app的三个模板项目运行到微信小程序平台，多次编译测试，并计算平均值，得到如下数据：从上图中的对比数据，我们可以得出结论：小程序平台，在vue3.x版本下运行编译，与vue2.6版本相比，编译性能至少提升30%；并且项目越复杂，编译性能提升越明显，可达40%~50%。App平台继续将uni-app的三个工程模板运行到App平台，多次编译测试，计算平均值得到如下数据：从上图的对比数据，我们可以得出结论:Appplatform,vue相比vue2.6版本，3.x版本的编译性能提升近50%。虽然没有H5平台十倍效率提升那么精彩，但速度提升了近50%。经常开发小程序/App的朋友还不心动？业界优秀框架横向对比除了使用不同版本的uni-app进行纵向对比，我们还使用了业界优秀的跨端框架Taro，创建一个空项目模板进行横向对比测试。具体测试方案：安装Taro最新的cli。本次测试使用的版本为“@tarojs/taro”:“3.3.16”使用Taroinit命令分别选择react、vue、vue3框架，创建三个默认项目模板。三个项目的名称分别为taro3-react、taro3-vue、taro3-vue3，如下图所示：使用npmrundev:h5，运行到H5平台进行预览，记录下每次预览的编译时间，反复执行，取平均值关于Taro编译时间计算方案：开发一个Taro扩展插件，插件说明参考Taro官网-插件功能在ctx中记录开始编译时间。使用uni-app的cli命令行创建一个基于vue3.x的空项目模板，并将项目命名为uni-app-vue3。我们分别使用各自框架的命令行将上面创建的五个项目分别编译到H5平台和小程序平台，多次测试，计算出它们的平均值。同框架版本在H5平台的编译时间，结果如下：从图中可以看出，vue3版本的uni-app在H5平台的首页编译和预览性能上遥遥领先。这有多远？这么说吧，你编译了20次，第一次还没编译完。继续编译到微信小程序平台，多次测试，求平均值。结果如下：从图中可以看出，Vue3.x版本的uni-app在微信小程序平台上的编译性能也遥遥领先。此远而不近。更好的运行速度开发环节的编译速度更快，那么软件对终端用户的运行性能如何呢？我们进入性能测试章节。测试计划：开发内容：开发仿微博小程序首页的复杂长列表，支持下拉刷新，上拉翻页，点赞。界面如下：测试机型：小米10pro，MIUI12.5（21.11.3开发版），微信版本8.0.16准备工作：每次开始测试前，杀掉各个App进程，清空内存，确保测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。评价要点：长列表中的某个组件，比如like组件，是否能在点击时及时修改不喜欢和喜欢的状态？测试计时方法：选中一条微博，点击“点赞”按钮切换点赞状态（高亮点赞，灰色点赞），点赞按钮onclick函数开始计时，点赞开始结束计时设置数据回调函数；在小米手机上进行了多次测试，结果如下：从表中可以看出：随着页面记录的增加，vue2.6版本的uni-app项目响应时间快速增长，并且反应越来越快。越慢;基于vue3.x的uni-app项目，like组件的响应时间与页面数无关，一直保持着极高的响应灵敏度，性能体验远高于vue2.6版本。从这个常见的长列表组件响应实验来看，vue3.x的性能体验比vue2.6要高很多。更小的代码量项目发布后的代码量是一个非常重要的考量指标：H5平台：更小的代码量可以帮助开发者节省服务器带宽和CDN流量，可以实现更快的资源加载和页面渲染；小程序平台：更小的代码体积，可以加快小程序包的下载速度（甚至可以避免繁琐的分包加载），帮助用户更快的进入小程序业务界面；App平台：更小的代码量，可以实现更快的App启动，帮助用户更快的进入App首页。为了测试新版vue3.x升级后代码量的变化，我们还做了两个维度的测试：纵向对比：选择uni-app通用项目模板，在H5、小程序、App平台，分别测试vue2.6和vue3.x的编译包大小。横向对比：使用业界其他优秀的跨端框架创建默认项目模板，记录编译包大小，以及uni-app版本对比Tips：开发阶段关注编译速度，对应npmrundev操作，release阶段关注编译包大小，对应npmrunbuild操作。uni-app不同版本纵向对比我们复用了之前创建的uni-app默认的三个项目模板，template、uni-starter、hello-uniapp，分别测试vue2.6和vue3.x的编译包体积。uni-app项目编译包体积收集方法：编译到对应平台后，记录编译文件夹大小。H5平台H5平台编译代码量记录如下：从统计结果来看，vue3.x版本的uni-app，在H5平台编译包体积至少减少了30%。H5平台的瘦身优化主要得益于对uni-app框架底层的全面重构，实现了更彻底的tree-shaking优化。小程序平台微信小程序平台编译代码量记录如下：从统计结果来看，vue3.x版本的uni-app在小程序平台上也有大幅缩减。AppplatformAppplatform编译后的代码量记录如下：从统计结果来看，vue3.x版本的uni-app根据项目的不同，在App平台上会有不同程度的减重。从理论上讲，项目中的页面模板越复杂，App平台的瘦身效果就越明显。业界优秀框架横向对比在编译代码量方面，我们也和业界优秀的跨端框架Taro进行了对比。我们复用了前几章创建的三个Taro工程，分别编译到H5平台和小程序平台，并计算了它们的编译量。后源代码文件夹大小。从图中可以看出，vue3版本的uni-app编译包体积是H5平台上最小的，只有友商的十分之一左右。我们继续测试，将不同版本的框架发布到微信小程序平台，并记录编译包大小：从图中可以看出，vue3版本的uni-app在小程序上的编译包大小最小平台。Tips：细心的开发者会发现，所有框架版本编译成小程序的代码包体积都比H5平台小很多。平台需要跨端框架自己实现内置组件和接口，所以H5平台的代码包一般比较大。总结综上所述，我们用数字来说明基于vue3版本开发uni-app项目的诸多优势，再回顾一下：语法多，编译快，运行好，代码少，还是要升级新版本uni-app试试？对文试过程和结果有疑问的同学欢迎在github上提交issue，欢迎指正。
