上一次我們實(shí)現(xiàn)了模塊的渲染和模塊內(nèi)的資源的加載，但是我們并沒有真正實(shí)現(xiàn)組件的異步加載稿湿。
1.什么是異步組件铅匹？
異步組件就是定義的時(shí)候什么都不做，只在組件需要渲染（組件第一次顯示）的時(shí)候進(jìn)行加載渲染并緩存饺藤。
三種應(yīng)用場(chǎng)景：
- Components;
- Router;
- Vuex modules.
Lazy Loading in Vue using Webpack's Code Splitting
下面主要設(shè)計(jì)vue components中的應(yīng)用
2.Vue實(shí)現(xiàn)按需加載
Vue實(shí)現(xiàn)按需加載包斑，官方推薦使用結(jié)合webpack的代碼分割功能進(jìn)行。定義為異步加載的組件涕俗，在打包的時(shí)候罗丰，會(huì)打包成單獨(dú)的js文件存儲(chǔ)在static/js文件夾里面，在調(diào)用時(shí)使用ajax請(qǐng)求回來插入到html中再姑。
3.webpack的代碼分割,AMD規(guī)范
這里的require是AMD規(guī)范的引入關(guān)鍵詞萌抵，resolve是全部引入成功以后的回調(diào)函數(shù)，第一個(gè)參數(shù)是依賴元镀，require會(huì)先引入依賴模塊绍填，再執(zhí)行回調(diào)函數(shù)。
const HelloJs =(resolve)=>require(['@/components/HelloJs'],resolve)
components:{
HelloJs
}
4.webpack 2 + ES2015(推薦)
推薦使用凹联，但是webpack > 2.4沐兰。這里的import()方法由es6提出，import()方法是動(dòng)態(tài)加載蔽挠，返回一個(gè)Promise對(duì)象住闯，then方法的參數(shù)是加載到的模塊。
const HelloJs =()=>import('@/components/HelloJs')
components:{
HelloJs
}
使用import()能夠在加載模塊失敗時(shí)進(jìn)行錯(cuò)誤處理澳淑，因?yàn)榉祷氐氖莻€(gè)Promise（基于promise）
5.webpack的另一種代碼分割
webpack編譯時(shí)比原，會(huì)靜態(tài)的解析代碼中的require.ensure()，同時(shí)將模塊添加到一個(gè)分開的chunk中杠巡，新的chunk會(huì)被webpack通過jsonp來按需加載量窘。此方法內(nèi)部依賴于Promise。
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
參數(shù)1：是字符串?dāng)?shù)組氢拥，模塊的依賴蚌铜，會(huì)提前加載。一般都是空的嫩海。
參數(shù)2：依賴項(xiàng)加載完成之后的回調(diào)函數(shù)
所有的依賴加載完成之后冬殃，webpack會(huì)執(zhí)行這個(gè)回調(diào)函數(shù)，require對(duì)象的一個(gè)實(shí)現(xiàn)會(huì)作為一個(gè)參數(shù)傳遞給回調(diào)函數(shù)叁怪，因此审葬，可以require依賴和其他模塊提供下一步的執(zhí)行。
參數(shù)3：chunkName 是提供給這個(gè)特定的 require.ensure() 的 chunk 的名稱。通過提供 require.ensure() 不同執(zhí)行點(diǎn)相同的名稱涣觉，我們可以保證所有的依賴都會(huì)一起放進(jìn)相同的 文件束(bundle)痴荐。
const HelloJs =()=>require.ensure([],(require)=>require('@/components/HelloJs'),"HelloJs")
components:{
HelloJs
}
原理：webpack把這個(gè)模塊導(dǎo)出一個(gè)js文件，然后用到這個(gè)模塊的時(shí)候官册，就動(dòng)態(tài)構(gòu)造script標(biāo)簽插入DOM生兆，再由瀏覽器去請(qǐng)求∠ツ回調(diào)函數(shù)是在依賴加載完成之后執(zhí)行皂贩。
require.ensure可以使用參數(shù)給模塊命名，然而import目前上不具備改功能昆汹，如果你需要保留該功能很重要，可以繼續(xù)使用require.ensure婴栽。
