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