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