vue3和vite雙向加持，uni-app性能再次提升

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本次升級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，創建空的項目模板，進行橫向對比測試。

具體測試方案：

安裝Taro的最新cli，本文測試時使用的版本爲"@Tarojs/Taro": "3.3.16"
使用Taro init命令，分別選擇react、vue、vue3框架，創建三個默認項目模板，三個項目名稱分別爲taro3-react、taro3-vue、taro3-vue3，如下圖：
使用npm run dev:h5，運行到H5平臺進行預覽，記錄每次預覽編譯時間，重複執行，求其均值

關於Taro編譯時間的計算方案：

開發一個Taro擴展插件，插件規範參考Taro官網 - 插件功能
在ctx.onBuildStart中記錄開始編譯時間
在ctx.onBuildFinish中記錄編譯結束時間
兩者的時間差，即爲編譯過程消耗時間

然後使用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操作