當項目小的時候，我沒考慮要去找這個得解決方案，也幸好現在幾乎能遷移的項目都整合在了一個vue的項目里面
才發現編譯后的vendor.js變得異常的大，而且幾乎在項目每一個頁面都需要加載這一個js，項目內容變多了后，這個文件肯定會越來越大，而且變更也會很頻繁。
官方的解決方案 https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
以前的引用方式可能是這樣的
import Hello from '../pages/Hello'
import Index from '../pages/Index'
按照上面的方案直接更改一下引用方式就可以了
const Hello = r => require.ensure([], () => r(require('../pages/Hello')), 'group-b')
const Index = r => require.ensure([], () => r(require('../pages/Index')), 'group-a')
把屬於同一個功能分類的組件或者某個路由下的組件打包放在同一個chunk中，只需要給chunk命名，提供require.ensure第三個參數作為chunk的名稱
Webpack 將相同 chunk 下的所有異步模塊打包到一個異步塊里面 —— 這也意味着我們無須明確列出 require.ensure的依賴（傳空數組就行）
打包結果如下：
其實這是webpack代碼分割的一個方法，有關require.ensure()的更多用法請參考：http://www.css88.com/doc/webpack2/guides/code-splitting-require/
-------------------
為什么要這么干呢
如果按照import直接引用vue的組件，剛開始可能項目頁面不多可能察覺不到這樣做的用處，當項目中路由有幾十個或者更多的組件需要引用，webpack默認將所有的js打包為一個文件：
app.[contenthash].js
然后這個文件會越來越龐大，這個文件即使你在訪問首頁默認頁等時候需要被加載，然而這個文件不進行分割的話，可能有好幾兆甚至幾十兆
大多數的項目首頁可能沒啥交互特別復雜的功能，卻要強制加載首頁並不會用的其他頁的資源，而且首頁也是訪問量最大的，為了節省資源，為了加快首頁訪問速度，也需要按需加載才行啊
所以webpack就有了require.ensure代碼分割。
另外需要注意的是，require.ensure 內部依賴於 Promises。 如果你在舊的瀏覽器中使用 require.ensure 請記得shim Promise es6-promise polyfill
今天再看vue-router的懶加載文檔時候，才發現下面還有一段
把組件按組分塊
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
通過注釋語法來提供chunk name，但是webpack的版本要高於2.4的版本。