异步组件“断网重试”核心是封装 import() 为可重试 Promise，支持错误分类、指数退避、最大重试次数，并在 defineAsyncComponent 中接入；配合网络监听、预检、用户提示及服务端缓存优化。
异步组件实现“断网重试”，核心不是重试组件本身，而是控制其加载逻辑——把 import() 封装成可重试的 Promise，并在失败时提供退避策略与用户反馈。
封装可重试的动态导入函数
直接使用 import() 会抛出网络错误且无法捕获重试时机。需手动包装为支持重试次数、延迟和错误分类的函数：
- 用
async/await+try/catch捕获加载异常 - 区分错误类型：
NetworkError（可重试） vsSyntaxError（不可重试） - 加入指数退避（如 500ms → 1s → 2s），避免瞬间重压服务器
- 设置最大重试次数（建议 3～5 次），防止无限循环
示例代码：
async function retryImport(importFn, options = {}) {
const { maxRetries = 3, baseDelay = 500 } = options;
for (let i = 0; i <= maxRetries; i++) {
try {
return await importFn();
} catch (err) {
if (i === maxRetries || !isNetworkError(err)) throw err;
await new Promise(r => setTimeout(r, baseDelay * Math.pow(2, i)));
}
}
}在 defineAsyncComponent 中接入重试逻辑
Vue 的 defineAsyncComponent 支持传入函数返回 Promise，正好对接上面的 retryImport：
- 不直接传
() => import('./Comp.vue')，而是传() => retryImport(() => import('./Comp.vue')) - 可配合
suspense显示 loading / error 状态，提升体验 - 错误状态中提供「重试」按钮，触发手动重载（调用同一重试函数）
注意：手动重试需保留原始 import 函数引用，避免闭包丢失。
增强弱网感知与用户提示
纯重试不够智能。结合网络状态可进一步优化成功率：
- 监听
navigator.onLine，离线时跳过自动重试，直接展示离线提示 - 用
fetch预检资源可用性（如请求一个轻量 manifest.json），再决定是否加载组件 - 在 loading 状态中显示「正在重试（2/3）」，降低用户焦虑
- 首次加载失败后，缓存失败标记 30 秒，避免短时间内重复请求相同资源
服务端协同优化（加分项）
前端重试只是兜底。真正提升成功率还需后端配合：
- CDN 配置合理缓存头（
Cache-Control: public, max-age=31536000），让 JS 文件走强缓存 - 启用 HTTP/2 Server Push 或 preload link，提前推送关键异步 chunk
- 构建时开启
splitChunks细粒度分包，减小组件体积，缩短单次加载时间 - 对高频异步组件做 fallback 静态降级（如用骨架屏或简化版组件替代）
