vue suspense 不处理加载失败，需组合 defineasynccomponent 的 errorcomponent 与全局错误捕获；errorcomponent 需含原因说明、重试按钮及次数限制；配合 delay（100–300ms）和 timeout（5000ms）优化体验；ssr 时须降级为同步导入。
Vue 的 Suspense 本身不处理加载失败（rejected）状态，它只管理 pending 和 resolved 状态。所以当异步组件加载失败（比如网络中断、chunk 404、CDN 缺失），<suspense></suspense> 会直接抛出错误，#fallback 不会自动显示，页面可能白屏或报错中断。
必须配合 errorComponent + 全局错误捕获
要实现“加载失败时的友好降级 UI”，不能只靠 Suspense，得组合两层机制：
- 在 defineAsyncComponent 中显式配置 errorComponent：这是最直接的降级入口，用于展示定制化错误提示和重试按钮
- 搭配全局 error handler 或 errorCaptured 钩子：捕获并拦截错误，防止未处理 promise rejection 导致应用崩溃
errorComponent 要包含可操作反馈
这个组件不是摆设，需满足三个实用要求：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 明确说明失败原因（例如“图片资源加载失败”“模块暂不可用”）
- 提供用户可点击的重试动作（如按钮），点击后重新触发
import() - 限制重试次数（如最多 3 次），避免无限循环请求或卡死
示例中 errorComponent 可这样写：
（注意：该组件必须是已注册的合法组件，不能是字符串或未定义变量）timeout + delay 是体验关键细节
仅设 errorComponent 不够，还需合理设置超时与延迟，避免误触发或等待过久：
- delay：100–300ms —— 短于该时间完成就跳过 loading，避免闪动；太短易误判，太长让用户感觉卡顿
- timeout：建议 5000ms —— 超时后自动 reject，触发 errorComponent；不设 timeout 则永远等下去
SSR 场景必须降级为同步组件
服务端渲染时，import() 无法执行，Suspense 会失效。此时需在 SSR 环境中提前判断，用同步方式 fallback：
- 构建时通过
process.server或运行时环境标识区分 - SSR 下直接导入组件（
import X from './X.vue'），绕过异步逻辑 - 避免服务端 render 报错或空白输出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
