webpack + vue 异步加载组件

五、vue 使用异步加载模块 import()

{
    path: '/',
    name: 'index',
    component: () => import('@view/test/index.vue'),
    mate: {
      title: ''
    }
},
复制代码

若是咱们直接这样使用，webpack 编译时就会报错，是由于 es6 的import 只能作静态加载，最新学习 webpack 的时候有一个新功能是能够作动态加载的，

if( judge ) {
    import {module} from './path1'
} else {
    import {module} from './path2'
}
复制代码

在es6 中 import 只能写在最顶部，不能写在 条件判断里边。

import的加载是加载的模块的引用。而import()加载的是模块的拷贝，

// mudule.js
export let counter = 3;
export function increment() {
  counter++;
}

// index.js
import('./module.js').then(({counter, increment})=>{
    console.log(counter); //3
    increment(); 
    console.log(counter); //3
});

import {counter, increment} from './module.js';
console.log(counter); //3
increment();
console.log(counter); //4

复制代码

若是想使用动态加载必须安装 babel 插件进行编译 npm install babel-plugin-syntax-dynamic-import -D