vue2組件實現懶加載淺析

2019-11-19 16:59:20

字體：大中小

來源：轉載

供稿：網友

一、什么是懶加載

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

二、為什么需要懶加載

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

三、如何與webpack配合實現組件懶加載

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官網上已經聲明將逐漸廢除, 不推薦使用
() => import(URL), webpack2官網推薦使用, 屬于es7范疇, 需要配合babel的syntax-dynamic-import插件使用, 具體使用方法如下

復制代碼代碼如下:

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']    }   }]

四、具體實例中實現懶加載

1、路由中配置異步組件

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

2、實例中配置異步組件

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

五、配置異步組件實現懶加載的問題分析

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

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

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)},//懶加載  },}

答: 會, 將會造成資源重用, 根據打包后輸出的結果來看, a頁面中會嵌入historyTab組件的代碼, b頁面中的historyTab組件還是采用異步加載的方式, 另外打包chunk；

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

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

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

解決方案：因為在首次加載組件的時候會有加載時間，出現頁面滯后，所以需要合理的進行頁面結構設計，避免首次出現跳閃現象；

六、懶加載的最終實現方案

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

優點：（1）最大化的實現隨用隨載

　　　（2）團隊開發不會因為溝通問題造成資源的重復浪費　　　　

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

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

優點：（1）能夠減少頁面中的http請求，頁面顯示效果好

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

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

優點：（1）合理解決首頁延遲顯示問題

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

缺點：（1）還是需要團隊交流，建立合理區分各種加載方式的組件文件夾

七、采用第三種方案進行目錄結構設計

八、具體代碼實現設計

1、路由設計：

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）首層的路由根組件分別對應的tab頁面

（2）根目錄后跟著各個子路由頁面，子路由采用動態路由配合路由的編程式導航再加上vuex，最優化提高開發效率

直接貼上代碼：

/** * 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: {    //動態增加路由    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    })  }};//頁面使用路由導航 openAnyPage() {  midea.registerRouter('module', resolve => {require(['../module/module.vue'], resolve)});//懶加載  this.$router.push({path: '/home/module', query: {title: this.title}});}

//頁面中使用動態組件 <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>