vue性能優化1--懶加載

懶加載也叫延遲加載，即在須要的時候進行加載、隨用隨載。
爲何須要懶加載？像vue這種單頁面應用，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，時間過長，會出啊先長時間的白屏，即便作了loading也是不利於用戶體驗，而運用懶加載則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時簡單的說就是：進入首頁不用一次加載過多資源形成用時過長！！！

前提
有兩個頁面，分別是abc、def和一個組件hello，abc頁面有一個按鈕，會往def頁面跳轉，dcf裏引用了hello組件。

 

abc.vue

<template>
    <div class="wrapp">
        <div>我是abc頁面</div>
        <button @click="goPage">跳轉到b頁面</button>
    </div>
</template>

<script>
    export default {
        name: "abc",
        methods:{
            goPage(){
                this.$router.push('/def')
            }
        }
    }
</script>

<style scoped>
    .wrapp{color: red}
</style>

 

def.vue

<template>
    <div class="wrapp">
        <div class="ctx">我是def頁面</div>
        <hello/>
    </div>
</template>

<script>
    import hello from '@/components/hello'
    export default {
        name: "def",
        components:{
            hello:hello
            // hello:()=>import('@/components/hello')
        }
    }
</script>

<style scoped>
    .ctx{color: green}
</style>

 

hello.vue

<template>
  <div class="wrapp">
    <div class="speak">
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      <div>我是組件hello</div>
      //你們能夠多複製幾個div，內容越多效果越明顯，爲了方便讀者，刪除了些
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      about: "about"
    }
  }
}
</script>
<style scoped>
  .wrapp{
    background-color: blueviolet;
    color: white;
    padding: 6px;
    width: 200px;
    height: 300px;
    overflow-y: auto;
  }
</style>

View Code

 

router

import Vue from 'vue'
import Router from 'vue-router'
import abc from '../pages/abc'
import def from '../pages/def'
Vue.use(Router)

export default new Router({
  routes: [{
        path: '/abc',
        component: abc
    },{
        path: '/def',
        component: def
    },{
        path: '/',
        redirect:'/abc'
  }]
})

View Code

 

 

 

 

組件同步加載
如上代碼，全部東西(包含hello組件)都被一塊兒合併到了app.xxx.js大文件中去了，首屏加載的時候會一次行加載整個網站的資源

 

 

 

組件懶加載
官方文檔：https://cn.vuejs.org/v2/guide/components-dynamic-async.html
由於hello組件，只要在def頁面中使用，因此不必提早一塊兒加載進來，試想若是用戶可能就不進入def頁面，那加載進來豈不是浪費時間
因此咱們能夠修改def的代碼爲以下便可：即異步加載hello組件，這樣就能夠當def頁面被訪問到的時候，纔會被加載

<script>
    // import hello from '@/components/hello'
    export default {
        name: "def",
        components:{
            // hello:hello
            hello:()=>import('@/components/hello')
        }
    }
</script>

 看到沒有，app.js明顯小了不少，並且finish時間也快了不少。   而hello組件也在須要的時候才被加載。 這樣對於項目很大的狀況下對於首屏白屏卡頓優化是頗有必要的

 

路由懶加載
官方文檔：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
原理同上，路由配置改成以下便可

import Vue from 'vue'
import Router from 'vue-router'
import abc from '../pages/abc'
const def=()=>import('../pages/def')//異步加載該路由
Vue.use(Router)

export default new Router({
  routes: [{
        path: '/abc',
        component: abc
    },{
        path: '/def',
        component: def
    },{
        path: '/',
        redirect:'/abc'
  }]
})

 
看一下最終結果

看一下組件，路由都異步的狀況下，能節省多少資源

結果很明顯，從2.5MB減小到了1.8MB  耗時也從693提高到了553.果真沒讓我失望，哈哈哈

 

懶加載打包
凡是懶加載的組件，在build的時候，都會被分割成獨立的js文件，這些文件一般叫作‘chunk.xxx.js’ ,chunk是模塊的意思

 

 

注意
參考：https://forum.vuejs.org/t/vue-cli3-link-href-102-js-rel-prefetch/40307/6
使用vue-cli3的朋友，留意一下坑：vue-cli3初始化的項目，默認用了h5中ref的prefetch的屬性，這個屬性會致使首屏加載渲染完成後，利用空餘時間會下載全部的資源，會讓人以爲‘懶加載’的困惑，增長一個配置便可。可是我以爲這個挺好的，要否則人家也不會添加這個特性。若是不喜歡移除配置接口。一下是vue.config.js

module.exports = {
    baseUrl:'./',
    chainWebpack: config => {
        // 移除 prefetch 插件
        config.plugins.delete('prefetch')
    }
}