路由懒加载

最新推荐文章于 2025-10-12 22:55:30 发布

原创

最新推荐文章于 2025-10-12 22:55:30 发布 · 451 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在 Vue 中实现路由懒加载（也称为 “路由按需加载”）是优化首屏加载性能的关键手段，核心原理是将不同路由对应的组件分割成独立的代码块，仅在访问该路由时才加载对应的组件代码，而非初始加载时一次性加载所有组件。

以下是基于 Vue 3 + Vue Router 4 的详细实现方法：

一、核心原理

通过 ES6 的 动态 import() 语法（返回 Promise），结合 Vue Router 的路由配置，实现组件的延迟加载。Webpack、Vite 等构建工具会自动将动态导入的组件拆分为单独的代码块（Chunk），实现按需加载。

二、基本实现步骤

1. 安装依赖

确保已安装 Vue Router 4（适配 Vue 3）：

bash

npm install vue-router@4
# 或
yarn add vue-router@4

2. 定义懒加载路由组件

在路由配置文件（通常是 router/index.js）中，使用动态 import() 替代静态 import 导入组件：

javascript

运行

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// 静态导入（不推荐，会一次性加载所有组件）
// import Home from '@/views/Home.vue'
// import About from '@/views/About.vue'

// 懒加载路由组件：动态 import() 返回 Promise