uni-app對vue3 & Vite的升級，是一個漸進(jìn)式過程：
- 2020年9月：小程序平臺支持 vue3 開發(fā)伐蒂，小程序平臺編譯器依然使用webpack；
- 2021年5月：H5平臺支持 vue3 開發(fā)肛鹏，H5平臺編譯器升級為 Vite逸邦；
- 2021年8月：App平臺支持 vue3 開發(fā)，App平臺編譯器升級為 Vite在扰；
- 2021年11月：小程序平臺編譯器升級為 Vite缕减；
至此，uni-app在全平臺支持了 Vite 編譯及Vue 3.x 運行芒珠。
so桥狡，這場持續(xù)一年之久的大版本升級，究竟給uni-app項目帶來了哪些提升妓局？
是時候總結(jié)（秀）一波了总放。
新版 uni-app 框架主要做了三大改進(jìn)：
- 重寫框架內(nèi)核：基于
vue3 + ts重寫內(nèi)置組件和API，實現(xiàn)更徹底好爬、更高效的tree-shaking局雄； - 新增支持 Vite 構(gòu)建工具，在H5平臺實現(xiàn)秒開預(yù)覽存炮；
- 新增支持 Vue3.x炬搭，實現(xiàn)更靈活的開發(fā)方式，及更高的運行性能穆桂；
基于這三大改進(jìn)宫盔，uni-app項目獲得了多快好省四大收益：
- 更多的語法支持，支持組合式API享完，業(yè)務(wù)聚焦灼芭，開發(fā)效率更高；
- 更快的編譯速度般又，H5平臺十倍加速彼绷，小程序巍佑、App加速30%以上；
- 更好的運行性能寄悯，用戶端響應(yīng)更快萤衰，體驗更好；
- 更小的代碼體積猜旬，瘦身30%以上脆栋，更省體積、更省流量
更多的語法支持
新版uni-app支持Vue 3.x框架洒擦，支持組合式API椿争，可實現(xiàn)更聚焦的業(yè)務(wù)開發(fā)。
Vue 3.x的一些新增特性熟嫩，uni-app也已經(jīng)完全支持丘薛，如：
- 支持
<script setup> - 支持
<style scoped>、<style module>邦危、State-Driven Dynamic CSS(v-bind) - 支持
jsx洋侨、tsx（h5,app 平臺支持，小程序不支持）
另外倦蚪，在小程序平臺希坚，新版uni-app也擴(kuò)展了更多的語法，如：
- 更完善的模板語法支持（如
class陵且、style支持函數(shù)裁僧、變量等，不再局限數(shù)組慕购、對象類型） - 更完整的
props支持（如傳遞函數(shù)） - 更完善的
slot支持（如作用域插槽）
更快的編譯速度
開發(fā)者日常工作中聊疲，最無聊的就是等待編譯構(gòu)建。
某乎上還有一個”程序員在等待編譯的時候都做什么沪悲？“的討論帖获洲，可見編譯時間對開發(fā)者而言，是一個多么尷尬無聊的碎片時間殿如。
uni-app本次升級vue3 & Vite后贡珊，在編譯時間上有多少改進(jìn)？帶給開發(fā)者多少福利涉馁？我們安排真實測試门岔，以數(shù)據(jù)說話。
測試環(huán)境說明：
硬件：RedmiBook 14 二代
處理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
內(nèi)存：16.0 GB
操作系統(tǒng)：Windows 11 專業(yè)版 64 位操作系統(tǒng)
關(guān)于編譯速度烤送，我們做了兩個維度的對比：
- 縱向?qū)Ρ龋禾暨x
uni-app常用項目模板寒随，在H5、小程序、App平臺妻往，分別測試vue 2.6和vue 3.x的編譯時間 - 橫向?qū)Ρ龋菏褂脴I(yè)內(nèi)優(yōu)秀的其它跨端框架逢防，創(chuàng)建默認(rèn)項目模板，記錄其編譯時間蒲讯，和
uni-app的vue 3.x版本進(jìn)行對比
uni-app 歷史版本縱向?qū)Ρ?/h3>
我們選擇uni-app默認(rèn)模板、uni-starter灰署、hello-uniapp三個項目模板判帮，分別測試vue 2.6和vue 3.x的編譯時間。
uni-app項目編譯時間的采集方式：
-
vue 2.6版本編譯時間 = webpack 的 stats.endTime - stats.startTime -
vue 3.x版本編譯時間 = 構(gòu)建工具入口處記錄 global.__vite_start_time = performance.now()溉箕，構(gòu)建工具編譯完成時：performance.now() - global.__vite_start_time
H5平臺
對uni-app的三個項目模板分別運行到H5平臺晦墙，進(jìn)行多次編譯測試，并求其均值后肴茄，獲得如下數(shù)據(jù)：
由此晌畅，我們可以觀察到：
- 在
vue 2.6環(huán)境下，隨著項目復(fù)雜度的提升寡痰，H5首頁預(yù)覽所需編譯時間會直線增加抗楔；這是因為在vue 2.6版本下，雖然僅預(yù)覽首頁拦坠，但依然會使用webpack編譯整個項目資源连躏；故項目越復(fù)雜，編譯時間越長贞滨； - 在
vue 3.x環(huán)境下入热，H5首頁預(yù)覽的編譯時間跟項目復(fù)雜度也有關(guān)系，但增幅不大晓铆；這是因為在vue 3.x版本下勺良，使用Vite進(jìn)行構(gòu)建，預(yù)覽首頁時僅編譯首頁及首頁所依賴資源骄噪，不會編譯其它頁面資源尚困。
通過圖表對比，我們可以直觀得出結(jié)論：vue 3.x環(huán)境下的首頁編譯時間链蕊，平均不到vue 2.6環(huán)境下的十分之一尾组。
換言之，vue 3.x版本下的首頁編譯速度示弓，相比vue 2.6版本讳侨，有十倍效率提升。
這個十倍效率提升奏属，主要得益于新版采用Vite作為構(gòu)建工具跨跨，由此帶來了兩大好處：
- 使用原生 ESM 文件，無需打包，實現(xiàn)極速的服務(wù)啟動勇婴；
- 預(yù)覽（運行）使用
esbuild作為打包工具忱嘹，相比vue 2.6環(huán)境下的webpack，構(gòu)建速度快 10-100 倍（這不是我們夸大耕渴，詳見esbuild）
本著這個十倍效率提升拘悦，小伙伴們還不趕緊上手試試？
小程序平臺
對uni-app的三個模板項目運行到小程序平臺橱脸，多次編譯測試础米，并求其均值后，獲得如下數(shù)據(jù)：
從上圖對比數(shù)據(jù)來看添诉，我們可以得出結(jié)論：小程序平臺屁桑，vue 3.x版本下的運行編譯，相比vue 2.6版本栏赴，編譯性能至少提升30%蘑斧；且項目越復(fù)雜，編譯性能提升越明顯须眷，可以達(dá)到40% ~ 50%竖瘾。
App平臺
對uni-app的三個項目模板繼續(xù)運行到App平臺，多次編譯測試花颗，并求其均值后准浴，獲得如下數(shù)據(jù)：
從上圖對比數(shù)據(jù)來看，我們可以得出結(jié)論：App平臺捎稚，vue 3.x版本下的運行編譯乐横，相比vue 2.6版本，編譯性能提升將近50%。
雖沒有H5平臺的十倍效率提升那么刺激，但將近50%的速度提升彼水，經(jīng)常開發(fā)小程序/App的小伙伴，還不心動催什？
業(yè)內(nèi)優(yōu)秀框架橫向?qū)Ρ?/h3>
除了采用不同版本的uni-app進(jìn)行縱向?qū)Ρ韧猓覀冞€使用業(yè)內(nèi)優(yōu)秀的跨端框架Taro宰睡，創(chuàng)建空的項目模板蒲凶，進(jìn)行橫向?qū)Ρ葴y試。
具體測試方案：
- 安裝
Taro的最新cli拆内，本文測試時使用的版本為"@Tarojs/Taro": "3.3.16" - 使用
Taro init命令旋圆，分別選擇react、vue麸恍、vue3框架灵巧，創(chuàng)建三個默認(rèn)項目模板搀矫，三個項目名稱分別為taro3-react、taro3-vue刻肄、taro3-vue3瓤球，如下圖：
image - 使用
npm run dev:h5，運行到H5平臺進(jìn)行預(yù)覽敏弃，記錄每次預(yù)覽編譯時間卦羡，重復(fù)執(zhí)行，求其均值
關(guān)于Taro編譯時間的計算方案：
- 開發(fā)一個
Taro擴(kuò)展插件麦到，插件規(guī)范參考Taro官網(wǎng) - 插件功能 - 在
ctx.onBuildStart中記錄開始編譯時間 - 在
ctx.onBuildFinish中記錄編譯結(jié)束時間 - 兩者的時間差绿饵，即為編譯過程消耗時間
然后使用uni-app的cli命令行，創(chuàng)建基于vue3.x的空項目模板隅要，項目命名為uni-app-vue3。
我們使用各自框架的命令行董济，將如上創(chuàng)建的5個項目分別編譯到H5平臺和小程序平臺步清，多次測試，并求其均值虏肾。
同框架版本在H5平臺上的編譯時間廓啊，結(jié)果如下：
從圖中可以看出，uni-app的vue3版本封豪，在H5平臺上的首頁編譯預(yù)覽性能是遙遙領(lǐng)先的谴轮。這個遙遙有多遠(yuǎn)呢？這么講吧吹埠，你都編譯20次了第步，友商第一次還沒完呢。
繼續(xù)編譯到小程序平臺缘琅，多次測試粘都，求其均值，結(jié)果如下：
從圖中可以看出刷袍，uni-app的vue3版本翩隧，在小程序平臺上的編譯性能也是遙遙領(lǐng)先的，這個遙遙也不近呻纹。
更好的運行速度
開發(fā)環(huán)節(jié)編譯快了堆生，那面向最終用戶的軟件，運行性能怎么樣雷酪？
我們進(jìn)入性能測試章節(jié)淑仆。
測試方案：
- 開發(fā)內(nèi)容：開發(fā)一個仿微博小程序首頁的復(fù)雜長列表，支持下拉刷新哥力、上拉翻頁糯景、點贊。
-
界面如下：
image - 測試機(jī)型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 開發(fā)版) 蟀淮、微信版本 8.0.16
- 準(zhǔn)備工作：每次開始測試前最住，殺掉各App進(jìn)程、清空內(nèi)存怠惶，保證測試機(jī)環(huán)境基本一致涨缚；每次從本地讀取靜態(tài)數(shù)據(jù)，屏蔽網(wǎng)絡(luò)差異策治。
- 評測點：長列表中的某個組件脓魏，比如點贊組件，點擊時是否能及時的修改未贊和已贊狀態(tài)通惫？
測試計時方式：
- 選中某微博茂翔，點擊“點贊”按鈕，實現(xiàn)點贊狀態(tài)狀態(tài)切換（已贊高亮履腋、未贊灰色）珊燎，
- 點贊按鈕 onclick函數(shù)開頭開始計時，setData回調(diào)函數(shù)開頭結(jié)束計時遵湖；
在小米手機(jī)上進(jìn)行多次測試悔政，求其平均值，結(jié)果如下：
| 記錄條數(shù) | 200 | 400 | 600 | 800 | 1000 |
|---|---|---|---|---|---|
| vue2 | 30ms | 43ms | 56ms | 72ms | 90ms |
| vue3 | 8ms | 9ms | 9ms | 8ms | 9ms |
從表格中可以看出：
- 隨著頁面記錄的增加延旧，
vue 2.6版本的uni-app項目谋国，點贊組件響應(yīng)時間快速增加，響應(yīng)越來越慢迁沫； - 基于
vue 3.x的uni-app項目芦瘾，點贊組件的響應(yīng)時間跟頁面條數(shù)無關(guān)，一直保持極高的響應(yīng)靈敏度集畅，性能體驗遠(yuǎn)高于vue 2.6版本旅急。
從這個常見的長列表組件響應(yīng)實驗來看，vue 3.x的性能體驗要遠(yuǎn)高于vue 2.6版本牡整。
更小的代碼體積
項目發(fā)行后的代碼體積藐吮，是一個很重要的考量指標(biāo)：
- H5平臺：更小的代碼體積，可以幫助開發(fā)者節(jié)省服務(wù)端帶寬及CDN流量逃贝，可實現(xiàn)更快的資源加載及頁面渲染谣辞；
- 小程序平臺：更小的代碼體積，可加速小程序包的下載（甚至可能免了分包加載的繁瑣）沐扳，幫助用戶更快進(jìn)入小程序業(yè)務(wù)界面泥从；
- App平臺：更小的代碼體積，可實現(xiàn)更快的App啟動沪摄，幫助用戶更快進(jìn)入App首頁
為了測試vue 3.x新版升級后躯嫉，代碼體積的變化纱烘，我們同樣做了兩個維度的測試：
- 縱向?qū)Ρ龋哼x擇
uni-app常用項目模板，在H5祈餐、小程序擂啥、App平臺，分別測試vue 2.6和vue 3.x的編譯包大小 - 橫向?qū)Ρ龋菏褂脴I(yè)內(nèi)優(yōu)秀的其它跨端框架帆阳，創(chuàng)建默認(rèn)項目模板哺壶，記錄其編譯后的包體積大小，和
uni-app版本進(jìn)行對比
Tips：
- 開發(fā)階段重在編譯速度蜒谤，對應(yīng)
npm run dev操作 - 發(fā)行階段重在編譯包大小山宾，對應(yīng)
npm run build操作
uni-app 不同版本縱向?qū)Ρ?/h3>
我們復(fù)用之前創(chuàng)建的uni-app默認(rèn)模板、uni-starter鳍徽、hello-uniapp三個項目模板资锰，分別測試vue 2.6和vue 3.x的編譯包體積。
uni-app項目編譯包體積的采集方式：編譯到對應(yīng)平臺后阶祭，記錄編譯后文件夾的大小绷杜。
H5平臺
H5平臺編譯后代碼體積記錄如下：
從統(tǒng)計結(jié)果來看，uni-app的vue3.x版本胖翰，在H5平臺上的編譯包體積至少瘦身30%以上接剩。
H5平臺的瘦身優(yōu)化切厘，主要得益于uni-app框架的底層全面重構(gòu)萨咳，實現(xiàn)了更徹底的搖樹優(yōu)化。
小程序平臺
小程序平臺編譯后代碼體積記錄如下：
從統(tǒng)計結(jié)果來看疫稿，uni-app的vue3.x版本培他，在小程序平臺上也有大幅瘦身。
App平臺
App平臺編譯后代碼體積記錄如下：
從統(tǒng)計結(jié)果來看遗座，uni-app的vue3.x版本舀凛，在App平臺上根據(jù)項目不同，會有不同幅度的瘦身途蒋。
從理論上來講猛遍，項目中的頁面模板越復(fù)雜，App平臺的瘦身效果越明顯号坡。
業(yè)內(nèi)優(yōu)秀框架橫向?qū)Ρ?/h3>
關(guān)于編譯后的代碼體積懊烤，我們也和業(yè)內(nèi)優(yōu)秀的跨端框架Taro進(jìn)行了對比，復(fù)用前面章節(jié)創(chuàng)建的三個Taro項目宽堆，分別編譯到H5平臺和小程序平臺腌紧，計算其編譯后的源碼文件夾大小。
從圖中可以看出畜隶，uni-app的vue3版本壁肋，在H5平臺上編譯包體積是最小的号胚，只有友商的十分之一左右。
我們繼續(xù)測試浸遗，不同版本框架發(fā)行到微信小程序平臺猫胁，記錄其編譯包大小：
從圖中可以看出乙帮，uni-app的vue3版本杜漠，在小程序平臺上編譯包體積也是最小的。
Tips：細(xì)心的開發(fā)者會發(fā)現(xiàn)察净，所有框架版本編譯到小程序上的代碼包體積都遠(yuǎn)小于其在H5平臺上的包體積驾茴，這是因為小程序由平臺廠商提供內(nèi)置組件及接口實現(xiàn)，而H5平臺則需跨端框架自己實現(xiàn)內(nèi)置組件及接口氢卡，故H5平臺的代碼包普遍要大一些锈至。
總結(jié)
綜上，我們以數(shù)字說話译秦，闡述了vue3版本uni-app開發(fā)的諸多好處峡捡，再回顧一遍：
- 更多的語法
- 更快的編譯
- 更好的運行
- 更少的代碼
你還不趕緊升級新版uni-app來試試嗎？
對文本測試過程及結(jié)果有疑問的同學(xué)筑悴，歡迎到github上提交issue们拙，歡迎指正。
