Vue3 和 Vite 雙向(xiàng)加持，uni-app 性能(néng)再次提升

2022-01-18

uni-app 對(duì) vue3 & Vite 的升級，是一個漸進(jìn)式過(guò)程：

2020年9月：小程序平台支持 vue3 開(kāi)發(fā)，小程序平台編譯器依然使用webpack；
2021年5月：H5平台支持 vue3 開(kāi)發(fā)，H5平台編譯器升級爲 Vite；
2021年8月：App平台支持 vue3 開(kāi)發(fā)，App平台編譯器升級爲 Vite；
2021年11月：小程序平台編譯器升級爲 Vite；

至此，uni-app 在全平台支持了 Vite 編譯及Vue 3.x 運行。

so，這(zhè)場持續一年之久的大版本升級，究竟給 uni-app 項目帶來了哪些提升？

是時(shí)候總結（秀）一波了。

新版 uni-app 框架主要做了三大改進(jìn)：

重寫框架内核：基于 vue3 + ts 重寫内置組件和API，實現更徹底、更高效的 tree-shaking；
新增支持 Vite 構建工具，在H5平台實現秒開(kāi)預覽；
新增支持 Vue3.x，實現更靈活的開(kāi)發(fā)方式，及更高的運行性能(néng)；

基于這(zhè)三大改進(jìn)，uni-app 項目獲得了多快好(hǎo)省四大收益：

更多的語法支持，支持組合式API，業務聚焦，開(kāi)發(fā)效率更高；
更快的編譯速度，H5平台十倍加速，小程序、App加速30%以上；
更好(hǎo)的運行性能(néng)，用戶端響應更快，體驗更好(hǎo)；
更小的代碼體積，瘦身30%以上，更省體積、更省流量

更快的編譯速度

開(kāi)發(fā)者日常工作中，最無聊的就(jiù)是等待編譯構建。

某乎上還(hái)有一個”程序員在等待編譯的時(shí)候都(dōu)做什麼(me)？“的讨論帖，可見編譯時(shí)間對(duì)開(kāi)發(fā)者而言，是一個多麼(me)尴尬無聊的碎片時(shí)間。

uni-app 本次升級 vue3 & Vite 後(hòu)，在編譯時(shí)間上有多少改進(jìn)？帶給開(kāi)發(fā)者多少福利？我們安排真實測試，以數據說(shuō)話。

測試環境說(shuō)明：

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

關于編譯速度，我們做了兩(liǎng)個維度的對(duì)比：

縱向(xiàng)對(duì)比：挑選 uni-app 常用項目模闆，在H5、小程序、App平台，分别測試 vue 2.6 和 vue 3.x 的編譯時(shí)間
橫向(xiàng)對(duì)比：使用業内優秀的其它跨端框架，創建默認項目模闆，記錄其編譯時(shí)間，和 uni-app 的 vue 3.x 版本進(jìn)行對(duì)比

uni-app 曆史版本縱向(xiàng)對(duì)比

我們選擇uni-app默認模闆、uni-starter、hello-uniapp三個項目模闆，分别測試 vue 2.6 和 vue 3.x 的編譯時(shí)間。

uni-app項目編譯時(shí)間的采集方式：

vue 2.6 版編譯時(shí)間 = webpack 的 stats.endTime - stats.startTime
vue 3.x 版編譯時(shí)間 = 構建工具入口處記錄 global.vite_start_time = performance.now()，構建工具編譯完成(chéng)時(shí)：performance.now() - global.vite_start_time

H5平台

對(duì) uni-app 的三個項目模闆分别運行到H5平台，進(jìn)行多次編譯測試，并求其均值後(hòu)，獲得如下數據：

由此，我們可以觀察到：

在 vue 2.6 環境下，随著(zhe)項目複雜度的提升，H5首頁預覽所需編譯時(shí)間會(huì)直線增加；這(zhè)是因爲在 vue 2.6 版本下，雖然僅預覽首頁，但依然會(huì)使用 webpack 編譯整個項目資源；故項目越複雜，編譯時(shí)間越長(cháng)；
在 vue 3.x 環境下，H5首頁預覽的編譯時(shí)間跟項目複雜度也有關系，但增幅不大；這(zhè)是因爲在 vue 3.x 版本下，使用 Vite 進(jìn)行構建，預覽首頁時(shí)僅編譯首頁及首頁所依賴資源，不會(huì)編譯其它頁面(miàn)資源。

通過(guò)圖表對(duì)比，我們可以直觀得出結論：vue 3.x 環境下的首頁編譯時(shí)間，平均不到 vue 2.6 環境下的十分之一。

換言之， vue 3.x 版本下的首頁編譯速度，相比 vue 2.6 版本，有十倍效率提升。

這(zhè)個十倍效率提升，主要得益于新版采用Vite作爲構建工具，由此帶來了兩(liǎng)大好(hǎo)處：

使用原生 ESM 文件，無需打包，實現極速的服務啓動；
預覽（運行）使用esbuild作爲打包工具，相比 vue 2.6 環境下的webpack，構建速度快 10-100 倍（這(zhè)不是我們誇大，詳見esbuild官網）

本著(zhe)這(zhè)個十倍效率提升，小夥伴們還(hái)不趕緊上手試試？

小程序平台

對(duì) uni-app 的三個模闆項目運行到微信小程序平台，多次編譯測試，并求其均值後(hòu)，獲得如下數據：

從上圖對(duì)比數據來看，我們可以得出結論：小程序平台， vue 3.x 版本下的運行編譯，相比 vue 2.6 版本，編譯性能(néng)至少提升30%；且項目越複雜，編譯性能(néng)提升越明顯，可以達到40% ~ 50%。

App平台

對(duì) uni-app 的三個項目模闆繼續運行到App平台，多次編譯測試，并求其均值後(hòu)，獲得如下數據：

從上圖對(duì)比數據來看，我們可以得出結論：App平台， vue 3.x 版本下的運行編譯，相比 vue 2.6 版本，編譯性能(néng)提升將(jiāng)近50%。

雖沒(méi)有H5平台的十倍效率提升那麼(me)刺激，但將(jiāng)近50%的速度提升，經(jīng)常開(kāi)發(fā)小程序/App的小夥伴，還(hái)不心動？

業内優秀框架橫向(xiàng)對(duì)比

除了采用不同版本的 uni-app 進(jìn)行縱向(xiàng)對(duì)比外，我們還(hái)使用業内優秀的跨端框架Taro，創建空的項目模闆，進(jìn)行橫向(xiàng)對(duì)比測試。

具體測試方案：

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

關于Taro編譯時(shí)間的計算方案：

開(kāi)發(fā)一個Taro擴展插件，插件規範參考Taro官網 - 插件功能(néng)
在ctx.onBuildStart中記錄開(kāi)始編譯時(shí)間
在ctx.onBuildFinish中記錄編譯結束時(shí)間
兩(liǎng)者的時(shí)間差，即爲編譯過(guò)程消耗時(shí)間

然後(hòu)使用 uni-app 的cli命令行，創建基于 vue 3.x 的空項目模闆，項目命名爲uni-app-vue3。

我們使用各自框架的命令行，將(jiāng)如上創建的5個項目分别編譯到H5平台和小程序平台，多次測試，并求其均值。

同框架版本在H5平台上的編譯時(shí)間，結果如下：

從圖中可以看出， uni-app 的 vue3 版本，在H5平台上的首頁編譯預覽性能(néng)是遙遙領先的。這(zhè)個遙遙有多遠呢？這(zhè)麼(me)講吧，你都(dōu)編譯20次了，友商第一次還(hái)沒(méi)完呢。

繼續編譯到微信小程序平台，多次測試，求其均值，結果如下：

從圖中可以看出， uni-app 的 vue 3.x 版本，在微信小程序平台上的編譯性能(néng)也是遙遙領先的，這(zhè)個遙遙也不近。

更好(hǎo)的運行速度

開(kāi)發(fā)環節編譯快了，那面(miàn)向(xiàng)最終用戶的軟件，運行性能(néng)怎麼(me)樣(yàng)？

我們進(jìn)入性能(néng)測試章節。

測試方案：

開(kāi)發(fā)内容：開(kāi)發(fā)一個仿微博小程序首頁的複雜長(cháng)列表，支持下拉刷新、上拉翻頁、點贊。
界面(miàn)如下：
測試機型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 開(kāi)發(fā)版) 、微信版本 8.0.16
準備工作：每次開(kāi)始測試前，殺掉各App進(jìn)程、清空内存，保證測試機環境基本一緻；每次從本地讀取靜态數據，屏蔽網絡差異。
評測點：長(cháng)列表中的某個組件，比如點贊組件，點擊時(shí)是否能(néng)及時(shí)的修改未贊和已贊狀态？

測試計時(shí)方式：

選中某微博，點擊“點贊”按鈕，實現點贊狀态狀态切換（已贊高亮、未贊灰色），
點贊按鈕 onclick函數開(kāi)頭開(kāi)始計時(shí)，setData回調函數開(kāi)頭結束計時(shí)；

在小米手機上進(jìn)行多次測試，求其平均值，結果如下：

從表格中可以看出：

随著(zhe)頁面(miàn)記錄的增加， vue 2.6 版本的 uni-app 項目，點贊組件響應時(shí)間快速增加，響應越來越慢；
基于 vue 3.x 的 uni-app 項目，點贊組件的響應時(shí)間跟頁面(miàn)條數無關，一直保持極高的響應靈敏度，性能(néng)體驗遠高于 vue 2.6 版本。

從這(zhè)個常見的長(cháng)列表組件響應實驗來看， vue 3.x 的性能(néng)體驗要遠高于 vue 2.6 版本。

更小的代碼體積

項目發(fā)行後(hòu)的代碼體積，是一個很重要的考量指标：

H5平台：更小的代碼體積，可以幫助開(kāi)發(fā)者節省服務端帶寬及CDN流量，可實現更快的資源加載及頁面(miàn)渲染；
小程序平台：更小的代碼體積，可加速小程序包的下載（甚至可能(néng)免了分包加載的繁瑣），幫助用戶更快進(jìn)入小程序業務界面(miàn)；
App平台：更小的代碼體積，可實現更快的App啓動，幫助用戶更快進(jìn)入App首頁

爲了測試 vue 3.x 新版升級後(hòu)，代碼體積的變化，我們同樣(yàng)做了兩(liǎng)個維度的測試：

縱向(xiàng)對(duì)比：選擇 uni-app 常用項目模闆，在H5、小程序、App平台，分别測試 vue 2.6 和 vue 3.x 的編譯包大小
橫向(xiàng)對(duì)比：使用業内優秀的其它跨端框架，創建默認項目模闆，記錄其編譯後(hòu)的包體積大小，和 uni-app 版本進(jìn)行對(duì)比

Tips：

開(kāi)發(fā)階段重在編譯速度，對(duì)應npm run dev操作
發(fā)行階段重在編譯包大小，對(duì)應npm run build操作