vue2組件實(shí)現(xiàn)懶加載淺析

更新時間：2017年03月29日 14:14:42 作者：詹一樹

本篇文章主要介紹了vue2組件實(shí)現(xiàn)懶加載淺析,運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力.

一、什么是懶加載

懶加載也叫延遲加載，即在需要的時候進(jìn)行加載，隨用隨載。

二、為什么需要懶加載

在單頁應(yīng)用中，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會異常的大，造成進(jìn)入首頁時，需要加載的內(nèi)容過多，延時過長，不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時

三、如何與webpack配合實(shí)現(xiàn)組件懶加載

1、在webpack配置文件中的output路徑配置chunkFilename屬性

output: {

    path: resolve(__dirname, 'dist'),

    filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',

    chunkFilename: 'chunk[id].js?[chunkhash]',

    publicPath: options.dev ? '/assets/' : publicPath

  },

chunkFilename路徑將會作為組件懶加載的路徑

2、配合webpack支持的異步加載方法

resolve => require([URL], resolve), 支持性好
() => system.import(URL) , webpack2官網(wǎng)上已經(jīng)聲明將逐漸廢除, 不推薦使用
() => import(URL), webpack2官網(wǎng)推薦使用, 屬于es7范疇, 需要配合babel的syntax-dynamic-import插件使用, 具體使用方法如下

復(fù)制代碼代碼如下:

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015

use: [{

    loader: 'babel-loader',

    options: {

     presets: [['es2015', {modules: false}]],

     plugins: ['syntax-dynamic-import']

    }

   }]

四、具體實(shí)例中實(shí)現(xiàn)懶加載

1、路由中配置異步組件

export default new Router({

  routes: [

    {

      mode: 'history',

      path: '/my',

      name: 'my',

      component: resolve => require(['../page/my/my.vue'], resolve),//懶加載

    },

  ]

})

2、實(shí)例中配置異步組件

components: {

    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載

    //historyTab: () => import('../../component/historyTab/historyTab.vue')

  },

3、全局注冊異步組件

Vue.component('mideaHeader', () => {

  System.import('./component/header/header.vue')

})

五、配置異步組件實(shí)現(xiàn)懶加載的問題分析

1、多次進(jìn)出同一個異步加載頁面是否會造成多次加載組件？

答：否，首次需要用到組件時瀏覽器會發(fā)送請求加載組件，加載完將會緩存起來，以供之后再次用到該組件時調(diào)用

2、在多個地方使用同一個異步組件時是否造成多次加載組件？如：

//a頁面

export default {

  components: {

    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載

  },

}
//b頁面

export default {

  components: {

    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載

  },

}

答：否，理由同上

3、如果在兩個異步加載的頁面中分別同步與異步加載同一個組件時是否會造成資源重用？如：

//a頁面
import historyTab from '../../component/historyTab/historyTab.vue';
export default {
  components: {
    historyTab
  },
}

//b頁面
export default {
  components: {
    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶加載
  },
}

答: 會, 將會造成資源重用, 根據(jù)打包后輸出的結(jié)果來看, a頁面中會嵌入historyTab組件的代碼, b頁面中的historyTab組件還是采用異步加載的方式, 另外打包c(diǎn)hunk；

解決方案：組件開發(fā)時，如果根頁面沒有導(dǎo)入組件的情況下，而是在其他異步加載頁面中同時用到組件，那么為實(shí)現(xiàn)資源的最大利用，在協(xié)同開發(fā)的時候全部人都使用異步加載組件

4、在異步加載頁面中載嵌入異步加載的組件時對頁面是否會有渲染延時影響？

答：會，異步加載的組件將會比頁面中其他元素滯后出現(xiàn)，頁面會有瞬間閃跳影響；

解決方案：因?yàn)樵谑状渭虞d組件的時候會有加載時間，出現(xiàn)頁面滯后，所以需要合理的進(jìn)行頁面結(jié)構(gòu)設(shè)計，避免首次出現(xiàn)跳閃現(xiàn)象；

六、懶加載的最終實(shí)現(xiàn)方案

1、路由頁面以及路由頁面中的組件全都使用懶加載

優(yōu)點(diǎn)：（1）最大化的實(shí)現(xiàn)隨用隨載

　　?。?）團(tuán)隊開發(fā)不會因?yàn)闇贤▎栴}造成資源的重復(fù)浪費(fèi)　　　　

缺點(diǎn)：（1）當(dāng)一個頁面中嵌套多個組件時將發(fā)送多次的http請求，可能會造成網(wǎng)頁顯示過慢且渲染參差不齊的問題

2、路由頁面使用懶加載，而路由頁面中的組件按需進(jìn)行懶加載, 即如果組件不大且使用不太頻繁, 直接在路由頁面中導(dǎo)入組件, 如果組件使用較為頻繁使用懶加載

優(yōu)點(diǎn)：（1）能夠減少頁面中的http請求，頁面顯示效果好

缺點(diǎn)：（2）需要團(tuán)隊事先交流，在框架中分別建立懶加載組件與非懶加載組件文件夾

3、路由頁面使用懶加載，在不特別影響首頁顯示延遲的情況下，根頁面合理導(dǎo)入復(fù)用組件，再結(jié)合方案2

優(yōu)點(diǎn)：（1）合理解決首頁延遲顯示問題

?。?）能夠最大化的減少http請求，且做其他他路由界面的顯示效果最佳

缺點(diǎn)：（1）還是需要團(tuán)隊交流，建立合理區(qū)分各種加載方式的組件文件夾

七、采用第三種方案進(jìn)行目錄結(jié)構(gòu)設(shè)計

八、具體代碼實(shí)現(xiàn)設(shè)計

1、路由設(shè)計：

import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);

export default new Router({
  routes: [
    {
      mode: 'history',
      path: '/home',
      name: 'home',
      component: resolve => require([URL], resolve),//懶加載
      children: [
        {
          mode: 'history',
          path: '/home/:name',
          name: 'any',
          component: resolve => require(['../page/any/any.vue'], resolve),//懶加載
        },
      ]
    },
    {
      mode: 'history',
      path: '/store',
      name: 'store',
      component: resolve => require(['../page/store/store.vue'], resolve),//懶加載,
      children: [
        {
          mode: 'history',
          path: '/store/:name',
          name: 'any',
          component: resolve => require(['../page/any/any.vue'], resolve),//懶加載
        },
      ]
    },
    {
      mode: 'history',
      path: '/my',
      name: 'my',
      component: resolve => require(['../page/my/my.vue'], resolve),//懶加載,
      children: [
        {
          mode: 'history',
          path: '/my/:name',
          name: 'any',
          component: resolve => require(['../page/any/any.vue'], resolve),//懶加載
        },
      ]
    },
  ]
})

（1）首層的路由根組件分別對應(yīng)的tab頁面

（2）根目錄后跟著各個子路由頁面，子路由采用動態(tài)路由配合路由的編程式導(dǎo)航再加上vuex，最優(yōu)化提高開發(fā)效率

直接貼上代碼：

/**

 * Created by ZHANZF on 2017-3-20.

 */

//vuex配置

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

  state: {

    //路由組件存儲器

    routers: {}

  },

  getters: {

    routers: state => {

      return state.data;

    }

  },

  mutations: {

    //動態(tài)增加路由

    addRouter: (state, data) => {

      state.routers = Object.assign({}, state.routers, {

        [data.name]: data.component

      });

    }

  },

  actions: {

    acMethods({commit}) {

 

    }

  },

})

 

//根目錄中注冊路由組件

window.midea = {

  registerRouter(name, component) {

    Store.commit('addRouter', {

      name: name,

      component: component

    })

  }

};//頁面使用路由導(dǎo)航 

openAnyPage() {
  midea.registerRouter('module', resolve => {require(['../module/module.vue'], resolve)});//懶加載
  this.$router.push({path: '/home/module', query: {title: this.title}});
}

//頁面中使用動態(tài)組件 

<template> 　

　<component :is="currentRouter" :moduleName="title">

</component> 

</template>

<script src="./any.js">

export default {

  data () {

    return {

      routeName: '',

      currentRouter: '',

      title: '',

    }

  },

  created() {

    this.routeName = this.$route.params.name;

    this.title = this.$route.query.title;

    this.currentRouter = this.$store.state.routers[this.routeName];

  },

  methods: { 

  }

}

</script>