快捷導(dǎo)航

Vue Router的懶加載路徑的解決方法

更新時(shí)間：2018年06月21日 11:05:53 作者：Young Dreamer

這篇文章主要介紹了Vue Router的懶加載路徑的解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

單頁(yè)應(yīng)用產(chǎn)出的入口chunk大小隨著業(yè)務(wù)的復(fù)雜度線性增加，導(dǎo)致后期加載速度越來(lái)越慢。后面就需要對(duì)不同路徑下的模塊進(jìn)行拆分，打包到相應(yīng)的chunk下，按需加載，找到chunk的大小、個(gè)數(shù)和頁(yè)面加載速度的平衡點(diǎn)。

解決辦法

.vue模塊文件按需加載，其實(shí)要做到兩件事情：一是標(biāo)記出這是一個(gè)異步組件；二是通知webpack把該組件單獨(dú)產(chǎn)出為一個(gè)chunk。

vue的異步組件

官網(wǎng)給出的異步組件寫(xiě)法：異步組件是一個(gè)函數(shù)，函數(shù)的返回值是一個(gè)Promise，只是Promise的resolve函數(shù)的參數(shù)是常規(guī)組件的定義本身。

const AsyncCom = () => Promise.resolve({ /* component definition */ })

webpack異步模塊的引入辦法

這個(gè)對(duì)webpack不同的版本來(lái)說(shuō)，用法有點(diǎn)區(qū)別：

webpack版本在1-2之間，可以使用require.ensure來(lái)告訴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的版本可以通過(guò)import()來(lái)指定動(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ù)和場(chǎng)景進(jìn)行區(qū)分，有時(shí)候?qū)τ谕粋€(gè)業(yè)務(wù)下的的小異步模塊可以進(jìn)行合并處理。在webapck版本>2.4時(shí)，可以在import引入的時(shí)候提供一個(gè)/* webpackChunkName: CHUNK_NAME*/注釋，來(lái)表示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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: