Vue的按需加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/marko_zheng/article/details/81670085

Vue的按需加载

按需加载，又称延迟加载或者懒加载，只有在使用到的时候才会加载进来

import引入的模块，会在加载imdex.js文件的时候，去加载所有的模块

Vue中提供import的加载方式

import Vue from 'vue'
import Router from 'vue-router'
import '@/components/Base'
import '@/components/Bg'

使用这种加载方式，会在组件初始化的时候全部加载进来，如果文件过大，会导致页面加载缓慢，体验性变差。

具体使用方法：

1.  resolve => require([URL], resolve) //支持性好
2.  () => system.import(URL)  //webpack2官网上已经声明将逐渐废除,不推荐使用
3.  () => import(URL)   //配合babel的syntax-dynamic-import插件使用。

路由的懒加载

export default new Router({
  routes:[
    {
     path: '/index',component: resolve => require(['/index/index.vue'], resolve),
    },
  ]
})

组件的懒加载

components: {
  historyTab: resolve => {require(['component/Test.vue'],resolve)
  },   
},