淺談 Vue 項目優化的方法

好久不寫博文了，本文作為我使用半年 vue 框架的經驗小結，隨便談談，且本文只適用于 vue-cli 初始化的項目或依賴于 webpack 打包的項目。

前幾天看到大家說 vue 項目越大越難優化，帶來很多痛苦，這是避免不了的，問題終究要解決，框架的性能是沒有問題的，各大測試網站都有相關數據。下面進入正題

基礎優化

所謂的基礎優化是任何 web 項目都要做的，并且是問題的根源。HTML，CSS，JS 是第一步要優化的點

分別對應到 .vue 文件內的，<template>,<style>,<script>，下面逐個談下 vue 項目里都有哪些值得優化的點

template

語義化標簽，避免亂嵌套，合理命名屬性等等標準推薦的東西就不談了。

模板部分幫助我們展示結構化數據，vue 通過數據驅動視圖，主要注意一下幾點

1. v-show，v-if 用哪個？在我來看要分兩個維度去思考問題，第一個維度是權限問題，只要涉及到權限相關的展示無疑要用 v-if，第二個維度在沒有權限限制下根據用戶點擊的頻次選擇，頻繁切換的使用 v-show，不頻繁切換的使用 v-if，這里要說的優化點在于減少頁面中 dom 總數，我比較傾向于使用 v-if，因為減少了 dom 數量，加快首屏渲染，至于性能方面我感覺肉眼看不出來切換的渲染過程，也不會影響用戶的體驗。
2. 不要在模板里面寫過多的表達式與判斷 v-if="isShow && isAdmin && (a || b)"，這種表達式雖說可以識別，但是不是長久之計，當看著不舒服時，適當的寫到 methods 和 computed 里面封裝成一個方法，這樣的好處是方便我們在多處判斷相同的表達式，其他權限相同的元素再判斷展示的時候調用同一個方法即可。
3. 循環調用子組件時添加 key，key 可以唯一標識一個循環個體，可以使用例如 item.id 作為 key，假如數組數據是這樣的 ['a' , 'b', 'c', 'a'],使用 :key="item" 顯然沒有意義，更好的辦法就是在循環的時候 (item, index) in arr，然后 :key="index"來確保 key 的唯一性。

style

1. 將樣式文件放在 vue 文件內還是外？討論起來沒有意義，重點是按模塊劃分，我的習慣是放在 vue 文件內部，方便寫代碼是在同一個文件里跳轉上下對照，無論內外建議加上 <style scopeed> 將樣式文件鎖住，目的很簡單，再好用的標準也避免不了多人開發的麻煩，約定命名規則也可能會沖突，鎖定區域后盡量采用簡短的命名規則，不需要 .header-title__text 之類的 class，直接 .title 搞定。
2. 為了和上一條作區分，說下全局的樣式文件，全局的樣式文件，盡量抽象化，既然不在每一個組件里重復寫，就盡量通用，這部分抽象做的越好說明你的樣式文件體積越小，復用率越高。建議將復寫組件庫如 Element 樣式的代碼也放到全局中去。
3. 不使用 float 布局，之前看到很多人封裝了 .fl -- float: left 到全局文件里去，然后又要 .clear，現在的瀏覽器還不至于弱到非要用 float 去兼容，完全可以 flex，grid 兼容性一般，功能其實 flex 布局都可以實現，float 會帶來布局上的麻煩，用過的都知道不相信解釋坑了。

至于其他通用的規范這里不贅述，相關文章很多。

script

這部分也是最難優化的點，說下個人意見吧。

1. 多人開發時盡量保持每個組件 export default {} 內的方法順序一致，方便查找對應的方法。我個人習慣 data、props、鉤子、watch、computed、components。
2. data 里要說的就是初始化數據的結構盡量詳細，命名清晰，簡單易懂，避免無用的變量，isEditing 實際可以代表兩個狀態，true 或 false，不要再去定義 notEditing 來控制展示，完全可以在模板里 {{ isEditing ? 編輯中 : 保存 }}
3. props 父子組件傳值時盡量 :width="" :heigth="" 不要 :option={}，細化的好處是只傳需要修改的參數，在子組件 props 里加數據類型，是否必傳，以及默認值，便于排查錯誤，讓傳值更嚴謹。
4. 鉤子理解好生命周期的含義就好，什么時間應該請求，什么時間注銷方法，哪些方法需要注銷。簡單易懂，官網都有寫。
5. metheds 中每一個方法一定要簡單，只做一件事，盡量封裝可復用的簡短的方法，參數不易過多。如果十分依賴 lodash 開發，methed 看著會簡潔許多，代價就是整體的 bundle 體積會大，假如項目僅僅用到小部分方法可以局部引入 loadsh，不想用 lodash 的話可以自己封裝一個 util.js 文件
6. watch 和 computed 用哪個的問題看官網的例子，計算屬性主要是做一層 filter 轉換，切忌加一些調用方法進去，watch 的作用就是監聽數據變化去改變數據或觸發事件如 this.$store.dispatch('update', { ... })

組件優化

vue 的組件化深受大家喜愛，到底組件拆到什么程度算是合理，還要因項目大小而異，小型項目可以簡單幾個組件搞定，甚至不用 vuex，axios 等等，如果規模較大就要細分組件，越細越好，包括布局的封裝，按鈕，表單，提示框，輪播等，推薦看下 Element 組件庫的代碼，沒時間寫這么詳細可以直接用 Element 庫，分幾點進行優化

1. 組件有明確含義，只處理類似的業務。復用性越高越好，配置性越強越好。
2. 自己封裝組件還是遵循配置 props 細化的規則。
3. 組件分類，我習慣性的按照三類劃分，page、page-item 和 layout，page 是路由控制的部分，page-item 屬于 page 里各個布局塊如 banner、side 等等，layout 里放置多個頁面至少出現兩次的組件，如 icon, scrollTop 等

vue-router 和 vuex 優化

vue-router 除了切換路由，用的最多的是處理權限的邏輯，關于權限的控制這里不贅述，相關 demo 和文章有許多，那么說到優化，值得一提的就是組件懶加載

中午官網鏈接如上，例子如下

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') 

 

這段代碼將 Foo, Bar, Baz 三個組件打包進了名為 group-foo 的 chunk 文件，當然啦是 js 文件

其余部分正常寫就可以，在網站加載時會自動解析需要加載哪個 chunk，雖然分別打包的總體積會變大，但是單看請求首屏速度的話，快了好多。

vuex 面臨的問題和解決方案有幾點

當網站足夠大時，一個狀態樹下，根的部分字段繁多，解決這個問題就要模塊化 vuex，官網提供了模塊化方案，允許我們在初始化 vuex 的時候配置 modules。每一個 module 里面又分別包含 state 、action 等，看似是多個狀態樹，其實還是基于 rootState 的子樹。細分后整個 state 結構就清晰了，管理起來也方便許多。

由于 vuex 的靈活性，帶來了編碼不統一的情況，完整的閉環是 store.dispatch('action') -> action -> commit -> mutation -> getter -> computed，實際上中間的環節有的可以省略，因為 API 文檔提供了以下幾個方法 mapState、mapGetters、mapActions、mapMutations，然后在組件里可以直接調取任何一步，還是項目小想怎么調用都可以，項目大的時候，就要考慮 vuex 使用的統一性，我的建議是不論多簡單的流程都跑完整個閉環，形成代碼的統一，方便后期管理，在我的組件里只允許出現 dispatch 和 mapGetters，其余的流程都在名為 store 的 vuex 文件夾里進行。

基于上面一條，說下每個過程里面要做什么，前后端數據一定會有不一致的地方，或是數據結構，或是字段命名，那么究竟應該在哪一步處理數據轉換的邏輯呢？有人會說其實哪一步都可以實現，其實不然，我的建議如下

1. 在發 dispatch 之前就處理好組件內需要傳的參數的數據結構和字段名
2. 到了 action 允許我們做的事情很多，因為這部支持異步，支持 state, rootState, commit, dispatch, getters，由此可見責任重大，首先如果后端需要部分其他 module 里面的數據，要通過 rootState 取值再整合到原有數據上，下一步發出請求,建議（async await + axios），拿到數據后進行篩選轉換，再發送 commit 到 mutation
3. 這一步是將轉換后的數據更新到 state 里，可能會有數據分發的過程（傳進一個 object 改變多個 state 中 key 的 value），可以轉換數據結構，但是盡量不做字段轉換，在上一步做
4. 此時的 store 已經更新，使用 getter 方法來取值，token: state => state.token，單單的取值，盡量不要做數據轉換，需要轉換的點在于多個地方用相同的字段，但是結構不同的情況（很少出現）。
5. 在組件里用 mapGetters 拿到對應的 getter 值。

打包優化

上面說了代碼方面的規范和優化，下面說下重點的打包優化，前段時間打包的 vender bundle 足足 1.4M，app bundle 也有 270K，app bundle 可以通過組件懶加載解決，vender 包該怎么解決？

有人會質疑是不是沒壓縮或依賴包沒去重，其實都做了就是看到的 1.4M。

解決方法很簡單，打包 vender 時不打包 vue、vuex、vue-router、axios 等，換用國內的 bootcdn 直接引入到根目錄的 index.html 中。

例如：

<script src="http://cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="http://cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> 
<script src="http://cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script> 

在 webpack 里有個 externals，可以忽略不需要打包的庫

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

此時的 vender 包會非常小，如果不夠小還可以拆分其他的庫，此時增加了請求的數量，但是遠比加載一個 1.4M 的 bundle 快的多。

總結

本文談的優化可以解決部分性能問題，實際開發細節很多，總之按著規范寫代碼，團隊的編碼風格盡量統一，處理細節上多加思考，大部分性能問題都能迎刃而解。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。