如何優化uniapp專案？分享幾種優化方案及建議

如何優化uniapp專案？以下這篇文章跟大家分享一些uniapp專案優化方式及建議，希望對大家有幫助。

介紹：效能優化自古以來就是重中之重，關於uniapp專案最佳化方式最全整理，會根據開發情況進行補充

1.複雜頁面資料區封裝成元件

場景：

例如專案裡包含類似論壇頁面：點選一個點讚圖標，讚數要立即1，會引發頁面層級所有的資料從js層向視圖層的同步，造成整個頁面的資料更新，造成點擊延遲卡頓

##優化方案：

對於複雜頁面，更新某個區域的資料時，需要把這個區域做成元件，這樣更新資料時就只更新這個元件

註：app- nvue和h5不存在此問題；造成差異的原因是小程式目前只提供了元件差量更新的機制，不能自動計算所有頁面差量

2.避免使用大圖

場景：

頁面中若大量使用大圖資源，會造成頁面切換的卡頓，導致系統記憶體升高，甚至白屏崩潰；對大體積的二進位進行base64 ，也非常耗費資源

#優化方案：

圖片請壓縮後使用，避免大圖，必要時可以考慮雪碧圖或svg，簡單程式碼能實現的就不要圖片

3.小程式、APP分包處理pages過多

前往官網手冊查看設定

4.圖片懶載入

功能描述：

此功能只對微信小程式、 App、百度小程式、位元組跳動小程式有效，預設開啟

前往uView手冊查看設定

5.禁止濫用本機儲存

不要濫用本地存儲，局部頁面之間的傳參用url，如果用本地存儲傳遞資料要命名規範和按需銷毀

6.可在外部定義變量

在 uni-app 中，定義在data 裡面的資料每次變更時都會通知視圖層重新渲染頁面；所以如果不是視圖所需的變量，可以不定義在data 中，可在外部定義變數或直接掛載在vue實例上，以避免造成資源浪費

7.分批載入資料最佳化頁面渲染

##「場景：

頁面初始化時，邏輯層一次向視圖層傳遞很大的數據，使視圖層一次渲染大量節點，可能造成通訊變慢、頁面切換卡頓

#優化方案：

以局部更新頁面的方式渲染頁面；如：服務端返回100條數據，可進行分批加載，一次加載50條， 500ms  後進行下一次加載

8.避免視圖層與邏輯層頻繁進行通訊

#減少 scroll-view  元件的 scroll  事件監聽，當監聽 scroll-view的捲動事件時，視圖層會頻繁的向邏輯層發送資料
監聽 scroll-view  元件的捲動事件時，不要即時的改變 scroll-top / scroll-left  屬性，因為當監聽捲動時，視圖層向邏輯層通訊，改變 scroll-top / scroll-left  時，邏輯層再向視圖層通訊，這樣就可能造成通訊卡頓
注意onPageScroll  的使用， onPageScroll  進行監聽時，視圖層會頻繁的向邏輯層發送資料
多使用css動畫，而不是透過js的定時器操作介面做動畫
如需在canvas 裡做跟手操作， app端建議使用renderjs ，小程式端建議使用web-view 元件；web-view 裡的頁面沒有邏輯層和視圖層分離的概念，自然也不會有通訊折損

9.CSS優化

要知道哪些屬性是有繼承效果的，像字體、字體顏色、文字大小都是繼承的，禁止沒有意義的重複程式碼

10.善用節流和防手震

防手震：

等待n秒後執行某函數，若等待期間再次觸發，則等待時間重新初始化

#節流：

觸發事件n秒內只執行一次，n秒未過，再次觸發無效

11.優化頁面切換動畫

場景：

頁面初始化時存在大量圖片或原生元件渲染和大量資料通訊，會發生新頁面渲染和窗體進入動畫搶資源，造成頁面切換卡頓、掉幀

優化方案：

• 建議延時100ms~300ms 渲染圖片或複雜原生元件，分批進行資料通訊，以減少一次渲染的節點數量

• #App 端動畫效果可以自訂; popin/popout 的雙窗體連動擠壓動畫效果對資源的消耗更大，如果動畫期間頁面裡在執行耗時的js，可能會造成動畫掉幀;此時可以使用消耗資源較小的動畫效果，例如slide-in-right / slide-out-right

• #App-nvue 和H5 ，也支援頁面預載，uni.preloadPage，可以提供更好的使用體驗

#12.優化背景色閃白

場景：

進入新頁面時背景閃白，如果頁面背景是深色，在vue頁面中可能會發生新窗體剛開始動畫時是灰白色背景，動畫結束時才變為深色背景，造成快閃畫面

最佳化方案：

• #將樣式寫在  App.vue  裡，加速頁面樣式渲染速度； App.vue  裡面的樣式是全域樣式，每次開啟頁面都會優先載入  App.vue  裡面的樣式，然後載入普通vue 頁面的樣式

• app端還可以在pages .json 的頁面的style 裡單獨配置頁面原生背景色，例如在globalStyle->style->app-plus->background 下配置全域背景色

#

"style": { "app-plus": { "background":"#000000" } }

• #nvue頁面不存在此問題，也可以變更為nvue頁面

#13.最佳化啟動速度

#工程程式碼越多，包括背景圖和本機字體檔案越大，對小程式啟動速度有影響，應注意控制體積

App端的splash 關閉有白屏檢測機制，如果首頁一直白屏或首頁本身就是一個空的中轉頁面，可能會造成splash 10秒才關閉

• App端使用v3編譯器，首頁為nvue頁面時，並設定為

  fast啟動模式
，此時App啟動速度最快

• #App設定為純nvue專案（manifest裡設定app-plus下的renderer:" native"），這種專案的啟動速度更快，2秒鐘即可完成啟動；因為它整個應用都使用原生渲染，不載入基於webview的那套框架

• 14.優化套件體積
uni-app 發行到小程式時，如果使用了es6 轉es5 、css 對齊的功能，可能會增加程式碼體積，可以設定這些編譯功能是否開啟
uni-app 的H5端，uni-app 提供了搖樹最佳化機制，未搖樹最佳化前的uni-app 整體套件體積約500k ，伺服器部署gzip 後162k。開啟搖樹優化需在

manifest配置

uni-app 的App端，Android 基礎引擎約9M ，App 也提供了擴充模組，例如地圖、藍牙等等，打包時如不需要這些模組，可以裁剪掉，以縮小發行包；體積在manifest.json-App 模組權限裡可以選擇

App端支援如果選擇純nvue專案（manifest裡設定app-plus下的renderer:"native"），包體積可以進一步減少2M左右

App端在HBuilderX 2.7 後，App 端下掉了非v3的編譯模式，套件體積下降了3M

15.禁止濫用外部js外掛

#####描述：##### ####有官方API的就不要額外引用js插件增加項目體積#########例如：#########url傳參加密直接用encodeURIComponent() 和decodeURIComponent() ######推薦：《###uniapp教學###》###

以上是如何優化uniapp專案？分享幾種優化方案及建議的詳細內容。更多資訊請關注PHP中文網其他相關文章！