1. 程式人生 > >vue效能優化小結

vue效能優化小結

元件優化

一般來說,你不需要太關心vue的執行時效能,它在執行時非常快,但付出的代價是初始化時相對較慢。先看一下常見的vue寫法:在html裡放一個app元件,app元件裡又引用了其他的子元件,形成一棵以app為根節點的元件樹。

 <div id="app">
    <router-view></router-view>
  </div>  
複製程式碼

而正是這種做法引發了效能問題,要初始化一個父元件,必然需要先初始化它的子元件,而子元件又有它自己的子元件。那麼要初始化根標籤,就需要從底層開始冒泡,將頁面所有元件都初始化完。所以我們的頁面會在所有元件都初始化完才開始顯示。

這個結果顯然不是我們要的,更好的結果是頁面可以從上到下按順序流式渲染,這樣可能總體時間增長了,但首屏時間縮減,在使用者看來,頁面開啟速度就更快了。

非同步元件

new Vue({
    components: {
        A: { /*component-config*/ },
        B (resolve) {
            setTimeout(() => {
                resolve({ /*component-config*/ })
            }, 0);
        }
    }
})
複製程式碼

或者是

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊語法,用來設定 code-split point
  // (程式碼分塊)
  require.ensure(['./Foo.vue'
], () => { resolve(require('./Foo.vue')) }) } const Foo = resolve => require(['./Foo.vue'], resolve) const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] }) 複製程式碼

把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,從而實現路由懶載入

把元件按組分塊

有時候我們想把某個路由下的所有元件都打包在同個非同步 chunk 中。只需要 給 chunk 命名,提供 require.ensure 第三個引數作為 chunk 的名稱:

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')  
複製程式碼

利用v-if和terminal

 <head>
   <!--some component -->
  <div v-if="showB">
   <!--some component -->
    </div>
     <div v-if="showC">
   <!--some component -->
    </div>
</head>
 data: {
        showB: false,
        showC: false
    },
    created () {
        // 顯示B
        setTimeout(() => {
            this.showB = true;
        }, 0);
        // 顯示C
        setTimeout(() => {
            this.showC = true;
        }, 0);
    }  
複製程式碼

這個示例寫起來略顯囉嗦,但它已經實現了我們想要的順序渲染的效果。頁面會在元件初始化完後顯示,然後再按順序渲染其餘的元件,整個頁面渲染方式看起來是流式的。

有些人可能會擔心v-if存在一個編譯/解除安裝過程,會有效能影響。但這裡並不需要擔心,因為v-if是惰性的,只有當第一次值為true時才會開始初始化。

元件keep-alive

如果你做用一個大型web的spa的時候,你有很多router,對應的是很多個頁面。在頁面的快速切換中(如常見的tab頁),為了保證頁面載入的效率,除了快取機制之外,vue的keep-alive元件可以幫的上忙。它會把元件儲存在瀏覽器記憶體當中,方便你快速切換。

基礎優化

v-if v-show

許可權問題,只要涉及到許可權相關的展示無疑要用 v-if,沒有許可權限制下根據使用者點選的頻次選擇,頻繁切換的使用 v-show,不頻繁切換的使用 v-if,這裡要說的優化點在於減少頁面中 dom 總數,我比較傾向於使用 v-if,因為減少了 dom 數量,加快首屏渲染。 不要在模板裡面寫過多的表示式與判斷 v-if="isShow && isAdmin && (a || b)",這種表示式雖說可以識別,但是不是長久之計,當看著不舒服時,適當的寫到 methods 和 computed 裡面封裝成一個方法,這樣的好處是方便我們在多處判斷相同的表示式,其他許可權相同的元素再判斷展示的時候呼叫同一個方法即可。

迴圈儘可能在使用 v-for 時提供 key,除非遍歷輸出的 DOM 內容非常簡單,或者是刻意依賴預設行為以獲取效能上的提升。引用vue文件:當 Vue.js 用 v-for 正在更新已渲染過的元素列表時,它預設用“就地複用”策略。如果資料項的順序被改變,Vue 將不會移動 DOM 元素來匹配資料項的順序, 而是簡單複用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。

這個預設的模式是高效的,但是隻適用於不依賴子元件狀態或臨時 DOM 狀態 (例如:表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。 watch 和 computed 用哪個的問題看官網的例子,計算屬性主要是做一層 filter 轉換,切忌加一些呼叫方法進去,watch 的作用就是監聽資料變化去改變資料或觸發事件如 this.$store.dispatch('update', { ... }) 資料請求在哪個時候儘量根據需求考慮後,多多利用promise的併發請求。

其他

如打包優化:在打包時可將一些靜態模組排除,如ue、vuex、vue-router、axios 等,換用國內的 bootcdn 直接引入到根目錄的 index.html 中。在 webpack 裡有個 externals,可以忽略不需要打包的庫

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

或者是利用webpack的動態連結庫DllPlugin,打包會輸出一個類dll包(dll包源於windows的動態連結庫),這些程式碼本身不會執行,主要是提供給我們的業務程式碼引用。將靜態資原始檔(執行依賴包)與原始檔分開打包,先使用DllPlugin給靜態資源打包,再使用DllReferencePlugin讓原始檔引用資原始檔。dll在打包一次後即可,下次業務程式碼修改也不會重新打包,然後在html裡分模組引入

   <script src="./static/js/vendor.dll.js"></script>
    <script src="/dist/build.js"></script>
複製程式碼

關於webpack的使用建議閱讀《深入淺出webpack》一書。 其他的還有樣式優化、減少元件耦合性等。