动态导入不支持原生超时，需用AbortController配合定时器主动中止；捕获AbortError及含“fetch”“network”的TypeError覆盖弱网场景；建议封装重试逻辑并提供降级方案，同时监听unhandledrejection做全局监控上报。
动态导入（import()）本身不支持原生超时参数，但网络超时属于其底层 fetch 行为的一部分。要捕获并处理这类异常，关键在于：**把超时控制提前到模块请求发起前，并与 Promise 拒绝逻辑协同处理**。
用 AbortController 主动中断加载
这是最可靠的方式——在动态导入开始后，启动一个定时器，超时即调用 abort()，触发 reject。
- 创建
AbortController实例，传入signal选项给import() - 设置
setTimeout在指定毫秒后调用controller.abort() -
import()遇到中止信号会以AbortError拒绝 Promise
示例：
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 8000);
import('./feature.js', { signal: controller.signal })
.then(module => {
clearTimeout(timeoutId);
// 使用 module
})
.catch(err => {
if (err.name === 'AbortError') {
console.error('模块加载超时，请检查网络或重试');
} else {
console.error('其他加载错误:', err);
}
});
立即学习“Java免费学习笔记（深入）”；
区分超时与其他网络错误
仅靠 err.name === 'AbortError' 可确认是主动中止，但真实网络超时（如 fetch 失败未被 abort 触发）常表现为 TypeError，消息含 "Failed to fetch" 或 "NetworkError"。
- 建议统一判断：
err.name === 'AbortError' || (err instanceof TypeError && /fetch|network/i.test(err.message)) - 这样可覆盖主动超时、连接中断、DNS失败等典型弱网场景
结合重试与降级策略
单次超时不代表永久失败，尤其对非关键模块，可加入简单重试逻辑；对核心功能，则应提供降级内容。
- 封装带重试的导入函数，最多尝试 2–3 次，每次间隔递增（如 500ms → 1s）
- catch 中返回空对象、占位组件或本地 mock 数据，避免页面崩溃
- Next.js 用户可用
next/dynamic的error选项配合自定义 fallback
全局兜底与监控上报
即使做了显式处理，仍可能遗漏某些路径。监听 unhandledrejection 可捕获未 catch 的拒绝 Promise，适合做错误聚合和性能分析。
- 在入口文件添加：
window.addEventListener('unhandledrejection', e => { if (e.reason?.message?.includes('fetch')) { /* 上报监控 */ } }); - 上报时附带模块路径、触发时间、用户网络类型（
navigator.connection.effectiveType），便于定位区域或设备共性问题
