Vue路由懶加載與組件懶加載示例詳解
前言
在構(gòu)建大型單頁(yè)應(yīng)用（SPA）時(shí)，JavaScript 包體積（Bundle Size）往往會(huì)隨著業(yè)務(wù)增長(zhǎng)而膨脹，導(dǎo)致首屏加載緩慢、白屏?xí)r間長(zhǎng)。懶加載（Lazy Loading） 是解決這一問(wèn)題的核心方案。其本質(zhì)是將代碼分割成多個(gè)小的 chunk，僅在需要時(shí)才從服務(wù)器下載。
一、 路由懶加載：按需拆分頁(yè)面
1. 為什么需要路由懶加載？
如果不使用懶加載，所有路由對(duì)應(yīng)的組件都會(huì)被打包進(jìn)同一個(gè) app.js 中。用戶訪問(wèn)首頁(yè)時(shí)，瀏覽器不得不下載整個(gè)應(yīng)用的邏輯，造成嚴(yán)重的性能浪費(fèi)。
2. 實(shí)現(xiàn)方式：ESimport()
利用動(dòng)態(tài)導(dǎo)入語(yǔ)法，打包工具（如 Vite 或 Webpack）會(huì)自動(dòng)進(jìn)行 代碼分割（Code Splitting） 。
// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 靜態(tài)導(dǎo)入：會(huì)隨著主包一起加載，適合首頁(yè)
import Home from '@/views/Home.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// 動(dòng)態(tài)導(dǎo)入：只有訪問(wèn) /about 路徑時(shí)，瀏覽器才會(huì)請(qǐng)求該組件對(duì)應(yīng)的 JS 文件
component: () => import('@/views/About.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
二、 組件懶加載：細(xì)粒度控制
有些組件（如彈窗、復(fù)雜的圖表、第三方重型庫(kù)）并不需要在頁(yè)面初次渲染時(shí)立即存在。
1. Vue 3 的defineAsyncComponent
在 Vue 3 中，異步組件必須使用 defineAsyncComponent 進(jìn)行顯式聲明。
示例
<template>
<div>
<h1>主頁(yè)面</h1>
<button @click="showChart = true">加載并顯示報(bào)表</button>
<AsyncChart v-if="showChart" />
</div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
const showChart = ref<boolean>(false);
// 顯式定義異步組件
const AsyncChart = defineAsyncComponent(() =>
import('@/components/BigChart.vue')
);
// 高級(jí)配置（可選）：帶加載狀態(tài)
const AsyncComponentWithConfig = defineAsyncComponent({
loader: () => import('./components/MyComponent.vue'),
loadingComponent: LoadingComponent, // 加載過(guò)程中顯示的組件
errorComponent: ErrorComponent, // 加載失敗時(shí)顯示的組件
delay: 200, // 展示加載組件前的延遲時(shí)間
timeout: 3000 // 超時(shí)時(shí)間
});
</script>
2. Vue 2 中直接使用import函數(shù)聲明異步組件
export default {
components: {
// 定義一個(gè)異步組件
'MyLazyComponent': () => import('./components/MyLazyComponent.vue')
}
}
三、 底層原理與分包策略
1. 打包工具的配合
當(dāng)你使用 import() 時(shí)：
Vite/Rollup：會(huì)自動(dòng)將該組件及其依賴提取到一個(gè)獨(dú)立的
.js文件中。Webpack：會(huì)生成一個(gè)
chunk，你可以通過(guò)“魔法注釋”自定義 chunk 的名稱：const About = () => import(/* webpackChunkName: "about-group" */ './About.vue')
四、 總結(jié)
首屏優(yōu)化：建議首頁(yè)（Home）使用靜態(tài)導(dǎo)入，而其他非核心路徑、非首屏展示的彈窗/插件全部使用懶加載。
用戶體驗(yàn)：使用異步組件時(shí)，建議配合
loadingComponent，避免加載過(guò)程中組件區(qū)域出現(xiàn)突兀的空白 。
到此這篇關(guān)于Vue路由懶加載與組件懶加載的文章就介紹到這了,更多相關(guān)Vue路由與組件懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了vue可用于拖動(dòng)排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇vue路由跳轉(zhuǎn)時(shí)判斷用戶是否登錄功能的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue組件教程之Toast(Vue.extend 方式)詳解
這篇文章主要給大家介紹了關(guān)于Vue組件教程之Toast(Vue.extend 方式)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
本文通過(guò)實(shí)例代碼給大家介紹了Vue lazyload圖片懶加載的相關(guān)知識(shí)，通過(guò)導(dǎo)入配置等操作src/main.jswenj ,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-12-12
vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過(guò)程詳解
前端的業(yè)務(wù)開發(fā)中會(huì)遇到不使用分頁(yè)方式來(lái)加載長(zhǎng)列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3渲染器將虛擬DOM轉(zhuǎn)為真實(shí)DOM,支持高效更新與跨平臺(tái)；渲染函數(shù)（h()）替代JSX,更靈活,與CompositionAPI結(jié)合可優(yōu)化性能,提升復(fù)雜場(chǎng)景下的開發(fā)效率與應(yīng)用性能2025-08-08
Vue關(guān)鍵字搜索功能實(shí)戰(zhàn)小案例
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue關(guān)鍵字搜索功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue前端開發(fā)之實(shí)現(xiàn)交錯(cuò)過(guò)渡動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)交錯(cuò)過(guò)渡動(dòng)畫效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11