Vue Suspense 通过包裹动态导入的异步组件实现点击加载与骨架屏渲染：事件中调用 import() 赋值 ref，用 <component :is> 挂载，Suspense 紧邻该组件并提供结构一致的静态骨架屏，仅等待组件加载而非其内部异步逻辑。
Vue 的 Suspense 本身不直接控制“按需触发”，而是响应内部异步依赖的状态变化；要实现“点击才加载 + 骨架屏渲染”，关键在于把动态导入（import()）的时机交给用户交互，再用 Suspense 管理该异步过程的加载态。
动态组件必须由用户行为触发
不能在组件定义或 setup 中提前调用 defineAsyncComponent 或 import()，否则会立即发起请求。正确做法是：把异步导入逻辑封装进事件处理函数中，比如按钮点击。
- 用
ref或useState（组合式 API 下常用ref(null)）暂存将要渲染的异步组件 - 点击时执行
import('./Modal.vue')，拿到模块后赋值给 ref - 用
<component :is="asyncComp" />动态挂载，此时它才是 Suspense 的子节点
Suspense 只包裹真正异步的部分
Suspense 必须紧邻异步组件，且只包裹它——不是整个页面或父容器。它无法感知外部状态，只响应其 default 插槽内组件的异步生命周期。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不要把
Suspense放在顶层或路由出口外层来“统管所有加载” - 每个按需加载的模块应有自己独立的
Suspense包裹，避免相互阻塞 -
#fallback插槽里放骨架屏组件（如<ModalSkeleton />），样式结构需与真实组件一致
骨架屏需与真实组件保持结构对齐
骨架屏不是装饰，而是布局占位符。如果真实组件是卡片列表，骨架屏就该有相同数量、宽高比例的灰色区块；否则切换时仍会出现跳动。
立即学习“前端免费学习笔记（深入）”；
- 推荐为每个异步组件配套一个专属骨架屏（如
Modal.vue对应ModalSkeleton.vue） - 避免复用通用骨架屏，尤其当异步组件尺寸差异大时（例如弹窗 vs 表格）
- 骨架屏自身不应含任何异步逻辑，纯静态 DOM + CSS 动画（如渐变灰块）
注意 fallback 的显示边界
Suspense 的 #fallback 只在异步组件“正在解析/加载/实例化”阶段显示。一旦组件成功创建（哪怕内部数据还没拉完），fallback 就会退出，default 插槽接管渲染。
- 若组件内部还有
async setup或onMounted中发请求，需额外处理其 loading 态（比如在组件内嵌套另一层骨架屏） -
Suspense不会等待子组件内部的 Promise，只等组件本身的加载完成 - 因此“图片加载中”这类细粒度状态，得靠
@load和@error事件配合 v-if 控制，不属于 Suspense 范畴
