Vue异步组件按需加载核心是延迟加载非首屏组件以减小首屏包体积，路由级用() => import('./Home.vue')实现懒加载，非路由场景用defineAsyncComponent配合v-if、loading/error反馈及防抖参数实现真正按需加载。
Vue 基础中使用异步组件实现按需加载，核心是让组件“不打包进首屏 JS”，而是在真正需要渲染时才发起加载。这能显著缩小初始包体积，把首屏时间压进 2.5 秒内。
路由级懒加载：优先做、最有效
这是提升首屏性能的第一步，适用于页面级组件（如 Home、UserList）：
- 在 Vue Router 的 routes 配置里，把 component: import('./Home.vue') 写成函数形式：component: () => import('./Home.vue')
- 推荐加上 Webpack/Vite 的魔法注释，比如 import(/* webpackChunkName: "home" */ './Home.vue')，方便调试和长期缓存
- 访问 / 时只加载首页相关代码，跳转到 /user 才拉 user.[hash].js，首页完全不感知
非路由场景用 defineAsyncComponent
弹窗、编辑器、图表等非首屏必需的重型组件，适合用 defineAsyncComponent 管控：
- 基础写法：defineAsyncComponent(() => import('./Modal.vue'))，注册后像普通组件一样用
- 它不会立刻加载，只有第一次 v-if="show" 为 true 或出现在 DOM 中时才触发请求
- 避免无条件渲染：<AsyncModal /> 放在模板顶层，等于一进来就加载——失去意义
加 loading 和 error 反馈，体验更稳
用户点击到组件显示有延迟，不能干等：
立即学习“前端免费学习笔记（深入）”；
- 用 loadingComponent 显示骨架或文字，比如 { template: '<div>加载中...</div>' }
- 用 errorComponent 处理失败，比如网络中断或 404
- delay: 200 防止快速加载时 loading 一闪而过；timeout: 5000 避免请求卡死无响应
配合 v-if 实现真正“按需”
异步组件本身不自动懒，必须靠渲染逻辑触发：
- 按钮点击打开弹窗 → 设 showDialog = true → 模板中 <AsyncDialog v-if="showDialog" />
- Tab 切换、折叠面板展开、表单高级选项展开，都是典型适用场景
- 不要在 v-for 或 computed 里反复调用 import()，会重复请求甚至报错
