作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
譯者：jeneser
當(dāng)你的SPA（單頁(yè)應(yīng)用程序）變得復(fù)雜時(shí)低飒，打包構(gòu)建后的Javascript包會(huì)變得非常大，以至于嚴(yán)重影響頁(yè)面的加載時(shí)間。幸運(yùn)的是：
vue-router支持WebPack內(nèi)置的異步模塊加載系統(tǒng)。所以，那些使用較少的路由組件不必打包進(jìn)bundles里，只需要在路由被訪問(wèn)時(shí)按需加載。
使用
假設(shè)你的路由配置是這樣的：
import MainPage from './routes/MainPage.vue'
import OtherMassivePage from './routes/OtherMassivePage.vue'
const routes = [
{ path: '/main', component: MainPage },
{ path: '/other', component: OtherMassivePage }
]
簡(jiǎn)單來(lái)說(shuō)撩鹿，你可以使用require.ensure來(lái)替代import。它能幫你將OtherMassivePage組件以及該組件的所有依賴分割到一個(gè)單獨(dú)的chunk中去悦屏。
現(xiàn)在重啟你的應(yīng)用节沦，你會(huì)發(fā)現(xiàn)并沒(méi)有什么改變。但础爬，當(dāng)你打開(kāi)開(kāi)發(fā)人員工具甫贯，選擇檢查網(wǎng)絡(luò)，再一次訪問(wèn)/other路徑時(shí)看蚜，你會(huì)看到一個(gè)新的文件被加載進(jìn)來(lái)叫搁。
import MainPage from './routes/MainPage.vue'
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')))
const routes = [
{ path: '/main', component: MainPage },
{ path: '/other', component: OtherMassivePage }
]
是的，這看起來(lái)是有點(diǎn)奇怪，相信我渴逻，它并不是那么糟糕疾党。
還有一種方法是將路由對(duì)應(yīng)的組件定義成異步組件。寫(xiě)起來(lái)像這樣：
const OtherMassivePage = resolve => {
// 空數(shù)組用來(lái)指定該路由組件需要加載的依賴
require.ensure([], () => {
resolve(require('./routes/OtherMassivePage.vue'))
})
}
不過(guò)惨奕，你最好不要使用這種包裹起來(lái)的寫(xiě)法雪位，因?yàn)閃ebPack會(huì)使用靜態(tài)分析來(lái)檢測(cè)和分割塊。比較好的做法是梨撞，將他們寫(xiě)成一行以減少空間的占用雹洗。
按組分塊
有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步 chunk 中。只需要 給 chunk 命名卧波，提供require.ensure第三個(gè)參數(shù)作為 chunk 的名稱：
// 這兩條路由被打包在相同的塊中时肿，訪問(wèn)任一路由都會(huì)延遲加載該路由組件
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')
不像許多其他的WebPack任務(wù)，這個(gè)方法出乎意料的簡(jiǎn)單港粱，并且能產(chǎn)生意想不到的有用結(jié)果螃成。如果你正在維護(hù)那些變得臃腫不堪的大型單頁(yè)應(yīng)用，我會(huì)毫不猶豫的將這種方法推薦給你啥容。
End
作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
譯者：jeneser
譯者GitHub：https://github.com/jeneser
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
