原文永久鏈接： https://github.com/AttemptWeb/Record...
將從代碼層面和項目層面，聊一聊微信小程序的性能優化問題，希望有所幫助。也是自己最近的一個總結。(前置知識：微信小程序的視圖層是WebView支持，邏輯層是JSCore支持，邏輯層通過setData與視圖層發生交互。每一個頁面都是一個WebView頁面）詳見：小程序的運行環境
下面的內容不論是使用Taro框架開發，還是微信小程序原生開發，都是適用的。
#代碼層面
通過代碼細節提升性能，而且在這方面，空間是非常大的。對於比較早期的小程序項目，由於代碼細節方面沒有過多的考慮，也導致了開發出的小程序非常的消耗性能。下面將提到的一些點，不論是正在開發的項目，還是在維護的項目，都會有一定的幫助。
#👇· 拆分組件
對於小程序的項目，由於野蠻式開發，不會太多的考慮組件拆分。當然對於關注組件開發的公司，肯定會在早期就做好一定的規划。做好組件的拆分，可以保證組件的復用，大量的減少重復的代碼。（組件開發的思想，目前基本適用所有的前端開發項目）。如何有效拆分組件方法，詳見[譯] 你是如何拆分組件的？。
#👇· 圖片壓縮
在微信小程序項目中，不會在本地存放圖片，基本都是網絡圖片，而網絡圖片的下載，需要消耗一定的時間和內存。較小圖片的大小，可以提升小程序的渲染時間，減少內存的占用。通過CDN靜態資源服務器獲取圖片資源，添加圖片壓縮規則，可以極大的提升性能。
#👇· 減少不必要數據
減少data中的亢余數據。不必要數據，傳入setData會造成不必要的性能消耗。建議：不要直接將接口數據全部保存在data中，只有頁面需要渲染的 數據，才通過setData進行掛載，非必要的數據可以直接掛載在當前頁面page的this上。
let data = { list: [item, item, item, item, item], title: "xxxx", path: 'xx/xx/xx' } // ❌不好的處理 this.setData({ data: data }) // 👌好的處理 只掛載必要參數 this.setData({ dataList: data.list }) this.title = data.title this.path = data.path #👇· 避免頻繁setData
// ❌不好的處理 this.setData({ count: 1 }) this.setData({ count: 2 }) this.setData({ count: 3 }) 三次setData會被全部觸發嘛？是的，會被全部調用。
在微信小程序中，並不像react，把多次操作合並。每次setData的過程，就是一次JSCore邏輯層 和 webView視圖層的交互。過多的交互，會降低小程序的用戶體驗。例如 滑動監聽滾動，操作setData，非常的消耗性能，可以考慮使用節流函數，降低調用頻率。
官方給出的說法是：setData接口的調用涉及邏輯層與渲染層間的線程通信，通信過於頻繁可能導致處理隊列阻塞，界面渲染不及時而導致卡頓，應避免無用的頻繁調用。來修改一下上面的代碼。
// 👌好的處理 let data = { count: 1 } data.count = 2; data.count = 3; this.setData(data) #👇· webView組件開發
靈活性非常強的頁面，同時需要多端使用，建議使用微信小程序提供的webView組件，套用h5頁面進行頁面開發，避免重復開發。當微信小程序包過大之后，也建議使用h5頁面替換開發。詳見webView 組件
<web-view src="{{link}}" bindmessage="bindMes" bindload="bindLoad"/> #項目層面
通過微信小程序項目配置來提升加載性能，下面的方案可以有效的解決問題，不過也要試情況而定。
#👇· 拆分小程序
在包過大的情況下下，可以進行小程序包的拆分，詳見：分包加載。對小程序進行分包，可以優化小程序首次啟動的下載時間，以及在多團隊共同開發時可以更好的解耦協作。如果業務龐大，也可以單獨抽離一個新的小程序。
#👇· 分包預加載
采用分包配置之后，分包加載也是需要時間的。對於一些比較常用，或者比較重要的頁面，可以采取分包預加載的手段，來完成分包的提前下載，減小分包載入的時間。詳見 分包預下載
#👇· 盡量升級版本庫
注意基礎版本庫的問題，在合適的前提下升級版本庫，盡量將版本庫升級為最新版本。因為版本庫升級為最新，可以有效避免很多問題。
目前隨着各大公司業務的不斷迭代，小程序的體積不斷真大，小程序漸漸的不在小。請讓小程序盡量的小起來，發揮它小的作用。希望以上內容可以幫到你。
更多內容：
ps: 微信公眾號：Yopai，有興趣的可以關注，每周不定期更新，分享可以增加世界的快樂
