ES Modules全链路追踪可通过import.meta.url标识模块、包装dynamic import、PerformanceObserver监听资源及构建时注入实现。核心是利用import.meta.url获取唯一模块ID,结合动态导入拦截、性能打点与构建插件协同追踪加载时机、耗时及依赖关系。

在 ES Modules 全链路追踪中,无法直接像 CommonJS 那样通过 require 钩子拦截模块加载,但可以通过浏览器原生能力与构建时/运行时协同实现模块加载标记。核心思路是:利用 import.meta.url 获取模块标识,结合动态 import()、自定义事件或性能 API 记录加载时机与依赖关系。
利用 import.meta.url 标识模块身份
每个 ES 模块内可通过 import.meta.url 获取其绝对路径(如 "https://example.com/src/utils.js"),这是唯一稳定、无需构建介入的模块 ID。可将其作为 trace 的 spanId 或 resource name:
- 在模块顶层立即执行记录:
console.trace(`[LOAD] ${import.meta.url}`); - 配合 Performance API 打点:
performance.mark(`module-load-${btoa(import.meta.url)}`); - 避免直接用 URL 做 trace ID(含特殊字符),建议哈希或 base64 编码后截取前 16 位作简短标识
拦截动态导入并注入追踪逻辑
静态 import 无法拦截,但所有 import() 调用均可包装。在入口或工具函数中统一接管:
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 封装一个带 trace 的
tracedImport函数:async function tracedImport(specifier) {<br> const start = performance.now();<br> const url = new URL(specifier, import.meta.url).href;<br> console.debug(`→ importing: ${url}`);<br> const mod = await import(specifier);<br> console.debug(`← loaded: ${url} (+${(performance.now() - start).toFixed(1)}ms)`);<br> return mod;<br>} - 在调用处替换原始
import(),即可捕获加载耗时、发起方与目标模块关系 - 若使用构建工具(如 Vite/Rollup),可在插件中重写
import()表达式,自动注入 trace 调用
借助 PerformanceObserver 监听资源加载
浏览器会为每个模块加载触发 resource 类型的 performance entry(需启用 performance.setResourceTimingBufferSize):
立即学习“Java免费学习笔记(深入)”;
- 注册观察器捕获模块请求:
new PerformanceObserver((list) => {<br> for (const entry of list.getEntries()) {<br> if (entry.initiatorType === 'navigation' || entry.initiatorType === 'script') {<br> // 过滤 .js 文件且非内联脚本<br> if (entry.name.endsWith('.js') && !entry.name.includes('data:')) {<br> console.info(`[PERF] ${entry.name} → ${entry.duration.toFixed(1)}ms`);<br> }<br> }<br> }<br> }<br>).observe({ entryTypes: ['resource'] }); - 该方式不依赖代码修改,但无法区分模块是否为 ES Module(仅知资源 URL),适合补充性监控
构建时注入(推荐用于生产全链路)
若使用打包器,可在构建阶段自动为每个模块注入 trace 初始化代码:
- Vite 插件示例:匹配
.js或.ts模块,在其顶部插入:/* @trace-module */ const __traceId = crypto.randomUUID?.() || Date.now() + '-' + Math.random().toString(36).substr(2, 9); console.debug('[ESM-TRACE]', import.meta.url, __traceId); - 配合自定义 loader 或 sourcemap,可将 traceId 关联到源码位置,支持在 APM 系统(如 Sentry、Datadog)中下钻分析
- 注意避免污染全局作用域,优先使用模块级常量或闭包变量

















