【前端效能優化】vue效能優化

life endless發表於2019-04-30
前端優化Vue

一、template

  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 的唯一性。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。

    二、style

1、單獨模組的樣式要加上<style scoped> ，目的就是害怕其他開發人員對檔案的樣式有衝突導致樣式混亂的問題。

2、儘量少用浮動和定位，能用flex的解決就用flex解決

三、script

  1. methods 中每一個方法一定要簡單，只做一件事，儘量封裝可複用的簡短的方法，引數不易過多。如果十分依賴 lodash 開發，method 看著會簡潔許多，代價就是整體的 bundle 體積會大，假如專案僅僅用到小部分方法可以區域性引入 loadsh，不想用 lodash 的話可以自己封裝一個 util.js 檔案
  2. watch 和 computed 用哪個的問題看官網的例子，計算屬性主要是做一層 filter 轉換，切忌加一些呼叫方法進去，watch 的作用就是監聽資料變化去改變資料或觸發事件如 this.$store.dispatch('update', { ... })

  3.減少watch的資料。當元件某個資料變更後需要對應的state進行變更，就需要對另外的元件進行state進行變更。可以使用watch監聽相應的資料變更並繫結事件。當watch的資料比較小，效能消耗不明顯。當資料變大，系統會出現卡頓，所以減少watch的資料。其它不同的元件的state雙向繫結，可以採用事件中央匯流排或者vuex進行資料的變更操作。

四、元件優化

在專案開發過程之中，如果把所有的元件的佈局寫在一個元件中，當資料變更時，由於元件程式碼比較龐大，vue 的資料驅動檢視更新會比較慢，造成渲染過慢，也會造成比較差的體驗效果。所以要把元件細分，比如一個元件，可以把整個元件細分成輪播元件、列表元件、分頁元件等。

五、元件的非同步載入（按需載入元件）

在平時的demo中，可能不會遇見這個需求。當頁面很多，元件很多的時候，SPA頁面在首次載入的時候，就會變的很慢。這是因為vue首次載入的時候把可能一開始看不見的元件也一次載入了，這個時候就需要對頁面進行優化，就需要非同步元件了。

{
    path: '/home',
    name: 'home',
    component:require('@views/home').default
}
{
    path: '/home',
    name: 'home',
    component:() => import('@views/home')
}
複製程式碼


六、打包優化

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

例如：

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>複製程式碼

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

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}複製程式碼


相關文章