vue的項目優化---回顧

陸陸續續也用vue開發或重構了很多項目，在這期間遇到很多的坑，也嘗試過優化。在此記錄一下，想到一點算一點吧：

1、儘量的減小watcher的數量

　  當監聽數據是一個對象的時候，最好具體到監聽對象的屬性；

2、渲染

　　一、能夠用懶加載、分頁、滾動加載或者tab方式去展現其餘內容，減小每次渲染的數量；

　    二、結合v-if，異步顯示dom結構，減小沒必要要組件的加載；

　　三、hybird開發的app，可經過app框架預加載的方式，將單頁應用的資源提早緩存。

3、key值

　　給列表渲染加上惟一的key值，提升緩存命中率，避免重複建立和大規模的從新渲染。

4、關於組件

　　一、組件有明確含義，只處理相似的業務。複用性越高越好，配置性越強越好。

　　二、減小組件之間的耦合度，儘可能避免一個值傳遞經過多層組件的狀況

　　三、使用require.ensure不把全部組件打包進index.js，減小體積。這很好的利用分段加載，可是卻增長了請求數，看狀況吧；

       四、異步組件，使用setTimeout(fn,0)等;

　　五、動態組件和異步組件。如keep-alive :可使被包含的組件保留狀態，或避免從新渲染。注意給組件取個名字；

　　六、按需加載

　　　　a、用v-if方式，建立和結束生命週期

　　　　b、components中使用require引入；

5、關於路由

　　路由的懶加載（按需加載）

component:function(resolve){
  require(['src/component/header.vue'],resolve)  
}

6、打包優化

　　二、把一些公共庫打包進vender中，更好的利用緩存；

　　三、第三方庫儘可能瘦身以後再使用，好比element-ui中的按需加載；

7、網絡請求

　　一、併發請求，如使用promise.all()的方式併發請求非繼承關係的接口數據，也要看狀況。

　　二、非首次必需要渲染數據，儘可能採用響應的操做，如結合用戶操做以後才發起請求等；

8、服務端渲染和骨架圖

 

-------慢慢補充-------

《vue項目中遇到的坑》