資訊專欄INFORMATION COLUMN
摘要：所以，那些使用較少的路由組件不必打包進里，只需要在路由被訪問時按需加載。寫起來像這樣空數(shù)組用來指定該路由組件需要加載的依賴不過，你最好不要使用這種包裹起來的寫法，因為會使用靜態(tài)分析來檢測和分割塊。
作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
譯者：jeneser
使用當(dāng)你的SPA（單頁應(yīng)用程序）變得復(fù)雜時，打包構(gòu)建后的Javascript包會變得非常大，以至于嚴(yán)重影響頁面的加載時間。幸運的是：vue-router支持WebPack內(nèi)置的異步模塊加載系統(tǒng)。所以，那些使用較少的路由組件不必打包進bundles里，只需要在路由被訪問時按需加載。
假設(shè)你的路由配置是這樣的：
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中去。
現(xiàn)在重啟你的應(yīng)用，你會發(fā)現(xiàn)并沒有什么改變。但，當(dāng)你打開開發(fā)人員工具，選擇檢查網(wǎng)絡(luò)，再一次訪問/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 }
]
是的，這看起來是有點奇怪，相信我，它并不是那么糟糕。
還有一種方法是將路由對應(yīng)的組件定義成異步組件。寫起來像這樣：
const OtherMassivePage = resolve => {
// 空數(shù)組用來指定該路由組件需要加載的依賴
require.ensure([], () => {
resolve(require("./routes/OtherMassivePage.vue"))
})
}
不過，你最好不要使用這種包裹起來的寫法，因為WebPack會使用靜態(tài)分析來檢測和分割塊。比較好的做法是，將他們寫成一行以減少空間的占用。
按組分塊有時候我們想把某個路由下的所有組件都打包在同個異步 chunk 中。只需要?給 chunk 命名，提供require.ensure第三個參數(shù)作為 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任務(wù)，這個方法出乎意料的簡單，并且能產(chǎn)生意想不到的有用結(jié)果。如果你正在維護那些變得臃腫不堪的大型單頁應(yīng)用，我會毫不猶豫的將這種方法推薦給你。
End
作者：Joshua Bemenderfer
原文地址: lazy-loading-routes
譯者：jeneser
譯者GitHub：https://github.com/jeneser
版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
勘誤&討論： New issue
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/87253.html
摘要：因為用戶不用在第一次進入應(yīng)用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護的代碼高階函數(shù)可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
摘要：現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)用于分割應(yīng)用程序最實用的模式。本系列文章基于對性能優(yōu)化過程的學(xué)習(xí)。路徑時才被下載。為了便于理解，文件名稱并不是由生成的真實名稱。接下來，我們將學(xué)習(xí)其他部分和單獨的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中，我們學(xué)習(xí)了什么是代碼分割，它是如何與 Webpack 一起工作的，以及如何在Vue應(yīng)用程序中使用延遲加載。現(xiàn)在，我們將更深入地研究，并學(xué)習(xí)...
摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊?？偨Y(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動優(yōu)先（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...
摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時，老司機們首先就會告訴你其實是個沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...
閱讀 867·2021-10-25 09:45
閱讀 3284·2021-09-22 14:58
閱讀 3844·2021-08-31 09:43
閱讀 914·2019-08-30 15:55
閱讀 917·2019-08-29 13:51
閱讀 1225·2019-08-29 13:02
閱讀 3483·2019-08-29 12:52
閱讀 1961·2019-08-26 13:27
