溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
懶加載也就是延遲加載，不知道大家在工作中有沒有發現，當你的SPA（單頁應用程序）變得復雜時，打包構建后的Javascript包會變得非常大，以至于嚴重影響頁面的加載時間。幸運的是：vue-router支持WebPack內置的異步模塊加載系統。所以，那些使用較少的路由組件不必打包進bundles里，只需要在路由被訪問時按需加載。話不多說了，來一起看看詳細的實現過程：
使用
假設你的路由配置是這樣的：
import MainPage from './routes/MainPage.vue'
import OtherMassivePage from './routes/OtherMassivePage.vue'
const routes = [
{ path: '/main', component: MainPage },
{ path: '/other', component: OtherMassivePage }
]
簡單來說，你可以使用require.ensure來替代import。它能幫你將OtherMassivePage組件以及該組件的所有依賴分割到一個單獨的chunk中去。
現在重啟你的應用，你會發現并沒有什么改變。但，當你打開開發人員工具，選擇檢查網絡，再一次訪問/other路徑時，你會看到一個新的文件被加載進來。
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 }
]
是的，這看起來是有點奇怪，相信我，它并不是那么糟糕。
還有一種方法是將路由對應的組件定義成異步組件。
寫起來像這樣：
const OtherMassivePage = resolve => {
// 空數組用來指定該路由組件需要加載的依賴
require.ensure([], () => {
resolve(require('./routes/OtherMassivePage.vue'))
})
}
不過，你最好不要使用這種包裹起來的寫法，因為WebPack會使用靜態分析來檢測和分割塊。比較好的做法是，將他們寫成一行以減少空間的占用。
按組分塊
有時候我們想把某個路由下的所有組件都打包在同個異步 chunk 中。只需要 給 chunk 命名，提供require.ensure第三個參數作為 chunk 的名稱：
// 這兩條路由被打包在相同的塊中，訪問任一路由都會延遲加載該路由組件
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任務，這個方法出乎意料的簡單，并且能產生意想不到的有用結果。如果你正在維護那些變得臃腫不堪的大型單頁應用，我會毫不猶豫的將這種方法推薦給你。
作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
譯者：jeneser
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
