Vue Router的懶加載路徑的解決方法
單頁應(yīng)用產(chǎn)出的入口chunk大小隨著業(yè)務(wù)的復(fù)雜度線性增加,導(dǎo)致后期加載速度越來越慢。后面就需要對不同路徑下的模塊進(jìn)行拆分,打包到相應(yīng)的chunk下,按需加載,找到chunk的大小、個數(shù)和頁面加載速度的平衡點。
解決辦法
.vue模塊文件按需加載,其實要做到兩件事情:一是標(biāo)記出這是一個異步組件;二是通知webpack把該組件單獨產(chǎn)出為一個chunk。
vue的異步組件
官網(wǎng)給出的異步組件寫法:異步組件是一個函數(shù),函數(shù)的返回值是一個Promise,只是Promise的resolve函數(shù)的參數(shù)是常規(guī)組件的定義本身。
const AsyncCom = () => Promise.resolve({ /* component definition */ })
webpack異步模塊的引入辦法
這個對webpack不同的版本來說,用法有點區(qū)別:
webpack版本在1-2之間,可以使用require.ensure來告訴webpack引入了一個異步模塊
require.ensure([AYNC_MODULE_PATH], CALLBACK, CHUNK_NAME)
其實require.ensure編譯后是一個叫_webpack_require_.e的函數(shù),其本身是一個thenable實例,require.ensure的回調(diào)放到_webpack_require_.e.then(fn)里面
為了滿足以上兩個條件
const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME); webpack>=2的版本可以通過import()來指定動態(tài)引入的模塊 import('./A.vue') // returns a Promise
Vue Router中的懶加載路徑的使用辦法
// const A = resolve => require.ensure([], () => resolve(require('./a.vue')), 'A'); const A = () => import('./a.vue') const router = new VueRouter({ routes: [ { path: '/a', component: A } ] })
Tips
組合多個異步模塊到一個chunk文件
對不同路徑進(jìn)行按需加載,并不一定非得每個路徑產(chǎn)出一個chunk,這個還得按不同的業(yè)務(wù)和場景進(jìn)行區(qū)分,有時候?qū)τ谕粋€業(yè)務(wù)下的的小異步模塊可以進(jìn)行合并處理。在webapck版本>2.4時,可以在import引入的時候提供一個/* webpackChunkName: CHUNK_NAME*/注釋,來表示chunkname,
const A = () => import(/* webpackChunkName: "group-a-b-c" */ './a.vue') const B = () => import(/* webpackChunkName: "group-a-b-c" */ './b.vue') const C = () => import(/* webpackChunkName: "group-a-b-c" */ './c.vue') // webpack.conf.js output: { ...... // 使用code-split產(chǎn)出的chunk文件名 chunkFilename: utils.assetsPath('js/[chunkname].[chunkhash].chunk.js'), ...... }
總結(jié)
以上所述是小編給大家介紹的Vue Router的懶加載路徑的解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法,具有一定的參考價值,有興趣的可以了解一下2017-07-07vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08element-ui中頁面縮放時table表格內(nèi)容錯位的解決
這篇文章主要介紹了element-ui中頁面縮放時table表格內(nèi)容錯位的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08在Vue中實現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)
本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時性、便捷性、靈活性和定制化優(yōu)勢,以及減輕后端服務(wù)器負(fù)擔(dān)的特點,詳細(xì)介紹了ExcelJS和FileSaver.js兩個工具庫的使用方法和主要功能,最后通過Vue實現(xiàn)了Excel的導(dǎo)出功能2024-10-10