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包。