快捷導(dǎo)航

Vue實(shí)現(xiàn)路由懶加載的多種方式總結(jié)

更新時(shí)間：2023年11月14日 11:14:46 作者：mieRui

當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候,懶加載可以分割代碼塊,提高頁(yè)面的初始加載效率解決白屏問(wèn)題,下面是幾種常見(jiàn)vue路由懶加載的方法,感興趣的朋友跟隨小編一起看看吧

一、為什么需要路由懶加載

vue在項(xiàng)目打包/構(gòu)建(一般是npm run build 具體看package.json文件)之后，會(huì)生成一個(gè)dist文件夾。在dist文件夾里面又有一個(gè)js/app.js文件，這里主要存放的是整個(gè)項(xiàng)目的業(yè)務(wù)邏輯代碼。隨著項(xiàng)目不斷的開(kāi)發(fā)迭代，業(yè)務(wù)邏輯越來(lái)越多，app.js文件也會(huì)越來(lái)越大。在線上就會(huì)容易出現(xiàn)進(jìn)入首頁(yè)時(shí)所需時(shí)間過(guò)長(zhǎng)或者出現(xiàn)白屏的問(wèn)題

這會(huì)是影響加載時(shí)間的重要因數(shù)。當(dāng)構(gòu)建的項(xiàng)目比較大的時(shí)候，懶加載可以分割代碼塊，提高頁(yè)面的初始加載效率解決白屏問(wèn)題。下面是幾種常見(jiàn)vue路由懶加載的方法

1.ES6推薦方式imprort ()----推薦使用

// 官網(wǎng)可知：下面沒(méi)有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代碼，指定了相同的webpackChunkName，會(huì)合并打包成一個(gè)js文件。
const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')

2 webpack提供的require.ensure()實(shí)現(xiàn)懶加載

1：這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。

2：require.ensure可實(shí)現(xiàn)按需加載資源，包括js,css等。他會(huì)給里面require的文件單獨(dú)打包，不會(huì)和主文件打包在一起。

3：第一個(gè)參數(shù)是數(shù)組，表明第二個(gè)參數(shù)里需要依賴(lài)的模塊，這些會(huì)提前加載。

4：第二個(gè)是回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)里面require的文件會(huì)被單獨(dú)打包成一個(gè)chunk,不會(huì)和主文件打包在一起，這樣就生成了兩個(gè)chunk,第一次加載時(shí)只加載主文件。

5：第三個(gè)參數(shù)是錯(cuò)誤回調(diào)。

6：第四個(gè)參數(shù)是單獨(dú)打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
    }
    }]
})

3.使用vue異步組件resolve

這一種方法比較常見(jiàn)。它主要是使用了resolve的異步機(jī)制，用require代替了import,實(shí)現(xiàn)按需加載，下面是代碼示例

//const 組件名 = resolve => require([‘組件路徑'],resolve)
//（這種情況下一個(gè)組件生成一個(gè)js文件）
const home = resolve => require(['../view/home'],resolve)

4.import和require的比較（了解）

import 是解構(gòu)過(guò)程并且是編譯時(shí)執(zhí)行

require 是賦值過(guò)程并且是運(yùn)行時(shí)才執(zhí)行，也就是異步加載

require的性能相對(duì)于import稍低，因?yàn)閞equire是在運(yùn)行時(shí)才引入模塊并且還賦值給某個(gè)變量

命令	規(guī)范	調(diào)用	本質(zhì)	特點(diǎn)
require	CommonJS規(guī)范	運(yùn)行時(shí)調(diào)用	賦值過(guò)程	非語(yǔ)言層面的標(biāo)準(zhǔn)。社區(qū)方案，提供了服務(wù)器/瀏覽器的模塊加載方案。只能在運(yùn)行時(shí)確定模塊的依賴(lài)關(guān)系及輸入/輸出的變量，無(wú)法進(jìn)行靜態(tài)優(yōu)化。
import	es6+的語(yǔ)法標(biāo)準(zhǔn)	編譯時(shí)調(diào)用	解構(gòu)過(guò)程	語(yǔ)言規(guī)格層面支持模塊功能。支持編譯時(shí)靜態(tài)分析，便于JS引入宏和類(lèi)型檢驗(yàn)。動(dòng)態(tài)綁定