动态导入监控需覆盖触发、加载、完成/失败全生命周期，封装trackedimport函数统一埋点，上报用sendbeacon+本地缓存，结合performance api获取资源级指标。
动态导入（import()）在生产环境中常用于代码分割和按需加载，但其加载耗时、失败率、重试行为直接影响首屏体验和交互响应。要有效监控，不能只看“是否成功”，而要捕获完整生命周期：触发时机、网络请求、解析执行、错误兜底等环节。
关键埋点位置与采集字段
动态导入是 Promise 驱动的异步操作，必须在 try/catch 或 .then().catch() 中包裹，并在每个阶段注入时间戳和上下文：
-
触发时刻：记录调用
import()的位置（如函数名、模块路径、业务场景标识），用performance.now()打点 -
开始加载：在
import()返回 Promise 后立即记录（非等待 resolve），反映真实调度延迟 -
完成/失败时刻：在
then或catch回调中再次打点，计算耗时；同时采集error.name、error.message、error.stack（脱敏后） -
附加信息：当前页面 URL、用户设备类型（
navigator.userAgent粗略判断）、网络状态（navigator.onLine+effectiveType）、是否为重复加载（可加防抖或标记重试次数）
封装统一的监控型 import 函数
避免在业务代码中重复写埋点逻辑，推荐封装一个带监控能力的 trackedImport：
示例代码：
function trackedImport(modulePath, context = {}) {
const start = performance.now();
const { scene = 'unknown', moduleId = modulePath } = context;
<p>return import(modulePath)
.then(module => {
const duration = performance.now() - start;
// 上报成功事件
report({
event: 'dynamic_import_success',
moduleId,
scene,
duration,
pageUrl: window.location.href,
timestamp: Date.now()
});
return module;
})
.catch(error => {
const duration = performance.now() - start;
// 上报失败事件（含错误分类）
report({
event: 'dynamic_import_error',
moduleId,
scene,
duration,
errorName: error.name,
errorMessage: error.message?.substring(0, 200) || 'unknown',
timestamp: Date.now()
});
throw error; // 保持原有错误传播行为
});
}</p><p>// 使用方式（替换原 import 调用）
trackedImport('./feature-module.js', { scene: 'user_profile_tab' });
</p>
上报策略必须可靠且低侵入
动态导入常发生在用户交互瞬间（如点击后加载弹窗），上报不能阻塞主线程或引发额外请求失败：
- 优先使用
navigator.sendBeacon()发送，确保页面跳转或关闭前数据不丢失 - 对失败上报做轻量本地缓存（如 localStorage），下次页面加载时补发（限制条数和过期时间）
- 开启采样控制，例如仅对 10% 的非错误请求或全部错误请求上报，避免日志风暴
- 避免在
import()内部直接调用fetch或XMLHttpRequest，防止触发 CORS 或被 adblock 拦截
结合 Performance API 补充资源级指标
除了 JS 层埋点，还可利用浏览器原生能力补充真实网络表现：
- 监听
performance.getEntriesByType('resource')，筛选出initiatorType === 'import'的条目，获取duration、transferSize、encodedBodySize - 若模块路径可预测（如
./chunk-*.js），可在import()前主动performance.mark()，后续用measure()关联 - 注意：部分打包工具（如 Webpack）会将动态导入转为 JSONP 或自定义 loader，此时 initiatorType 可能为
xmlhttprequest或other，需结合模块路径正则识别
