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