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控制台直接報錯，這是為什么呢？

Module build failed: SyntaxError: Unexpected token

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

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

npm install babel-plugin-syntax-dymic-import --save-dev

 然后修改js的loader部分：

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

 增加了option選項，至此，能識別我們const App = () => import('../component/Login.vue');的語法了

 

在打包的時候，發現我們如果只是這么寫：const App = () => import('../component/Login.vue');出現的chunk包名字都是亂的，如果我們指定命名，該怎么辦呢？webpack3提供了Magic Comments（魔法注釋）

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

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

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代碼，指定了相同的webpackChunkName，會合並打包成一個js文件。
const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')

 轉自：https://www.cnblogs.com/xiaochongchong/p/7772773.html

https://segmentfault.com/a/1190000011519350