91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue.js如何實現路由懶加載淺析

發布時間:2020-09-12 09:27:18 來源:腳本之家 閱讀:163 作者:jenes 欄目:web開發

前言

懶加載也就是延遲加載,不知道大家在工作中有沒有發現,當你的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

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

全州县| 蒲城县| 邵阳县| 祥云县| 南宫市| 五大连池市| 新昌县| 内丘县| 龙州县| 安福县| 南宫市| 兴安县| 台东县| 灵山县| 崇文区| 利川市| 南溪县| 嘉荫县| 永康市| 阳朔县| 宕昌县| 维西| 宁晋县| 阳春市| 启东市| 垫江县| 贵港市| 德格县| 商河县| 南康市| 寿阳县| 涪陵区| 义马市| 车致| 宾阳县| 富锦市| 织金县| 海宁市| 石嘴山市| 津市市| 香港|