把不同的路由對應的組件分割成不同的代碼塊皇型，然后當路由被訪問的時候才加載對應的組件即為路由的懶加載龙助，可以加快項目的加載速度足丢，提高效率播急。
結合 Vue 的異步組件和 Webpack 的代碼分割功能幻馁，輕松實現(xiàn)路由組件的懶加載散址。
一、異步組件
? ? ? ? 在大型應用中宣赔，將應用分割成小一些的代碼塊预麸，只在需要的時候從服務器加載一個模塊。為了簡化儒将，vue允許以一個工廠函數(shù)的方式定義組件吏祸，該工廠函數(shù)會異步解析組件定義。vue只有在該組件被需要渲染的時候才會觸發(fā)該工廠函數(shù)钩蚊，把結果緩存起來供未來重渲染贡翘。? ??
? ? ? ?該工廠函數(shù)會收到一個resolve回調，這個回調函數(shù)會在得到服務器命令(組件定義的時候)被調用砰逻，可以調用?reject(reason)?來表示加載失敗鸣驱。如何獲取組件取決于你自己。一個推薦的做法是將異步組件和?webpack 的 code-splitting 功能一起配合使用：
? ? ? ? 可以在工廠函數(shù)中返回一個Promise：
? ??????異步組件工廠函數(shù)也可以返回一個如下格式的對象：
二蝠咆、代碼分割功能（webpack）
? ? ? ? 能夠把代碼分離到不同的bundle中踊东，然后可以按需加載或并行加載這些文件。代碼分離可以獲取更小的bundle刚操，以及控制資源加載優(yōu)先級闸翅。
? ? ? ? 常用的代碼分離有三種方式：
? ? ? ? 1、入口起點：使用entry配置手動分離代碼（雖然簡單直觀菊霜，但是不夠靈活坚冀，并且不能動態(tài)地將核心應用程序邏輯中的代碼拆分出來）
? ? ? ? 2、防止重復：使用SplitChunkPlugin插件去重合分離chunk（將公共的依賴模塊提取到已有的 entry chunk 中鉴逞，或者提取到一個新生成的 chunk记某。）使用?optimization.splitChunks?配置選項，現(xiàn)在可以看到已經(jīng)從?index.bundle.js?和?another.bundle.js?中刪除了重復的依賴項构捡。
? ? ? ? 3液南、動態(tài)導入：通過模塊中的內聯(lián)函數(shù)調用分離代碼。涉及到動態(tài)代碼拆分時叭喜，webpack提供了兩個類似的技術（import（）實現(xiàn)動態(tài)導入贺拣；webpack特定的require.ensure）
? ?????https://webpack.docschina.org/guides/code-splitting/
三、路由懶加載
? ? ? ? const Foo = () => import('./Foo.vue')
????????const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})
? ? ? ? 有時候想把某個路由下的所有組件都打包在同一個異步快中，需要使用命名chunk譬涡，一個特殊的注釋語法來提供chunk name（webpack>2.4）
? ??????const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
? ? ? ??
? ??????
