Vue路由懒加载核心是用import()替代静态import，推荐Vue 3使用defineAsyncComponent显式声明异步组件并支持loading/error处理，也可直接在路由配置中使用import()函数，Webpack/Vite自动拆分chunk并支持命名与预取优化。
在 Vue 中结合动态导入实现路由懒加载，核心是用 import() 替代静态 import，让组件只在对应路由被访问时才加载，从而减少首屏体积。
使用 defineAsyncComponent 包裹异步组件（推荐 Vue 3）
Vue 3 推荐用 defineAsyncComponent 显式声明异步组件，配合 import() 实现懒加载，同时支持 loading、error 状态处理：
import { defineAsyncComponent } from 'vue'
import { createRouter } from 'vue-router'
<p>const Home = defineAsyncComponent(() => import('@/views/Home.vue'))
const About = defineAsyncComponent({
loader: () => import('@/views/About.vue'),
loadingComponent: () => import('@/components/Loading.vue'),
errorComponent: () => import('@/components/Error.vue'),
delay: 200,
timeout: 5000
})</p><p>const router = createRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})直接在路由配置中使用 import()（兼容 Vue 2 和 Vue 3）
最简方式：路由的 component 字段直接赋值为一个返回 Promise 的函数（即动态导入），Vue Router 会自动等待解析完成：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
const routes = [
{
path: '/user/:id',
component: () => import('@/views/UserProfile.vue')
},
{
path: '/admin',
component: () => import('@/views/Admin.vue'),
meta: { requiresAuth: true }
}
]- Webpack/Vite 会自动将每个
import()拆分为独立 chunk - 可配合
/* webpackChunkName: "user" */或/* webpackPrefetch: true */控制 chunk 名称或预取行为（Vite 也支持类似注释） - 注意不要在循环或条件中动态拼接路径，否则 Webpack 无法静态分析，会导致整个目录被打包
按模块分组打包（优化 chunk 复用）
多个路由组件属于同一功能域时，可通过相同 chunk name 合并打包，避免重复依赖：
立即学习“Java免费学习笔记（深入）”；
{
path: '/order/list',
component: () => import(/* webpackChunkName: "order" */ '@/views/OrderList.vue')
},
{
path: '/order/detail/:id',
component: () => import(/* webpackChunkName: "order" */ '@/views/OrderDetail.vue')
}- 同名
webpackChunkName会让这两个组件及共用模块打到同一个 chunk 文件中 - Vite 中使用
/* vitePreload: false */或/* viteIgnore */可控制预加载行为 - 搭配
import.meta.env.PROD可在开发时禁用懒加载便于调试
注意事项与常见问题
- 确保构建工具（Webpack/Vite）已启用代码分割能力（默认开启）
- 服务端渲染（SSR）需额外配置
ssr: true或使用defineAsyncComponent的ssrLoadComponent选项 - 动态导入路径必须是字符串字面量，不能是变量或模板字符串（如
import(`@/views/${name}.vue`)不被支持） - 路由守卫中访问
to.matched的组件可能尚未加载完成，建议在beforeEach中用resolveComponent或等待router.isReady()
