Vue异步组件按需加载，路由级懒加载优先使用import()配合webpackChunkName注释，非路由场景用defineAsyncComponent控制加载体验，交互触发加载需自行管理状态，避免在v-for或computed中滥用及高频组件异步化。
Vue 异步组件不是“等页面跑起来再加载”，而是让组件在真正需要时才下载、解析、挂载——这直接砍掉首屏 JS 体积，把 FCP（首次内容绘制）拉进 2.5 秒安全线。
路由级懒加载：最该优先做的一步
90% 的首屏慢，问题出在把所有页面组件打包进一个 chunk。Vue Router 天然支持异步加载，无需 defineAsyncComponent 包裹，直接写 import() 就行：
- 每个 route 对应独立 JS 文件，Webpack/Vite 自动命名 + hash，缓存友好
- 推荐加 webpackChunkName 注释，比如
import(/* webpackChunkName: "user-list" */ '@/views/UserList.vue')，方便调试和长期缓存 - 用户访问 /user 时才拉 user-list.[hash].js，首页完全不加载它
defineAsyncComponent：控制非路由场景的加载体验
弹窗、编辑器、图表等低频重型组件，适合用 defineAsyncComponent 精细管理：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 基础用法：
defineAsyncComponent(() => import('./Editor.vue')) - 带 loading/error：
defineAsyncComponent({ loader: () => import('./Chart.vue'), loadingComponent: Spinner, errorComponent: Alert, delay: 200, timeout: 4000 }) - delay 避免快速加载时 loading 一闪而过；timeout 防止请求卡死无反馈
条件触发加载：交互后才 resolve 组件
点击按钮、展开折叠面板、切换 Tab 才加载对应模块，适合强交互区域：
立即学习“前端免费学习笔记（深入）”；
- setup 中用 ref 初始化为 null，点击时 await import 并赋值
- 模板用
v-if="Editor"控制渲染，避免空占位或提前 resolve - 注意：这种方式绕过 defineAsyncComponent 的 loading/error 逻辑，需自行维护 loading/error 状态
避坑要点：别让优化变成负优化
异步不是万能膏药，几处关键细节容易翻车：
- 不要在 v-for 或 computed 内反复调用 import()，会触发多次请求
- SSR 场景下，服务端需同步解析异步组件（Nuxt/Vite SSR 插件已内置支持）
- 避免把高频组件（如按钮、输入框）设为异步，反而增加 runtime 开销
