vue-router 按需加載

vue的單頁面（SPA）項目,必然涉及路由按需的問題。
以前我們是這么做的

//require.ensure是webpack里面的，這樣做會將單獨拉出來作為一個chunk文件
const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));

但現在vue-router的官網看看，推薦這種方式：

//vue異步組件和webpack的【代碼分塊點】功能結合，實現了按需加載
const App = () => import('../component/Login.vue');

可是，很多情況下，我們這么寫npm run dev控制台直接報錯，這是為什么呢？

Module build failed: SyntaxError: Unexpected token

原來是import這兒報錯了，這就需要babel的插件了，vue-router官網上有一段提示：
如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。
至此，問題全部解決了。

如果使用vue-cli生成項目，很可能在babel-loader沒有配置上面的插件，這時需要我們自己去安裝此插件：

cnpm install babel-plugin-syntax-dynamic-import --save-dev

然后修改webpack的js的loader部分：

{
test: /\.js$/,
loader:'babel-loader',
options:{
plugins:['syntax-dynamic-import']
},
},

　　

增加了option選項，至此，能識別我們：

const App = () => import('../component/Login.vue');

的語法了，頁面出來了：

在打包的時候，發現我們如果只是這么寫，出現的chunk包名字都是亂的，如果我們指定命名，該怎么辦呢？webpack3提供了Magic Comments（魔法注釋）

const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');

　這樣我們就為打包出來的chunk指定一個名字，最終生成login.js的chunk包。