Vue.js如何實(shí)現(xiàn)路由懶加載淺析

前言

懶加載也就是延遲加載，不知道大家在工作中有沒(méi)有發(fā)現(xiàn)，當(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里，只需要在路由被訪(fǎng)問(wèn)時(shí)按需加載。話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的實(shí)現(xiàn)過(guò)程：

使用

假設(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組件以及該組件的所有依賴(lài)分割到一個(gè)單獨(dú)的chunk中去。

現(xiàn)在重啟你的應(yīng)用，你會(huì)發(fā)現(xiàn)并沒(méi)有什么改變。但，當(dāng)你打開(kāi)開(kāi)發(fā)人員工具，選擇檢查網(wǎng)絡(luò)，再一次訪(fǎng)問(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)指定該路由組件需要加載的依賴(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 的名稱(chēng)：

// 這兩條路由被打包在相同的塊中，訪(fǎng)問(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ì)毫不猶豫的將這種方法推薦給你。

作者：Joshua Bemenderfer

原文地址: lazy-loading-routes

譯者：jeneser

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com