动态组件和异步组件是Vue性能优化的关键：前者通过<component :is>按需切换组件，后者通过defineAsyncComponent或() => import()延迟加载。配合<KeepAlive>可缓存状态，叠加<Suspense>统一处理异步状态，显著降低包体积与首屏时间。
动态组件和异步组件是 Vue 应用性能优化的两个关键手段：前者解决“什么时候渲染哪个组件”，后者解决“要不要现在加载这个组件”。合理搭配使用，既能保持交互流畅，又能控制包体积和首屏时间。
动态组件：按需切换，避免冗余分支
用 <component :is="xxx"> 替代一堆 v-if/v-else，让模板更简洁、逻辑更集中。它不预加载任何组件，只在绑定值变化时销毁旧实例、挂载新实例。
- 支持三种绑定方式：组件对象（推荐，尤其
setup中）、注册的组件名（需全局/局部注册）、异步组件函数 - 默认每次切换都会重新初始化——输入框清空、滚动位置重置、请求重发
- 若需保留状态（比如 Tab 页签里的表单或列表位置），必须用
<KeepAlive>包裹 -
<KeepAlive>要求组件有明确的name（显式声明或文件名推导），否则缓存无效
异步组件：延迟加载，减小初始体积
把大组件拆成独立 chunk，等真正要用时才发起请求。Webpack/Vite 会自动做代码分割，打包后生成单独的 JS 文件。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 基础写法：
defineAsyncComponent(() => import('./MyModal.vue'))（Vue 3）或直接() => import('./...')（Vue 2.6+ / Vue 3） - 带加载态的高级写法：返回一个配置对象，可指定 loading 组件、错误组件、延迟显示时间和超时阈值
- 异步组件本身会被缓存——首次加载成功后，后续切换直接复用，不会重复请求
- 配合路由使用最常见：
{ path: '/admin', component: () => import('@/views/Admin.vue') }
组合策略：动态 + 异步 + 缓存
三者叠加才是生产环境的典型模式。例如多标签页系统：每个 tab 对应一个异步加载的组件，切换时用 <component :is> 渲染，再用 <KeepAlive> 防止反复初始化。
立即学习“前端免费学习笔记（深入）”；
- Tab 切换时，
<KeepAlive>缓存的是异步组件的已加载实例，不是源码 chunk - 可配合
include或exclude属性精准控制哪些组件需要缓存 - 异步加载失败时，错误组件会替代目标组件渲染；超时未响应则触发
error回退 - 注意：
<Suspense>（Vue 3）可统一处理异步依赖的 loading/error 状态，比单个组件配置更简洁
实际优化效果参考
在中大型项目中，合理应用这两类组件通常能带来明显收益：
- 首屏 JS 包体积下降 30%～50%，从 1.8MB 降到 1.1MB 左右
- 首屏加载时间缩短约 40%～60%，尤其对网络较慢的用户更明显
- Tab 切换卡顿消失，表单数据、分页状态、滚动位置自然保留
- 内存占用更可控——未激活的异步组件不执行 setup，也不创建实例
