vue項目優化方案

適用對象：vue-cli初始化的項目或webpack打包的項目。

基礎優化：
A、template
•語義化標籤，避免亂嵌套，合理命名屬性
•v-show和v-if

一、權限角度：涉及權限相關角度使用v-if，不涉及權限且需拼房切換使用v-show;
    二、dom總數：減小dom總量，加快首屏渲染，傾向於v-if;

•模板裏不宜有過多的表達式或判斷，適當的在methods和computed裏封裝成方法，能夠減小代碼冗餘，固然對於視覺強迫獸是友好的。
• 循環調用子組件時添加key，須要保證key的惟一性，通常不採用item，可使用item.id或index;
B、style
•局部樣式代碼按模塊劃分，建議<style scoped>鎖住，避免多人開發衝突的麻煩，命名規則儘可能簡短。
•全局樣式文件儘可能抽象通用，建議複寫組件庫如element的代碼放到全局中。
•儘可能不用float佈局，能夠採用flex兼容。
C、script
•多人開發時，儘可能保證多個組件內鉤子函數順序一致，建議按vue生命週期排序，方便查找和理解，能很好的應對多種需求。
•data裏初始化數據的結構儘可能詳細，命名清晰，簡單易懂，避免無用的變量。須要區分狀態的變量儘可能採用布爾值，經過三目運算來實現狀態區分。
•props父子組件傳值時儘可能細化，減小所傳值之間的關聯，並在子組件props里加數據類型、是否必傳及默認值，方便錯誤排查，讓傳值更嚴謹。
•methods裏方法有必要簡單，只作一件事。方法複用率較高的，能夠封裝一個工具文件utis.js。
•watch和computed的使用情景：computed主要作filter切換，切忌加調用方法（沒碰見過，未知後果）；watch的做用是數據監聽回調。

組件優化：
規模較大的項目組件細分越細越好，代碼佈局模塊化；能夠採用第三方組件庫，無可奈何，再去寫自定義組件。
自定義組件要注意：

•組件功能性明確，所處理的業務儘可能通用，提升組件複用率；
 •封裝組件props裏的參數必須細化全面，保證多種相似需求的覆蓋；
 •組件代碼能夠按功能劃分模塊，使項目清晰明瞭。

Vue-router和vuex優化：

Vue-router:
 •組件懶加載：結合vue異步組件和webpack的代碼分割實現路由按需加載，能夠提升首頁加載效率。案例以下：
     const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
    const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
    const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

 •動態路由：router.addRoutes(routes)方法
    方案：https://blog.csdn.net/s8460049/article/details/61190709/

vuex:

•項目規模比較大，狀態樹下字段比較多時，建議狀態模塊化（官網模塊化方案）；
 •vuex的完整流程：store.dispatch('action') -> action -> commit -> mutation -> getter -> computed；建議不管項目大小，跑完整個流程，能夠根據流程劃分三部分：state、action、mutation三個文件，各自處理流程功能，前端工程化能夠添加mutationType處理常量。這樣保留了vuex的靈活性，也保證了代碼的統一性，方便維護。

打包優化：
解決vender包打包特別大的問題：
•打包vender時不打包vue、vuex、vue-router、axios等，使用國內的cdn服務直接引入到index.html中，

bootcdn已停服

•在webpack中設置externals，忽略不須要打包的庫：

externals: {
   'vue': 'Vue',
   'vue-router': 'VueRouter',
   'vuex': 'Vuex',
   'axios': 'axios'
 }

縮小了vender包的大小，雖然增長了請求數量，可是提升了加載效率。