溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue實現(xiàn)路由懶加載的3種方法示例

發(fā)布時間：2020-09-24 17:51:34 來源：腳本之家 閱讀：145 作者：小小1001 欄目：開發(fā)技術(shù)

前言

路由懶加載在訪問頁面的時候非常重要，能夠提高首頁加載速度，避免出現(xiàn)加載時候白頁，如果沒有懶加載，webpack打包后的文件會非常大。

  • import按需加載（常用）
  • vue異步組件
  • webpack提供的require.ensure()

1、import按需加載（常用）

允許將不同的組件打包到一個異步塊中，需指定了相同的webpackChunkName。

把組件按組分塊

const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue')
const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue')
const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')

注意：如果使用的是 babel，需要安裝syntax-dynamic-import插件，才能使 babel 可以正確地解析語法。

2、vue異步組件

使用vue的異步組件 , 實現(xiàn)按需加載，每個組件生成一個js文件，實現(xiàn)組件的懶加載。

/* vue異步組件 */
{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }

3、webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術(shù)，實現(xiàn)按需加載。

這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。

語法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

dependencies: 依賴的模塊數(shù)組

callback: 回調(diào)函數(shù)，該函數(shù)調(diào)用時會傳一個require參數(shù)

chunkName: 模塊名，用于構(gòu)建時生成文件時命名使用

const A= resolve => require.ensure([], () => resolve(require('@/components/A')), 'A');

注意：requi.ensure的模塊只會被下載下來，不會被執(zhí)行，只有在回調(diào)函數(shù)使用require(模塊名)后，這個模塊才會被執(zhí)行。

總結(jié)

到此這篇關(guān)于vue實現(xiàn)路由懶加載的3種方法示例的文章就介紹到這了,更多相關(guān)vue路由懶加載內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手