溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
單頁應用產出的入口chunk大小隨著業務的復雜度線性增加，導致后期加載速度越來越慢。后面就需要對不同路徑下的模塊進行拆分，打包到相應的chunk下，按需加載，找到chunk的大小、個數和頁面加載速度的平衡點。
解決辦法
.vue模塊文件按需加載，其實要做到兩件事情：一是標記出這是一個異步組件；二是通知webpack把該組件單獨產出為一個chunk。
vue的異步組件
官網給出的異步組件寫法：異步組件是一個函數，函數的返回值是一個Promise，只是Promise的resolve函數的參數是常規組件的定義本身。
const AsyncCom = () => Promise.resolve({ /* component definition */ })
webpack異步模塊的引入辦法
這個對webpack不同的版本來說，用法有點區別：
webpack版本在1-2之間，可以使用require.ensure來告訴webpack引入了一個異步模塊
require.ensure([AYNC_MODULE_PATH], CALLBACK, CHUNK_NAME)
其實require.ensure編譯后是一個叫_webpack_require_.e的函數，其本身是一個thenable實例，require.ensure的回調放到_webpack_require_.e.then(fn)里面
為了滿足以上兩個條件
const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);
webpack>=2的版本可以通過import()來指定動態引入的模塊
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文件
對不同路徑進行按需加載，并不一定非得每個路徑產出一個chunk，這個還得按不同的業務和場景進行區分，有時候對于同一個業務下的的小異步模塊可以進行合并處理。在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產出的chunk文件名
chunkFilename: utils.assetsPath('js/[chunkname].[chunkhash].chunk.js'),
......
}
總結
以上所述是小編給大家介紹的Vue Router的懶加載路徑的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
