Vue3 和 Vite 雙向加持，uni-app 性能再次提升
uni-app 對 vue3 & Vite 的升級，是一個漸進式過程：
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 框架主要做了三大改進：
重寫框架內(nèi)核：基于 vue3 + ts 重寫內(nèi)置組件和API，實現(xiàn)更徹底、更高效的 tree-shaking；
新增支持 Vite 構(gòu)建工具，在H5平臺實現(xiàn)秒開預(yù)覽；
新增支持 Vue3.x，實現(xiàn)更靈活的開發(fā)方式，及更高的運行性能；
基于這三大改進，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 也擴展了更多的語法，如：
更完善的模板語法支持（如
class、style支持函數(shù)、變量等，不再局限數(shù)組、對象類型）更完整的
props支持（如傳遞函數(shù)）更完善的
slot支持（如作用域插槽）
更快的編譯速度
開發(fā)者日常工作中，最無聊的就是等待編譯構(gòu)建。
某乎上還有一個”程序員在等待編譯的時候都做什么？“的討論帖，可見編譯時間對開發(fā)者而言，是一個多么尷尬無聊的碎片時間。
uni-app 本次升級 vue3 & Vite 后，在編譯時間上有多少改進？帶給開發(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ū)Ρ龋?/span>挑選 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 版本進行對比
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平臺，進行多次編譯測試，并求其均值后，獲得如下數(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 進行構(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官網(wǎng)）
本著這個十倍效率提升，小伙伴們還不趕緊上手試試？
小程序平臺
對 uni-app 的三個模板項目運行到微信小程序平臺，多次編譯測試，并求其均值后，獲得如下數(shù)據(jù)：
從上圖對比數(shù)據(jù)來看，我們可以得出結(jié)論：小程序平臺， vue 3.x 版本下的運行編譯，相比 vue 2.6 版本，編譯性能至少提升30%；且項目越復(fù)雜，編譯性能提升越明顯，可以達到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 進行縱向?qū)Ρ韧?，我們還使用業(yè)內(nèi)優(yōu)秀的跨端框架Taro，創(chuàng)建空的項目模板，進行橫向?qū)Ρ葴y試。
具體測試方案：
安裝
Taro的最新cli，本文測試時使用的版本為"@tarojs/taro": "3.3.16"使用
Taro init命令，分別選擇react、vue、vue3框架，創(chuàng)建三個默認(rèn)項目模板，三個項目名稱分別為taro3-react、taro3-vue、taro3-vue3，如下圖：
使用
npm run dev:h5，運行到H5平臺進行預(yù)覽，記錄每次預(yù)覽編譯時間，重復(fù)執(zhí)行，求其均值
關(guān)于Taro編譯時間的計算方案：
開發(fā)一個
Taro擴展插件，插件規(guī)范參考Taro官網(wǎng) - 插件功能在
ctx.onBuildStart中記錄開始編譯時間在
ctx.onBuildFinish中記錄編譯結(jié)束時間兩者的時間差，即為編譯過程消耗時間
然后使用 uni-app 的cli命令行，創(chuàng)建基于 vue 3.x 的空項目模板，項目命名為uni-app-vue3。
我們使用各自框架的命令行，將如上創(chuàng)建的5個項目分別編譯到H5平臺和小程序平臺，多次測試，并求其均值。
同框架版本在H5平臺上的編譯時間，結(jié)果如下：
從圖中可以看出， uni-app 的 vue3 版本，在H5平臺上的首頁編譯預(yù)覽性能是遙遙領(lǐng)先的。這個遙遙有多遠呢？這么講吧，你都編譯20次了，友商第一次還沒完呢。
繼續(xù)編譯到微信小程序平臺，多次測試，求其均值，結(jié)果如下：
從圖中可以看出， uni-app 的 vue 3.x 版本，在微信小程序平臺上的編譯性能也是遙遙領(lǐng)先的，這個遙遙也不近。
更好的運行速度
開發(fā)環(huán)節(jié)編譯快了，那面向最終用戶的軟件，運行性能怎么樣？
我們進入性能測試章節(jié)。
測試方案：
開發(fā)內(nèi)容：開發(fā)一個仿微博小程序首頁的復(fù)雜長列表，支持下拉刷新、上拉翻頁、點贊。
界面如下：
測試機型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 開發(fā)版) 、微信版本 8.0.16
準(zhǔn)備工作：每次開始測試前，殺掉各App進程、清空內(nèi)存，保證測試機環(huán)境基本一致；每次從本地讀取靜態(tài)數(shù)據(jù)，屏蔽網(wǎng)絡(luò)差異。
評測點：長列表中的某個組件，比如點贊組件，點擊時是否能及時的修改未贊和已贊狀態(tài)？
測試計時方式：
選中某微博，點擊“點贊”按鈕，實現(xiàn)點贊狀態(tài)狀態(tài)切換（已贊高亮、未贊灰色），
點贊按鈕 onclick函數(shù)開頭開始計時，setData回調(diào)函數(shù)開頭結(jié)束計時；
在小米手機上進行多次測試，求其平均值，結(jié)果如下：
從表格中可以看出：
隨著頁面記錄的增加， vue 2.6 版本的 uni-app 項目，點贊組件響應(yīng)時間快速增加，響應(yīng)越來越慢；
基于 vue 3.x 的 uni-app 項目，點贊組件的響應(yīng)時間跟頁面條數(shù)無關(guān)，一直保持極高的響應(yīng)靈敏度，性能體驗遠高于 vue 2.6 版本。
從這個常見的長列表組件響應(yīng)實驗來看， vue 3.x 的性能體驗要遠高于 vue 2.6 版本。
更小的代碼體積
項目發(fā)行后的代碼體積，是一個很重要的考量指標(biāo)：
H5平臺：更小的代碼體積，可以幫助開發(fā)者節(jié)省服務(wù)端帶寬及CDN流量，可實現(xiàn)更快的資源加載及頁面渲染；
小程序平臺：更小的代碼體積，可加速小程序包的下載（甚至可能免了分包加載的繁瑣），幫助用戶更快進入小程序業(yè)務(wù)界面；
App平臺：更小的代碼體積，可實現(xiàn)更快的App啟動，幫助用戶更快進入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 版本進行對比
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 的 vue 3.x 版本，在H5平臺上的編譯包體積至少瘦身30%以上。
H5平臺的瘦身優(yōu)化，主要得益于 uni-app 框架的底層全面重構(gòu)，實現(xiàn)了更徹底的搖樹優(yōu)化。
小程序平臺
微信小程序平臺編譯后代碼體積記錄如下：
從統(tǒng)計結(jié)果來看， uni-app 的 vue 3.x 版本，在小程序平臺上也有大幅瘦身。
App平臺
App平臺編譯后代碼體積記錄如下：
從統(tǒng)計結(jié)果來看， uni-app 的 vue 3.x 版本，在App平臺上根據(jù)項目不同，會有不同幅度的瘦身。
從理論上來講，項目中的頁面模板越復(fù)雜，App平臺的瘦身效果越明顯。
業(yè)內(nèi)優(yōu)秀框架橫向?qū)Ρ?/h3>
關(guān)于編譯后的代碼體積，我們也和業(yè)內(nèi)優(yōu)秀的跨端框架Taro進行了對比，復(fù)用前面章節(jié)創(chuàng)建的三個Taro項目，分別編譯到H5平臺和小程序平臺，計算其編譯后的源碼文件夾大小。
從圖中可以看出， uni-app 的 vue3 版本，在H5平臺上編譯包體積是最小的，只有友商的十分之一左右。
我們繼續(xù)測試，不同版本框架發(fā)行到微信小程序平臺，記錄其編譯包大?。?/p>
從圖中可以看出， uni-app 的 vue3 版本，在小程序平臺上編譯包體積也是最小的。
Tips：細(xì)心的開發(fā)者會發(fā)現(xiàn)，所有框架版本編譯到小程序上的代碼包體積都遠小于其在H5平臺上的包體積，這是因為小程序由平臺廠商提供內(nèi)置組件及接口實現(xiàn)，而H5平臺則需跨端框架自己實現(xiàn)內(nèi)置組件及接口，故H5平臺的代碼包普遍要大一些。
總結(jié)
綜上，我們以數(shù)字說話，闡述了基于 vue3 版本開發(fā) uni-app 項目的諸多優(yōu)勢，再回顧一遍：
更多的語法
更快的編譯
更好的運行
更少的代碼
你還不趕緊升級新版 uni-app 來試試嗎？
對文本測試過程及結(jié)果有疑問的同學(xué)，歡迎到github上提交issue，歡迎指正。