欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年06月21日 11:05:53   作者:Young Dreamer  
這篇文章主要介紹了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安裝及使用方法

    本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • vue實現(xiàn)拍照或錄像的示例代碼

    vue實現(xiàn)拍照或錄像的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何利用vue實現(xiàn)拍照或錄像的功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-11-11
  • vue圖片懶加載的兩種方法詳解

    vue圖片懶加載的兩種方法詳解

    懶加載是一種網(wǎng)頁優(yōu)化技術(shù),也被稱為延遲加載,它的主要目的是在網(wǎng)頁加載時,只加載當(dāng)前可見區(qū)域內(nèi)的內(nèi)容,而延遲加載其他不可見區(qū)域的內(nèi)容,從而提高網(wǎng)頁的加載速度和性能,這篇文章主要介紹了vue圖片懶加載的兩種方法,需要的朋友可以參考下
    2023-07-07
  • vue使用watch 觀察路由變化,重新獲取內(nèi)容

    vue使用watch 觀察路由變化,重新獲取內(nèi)容

    本篇文章主要介紹了vue使用watch 觀察路由變化,重新獲取內(nèi)容 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • Vue引入ElementUI并使用的詳細(xì)過程

    Vue引入ElementUI并使用的詳細(xì)過程

    Element UI是一個基于Vue 2.0的桌面端組件庫,旨在構(gòu)建簡潔、快速的用戶界面,這篇文章主要介紹了Vue如何引入ElementUI并使用,需要的朋友可以參考下
    2024-06-06
  • vue性能優(yōu)化之cdn引入vue-Router的問題

    vue性能優(yōu)化之cdn引入vue-Router的問題

    這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 在Vue3項目中關(guān)閉ESLint的完整步驟

    在Vue3項目中關(guān)閉ESLint的完整步驟

    實際上在學(xué)習(xí)過程中,你會發(fā)現(xiàn)eslint檢查特別討厭,這個時候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下
    2023-11-11
  • element-ui中頁面縮放時table表格內(nèi)容錯位的解決

    element-ui中頁面縮放時table表格內(nèi)容錯位的解決

    這篇文章主要介紹了element-ui中頁面縮放時table表格內(nèi)容錯位的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 基于vue實現(xiàn)分頁效果

    基于vue實現(xiàn)分頁效果

    這篇文章主要介紹了基于vue實現(xiàn)分頁效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 在Vue中實現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)

    在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

最新評論