vue的單頁(yè)面（SPA）項(xiàng)目,必然涉及路由按需的問(wèn)題。
以前我們是這么做的

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

但現(xiàn)在vue-router的官網(wǎng)看看，推薦這種方式：

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

可是，很多情況下，我們這么寫npm run dev控制臺(tái)直接報(bào)錯(cuò)，這是為什么呢？

Module build failed: SyntaxError: Unexpected token

原來(lái)是import這兒報(bào)錯(cuò)了，這就需要babel的插件了，vue-router官網(wǎng)上有一段提示：
如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語(yǔ)法。
至此，問(wèn)題全部解決了。

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

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

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

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

增加了option選項(xiàng)，至此，能識(shí)別我們：

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

的語(yǔ)法了，頁(yè)面出來(lái)了：

在打包的時(shí)候，發(fā)現(xiàn)我們?nèi)绻皇沁@么寫，出現(xiàn)的chunk包名字都是亂的，如果我們指定命名，該怎么辦呢？webpack3提供了Magic Comments（魔法注釋）

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

　這樣我們就為打包出來(lái)的chunk指定一個(gè)名字，最終生成login.js的chunk包。