Vue Router的懶加載路徑的解決方法
單頁應(yīng)用產(chǎn)出的入口chunk大小隨著業(yè)務(wù)的復(fù)雜度線性增加，導(dǎo)致后期加載速度越來越慢。后面就需要對(duì)不同路徑下的模塊進(jìn)行拆分，打包到相應(yīng)的chunk下，按需加載，找到chunk的大小、個(gè)數(shù)和頁面加載速度的平衡點(diǎn)。
解決辦法
.vue模塊文件按需加載，其實(shí)要做到兩件事情：一是標(biāo)記出這是一個(gè)異步組件；二是通知webpack把該組件單獨(dú)產(chǎn)出為一個(gè)chunk。
vue的異步組件
官網(wǎng)給出的異步組件寫法：異步組件是一個(gè)函數(shù)，函數(shù)的返回值是一個(gè)Promise，只是Promise的resolve函數(shù)的參數(shù)是常規(guī)組件的定義本身。
const AsyncCom = () => Promise.resolve({ /* component definition */ })
webpack異步模塊的引入辦法
這個(gè)對(duì)webpack不同的版本來說，用法有點(diǎn)區(qū)別：
webpack版本在1-2之間，可以使用require.ensure來告訴webpack引入了一個(gè)異步模塊
require.ensure([AYNC_MODULE_PATH], CALLBACK, CHUNK_NAME)
其實(shí)require.ensure編譯后是一個(gè)叫_webpack_require_.e的函數(shù)，其本身是一個(gè)thenable實(shí)例，require.ensure的回調(diào)放到_webpack_require_.e.then(fn)里面
為了滿足以上兩個(gè)條件
const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);
webpack>=2的版本可以通過import()來指定動(dòng)態(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
組合多個(gè)異步模塊到一個(gè)chunk文件
對(duì)不同路徑進(jìn)行按需加載，并不一定非得每個(gè)路徑產(chǎn)出一個(gè)chunk，這個(gè)還得按不同的業(yè)務(wù)和場景進(jìn)行區(qū)分，有時(shí)候?qū)τ谕粋€(gè)業(yè)務(wù)下的的小異步模塊可以進(jìn)行合并處理。在webapck版本>2.4時(shí)，可以在import引入的時(shí)候提供一個(gè)/* 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的懶加載路徑的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在?Vue?3?中,封裝自定義指令可以幫助你更好地復(fù)用一些常見的DOM操作邏輯,自定義指令可以用于處理一些特定的用戶交互行為,本文給大家介紹了Vue3封裝自定義指令的示例,需要的朋友可以參考下2024-11-11
ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的方法
觸底時(shí),繼續(xù)向后端發(fā)請(qǐng)求獲取下一頁的數(shù)據(jù),請(qǐng)求回來的數(shù)據(jù)合并給options,這篇文章主要介紹了ElementPlus 中el-select自定義指令實(shí)現(xiàn)觸底加載請(qǐng)求options數(shù)據(jù)的操作方法,需要的朋友可以參考下2024-08-08
Vue3(ts)使用vee-validate表單校驗(yàn),自定義全局驗(yàn)證規(guī)則說明
這篇文章主要介紹了Vue3(ts)使用vee-validate表單校驗(yàn),自定義全局驗(yàn)證規(guī)則說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue2響應(yīng)式系統(tǒng)之set和delete
這篇文章主要介紹了Vue2響應(yīng)式系統(tǒng)之set和delete，通過為對(duì)象收集依賴，將對(duì)象、數(shù)組的修改、刪除也變成響應(yīng)式的了，同時(shí)為用戶提供了和方法，下文詳細(xì)介紹需要的朋友可以參考一下2022-04-04
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Element樹形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能
最近做的項(xiàng)目用到了全選全不選功能,于是就自己動(dòng)手寫了一個(gè),這篇文章主要給大家介紹了關(guān)于Element樹形控件el-tree實(shí)現(xiàn)一鍵全選、反選功能的相關(guān)資料,需要的朋友可以參考下2023-10-10![如何解決前端上傳Formdata中的file為[object?Object]的問題](http://img.jbzj.com/images/xgimg/bcimg6.png)
如何解決前端上傳Formdata中的file為[object?Object]的問題
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
我們通過原理講解以及代碼實(shí)例給大家分享了關(guān)于VUE實(shí)現(xiàn)移動(dòng)下拉刷新的功能，有的朋友可以跟著學(xué)習(xí)下。2018-04-04
vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了Vue選取本地圖片，自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07