Vue 3 中异步组件与路由懒加载是天然互补的组合：路由懒加载按路径切分代码块，异步组件按需加载子模块，二者叠加实现包体积、首屏渲染、资源调度三重优化。
Vue 3 中异步组件与路由懒加载不是“二选一”的方案，而是天然互补的组合：路由懒加载负责按路径切分代码块，异步组件负责按需加载具体子模块或功能区域。两者叠加，能从包体积、首屏渲染、资源调度三个层面实现真正的双重优化。
路由层用动态 import() 切分主代码块
这是懒加载的基础动作，目标是让每个路由页面不打包进 main.js。
- 在 router 配置中，把
component: Home改为component: () => import('@/views/Home.vue') - Webpack 或 Vite 会自动识别该语法，生成独立 chunk（如
home.abc123.js） - 访问
/home时才发起该 JS 请求，其他路由完全不加载 - 可加注释统一 chunk 名，比如
/* webpackChunkName: "page-home" */，便于调试和缓存管理
组件层用 defineAsyncComponent 加载非关键模块
即使在某个路由页内，也存在“非首屏必需”的部分——比如折叠面板里的报表图表、权限控制的后台设置区、编辑器插件等。这些适合用异步组件二次拆分。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 局部注册：
const ChartPanel = defineAsyncComponent(() => import('./ChartPanel.vue')) - 支持加载态和错误态：
loadingComponent显示骨架屏，errorComponent提供重试按钮 - 设
delay: 300避免闪动：只在加载超 300ms 后才显示 loading，短时间直接等待 - 设
timeout: 10000防止卡死，并配合onError实现网络失败自动重试
用 Suspense 统一协调加载体验
当一个路由页里同时有多个异步组件（比如顶部导航异步、主体内容异步、侧边工具栏异步），手动维护 loading 状态极易混乱。Suspense 就是为此设计的协调层。
立即学习“前端免费学习笔记（深入）”；
- 包裹整个页面或区域：
<Suspense><template #default><RouterView /></template><template #fallback><PageSkeleton /></template></Suspense> - 它会等待所有嵌套的异步组件（包括
defineAsyncComponent和动态路由组件）全部 resolve 后再渲染 - 如果某组件加载失败，不会中断整个 fallback，但需配合
ErrorBoundary捕获并隔离错误 - 注意：Suspense 对 setup script 中的 async/await 不起作用，只响应异步组件的加载生命周期
预加载策略补足关键路径
懒加载虽好，但用户点击后才有请求，存在感知延迟。对高频跳转或用户明显即将访问的路由，可主动预加载。
- 路由守卫中触发：
router.beforeEach判断目标是“设置页”，就提前调用import('@/views/Setting.vue')（不 await，只触发加载） - Vite 下可用
import.meta.webpackPrefetch或import.meta.webpackPreload注释 - 结合用户行为预测（如鼠标悬停菜单项 300ms 后预加载对应路由）进一步优化体验
