Vue Router 配合 Vite 实现组件按需异步加载，核心是用动态 import() 替代静态引入，由 component 字段接收返回 Promise 的函数；Vite 原生支持并自动分 chunk，推荐 manualChunks 分组、defineAsyncComponent 处理加载状态，并监控 chunk 大小。
Vue Router 配合 Vite 实现组件按需异步加载，核心是用动态 import() 替代静态引入，并由 Vue Router 的 component 字段直接接收该异步函数。Vite 原生支持 ES 动态导入，无需额外插件或 Babel 配置，构建时自动将每个 import() 拆分为独立 chunk，运行时按路由访问触发网络请求加载。
路由配置写法：标准异步组件声明
在路由定义中，直接把 component 设为返回 import() Promise 的函数：
-
Vue 3 + Composition API（推荐）：
component: () => import('@/views/Home.vue') -
Vue 2 或选项式写法同样适用：
component: () => import('./UserManage.vue') - 避免使用已废弃的
require.ensure或System.import，Vite 不兼容
命名 Chunk：提升可维护性与缓存效率
Vite 默认不识别 /* webpackChunkName: "xxx" */ 注释，但可通过以下方式实现命名效果：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 使用
vite-plugin-chunk-names插件，支持类似 Webpack 的注释语法 - 更推荐的方式是在
vite.config.ts中配置build.rollupOptions.output.manualChunks，按模块归类，例如：user: ['@/views/UserProfile.vue', '@/views/UserList.vue'] - 同一业务域的多个路由共用一个 chunk 名，减少请求数，也利于长期缓存
增强体验：预加载与错误处理
懒加载不是“只等用户点”，还可以主动优化关键路径：
立即学习“前端免费学习笔记（深入）”；
- Vite 构建后自动注入
<link rel="modulepreload">，对首屏路由对应 chunk 已做预加载 - 高频跳转场景（如登录后跳首页），可在全局导航守卫中提前调用一次
import()，实现软预加载 - 需要加载状态或错误兜底时，用
defineAsyncComponent封装：
可配loadingComponent、errorComponent、delay和timeout
大小监控与分包合理性
单个懒加载 chunk 过大会抵消优化效果：
- 设置
build.chunkSizeWarningLimit（单位 KB），建议控制在 200–300 KB 内 - 检查是否误将大图、大 JSON 或未拆分的第三方库（如完整
element-plus）打入某个路由 chunk - 搭配
rollup-plugin-visualizer分析产物结构，确认分包符合预期
