Tiny Online Tools logoTiny Online Toolssearch搜索工具…grid_view全部工具
首页chevron_right逆向工程工具chevron_rightJS 打包依赖可视化工具JS 打包依赖可视化工具

JS 打包依赖可视化工具

在 webpack、Rollup、esbuild 或 Vite 打包产物中找出模块边界，看清哪个模块依赖哪个——依靠真实的 AST 形态匹配，而不是文本猜测。

打包来源粘贴代码上传文件

相似工具

Webpack 打包检查工具

Webpack 打包检查工具

通过 AST 形态检测 webpack 的运行时启动代码、模块映射和 chunk-push 元数据,展示每个模块的真实源码,并在文件不是 webpack 产物时明确说明。

JavaScript 混淆器

JavaScript 混淆器

重命名局部变量、隐藏字符串字面量并扁平化 JavaScript 的控制流——全部在浏览器本地完成，不上传任何内容。

Source Map 体积分析器

Source Map 体积分析器

借助 .map 文件，将打包体积归属到产生它的原始源文件和文件夹——看清究竟是什么真正占用了空间。

Source Map 浏览器

Source Map 浏览器

加载 .map 文件，查询生成代码中任意行列位置对应的原始文件、行号、列号及名称。

为 PDF 添加水印

为 PDF 添加水印

为 PDF 添加文字水印。

PDF 元数据编辑器

PDF 元数据编辑器

查看并编辑 PDF 元数据，包括标题、作者、主题、关键词和创建者。

音频淡入/淡出

音频淡入/淡出

直接在浏览器中为任意音频文件添加平滑的淡入和淡出效果。

apps

更多工具

浏览我们完整的免费在线工具集合。

这个工具能找到什么

现代网站往往把成百上千个源文件打包成一个 JavaScript 文件。这个工具会深入这个文件,尝试还原原始的模块边界——不依赖特定打包工具,而是使用真实的 AST 结构而非文本匹配,后者一旦代码被压缩就完全失效。

它会按以下顺序尝试:

  1. webpack 的 function-map 形式——一个立即执行函数(IIFE),其参数是一个对象或数组,其中每一项都是 (module, exports, require) 形式的函数。这也能识别经典的 webpackUniversalModuleDefinition 包装器,无论真正的模块映射调用嵌套多深。
  2. webpack 的 chunk-push 形式——(self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime]),这是 webpack 5 代码分割产生的形式。
  3. Rollup / esbuild / Vite 的注释标记——这一系列工具的部分未压缩构建会在每个模块代码前保留一行 // 路径/到/文件.js 注释。若存在,这些注释就成为模块边界。
  4. 诚实的兜底方案——如果以上都没找到(几乎总是因为打包产物是压缩且作用域被扁平化的 Rollup/esbuild/Vite 构建,没有留下任何边界标记),工具会明确说明,并列出文件的顶层声明,而不是虚构一份模块列表。

如何解读结果

找到模块时,每个模块都会列出它通过字面量模块 id require() 了什么,同样有用的是,哪些其他模块反过来依赖它——这样无需执行任何代码,就能双向追踪"如果删掉这个,会影响到什么"。

设计上的诚实

动态 require(require(变量))和 import() 调用无法静态解析,因此会直接从依赖列表中省略——这可能导致依赖被低估,但绝不会凭空捏造依赖关系。同样,某个 require() 调用引用的模块 id 若不在检测到的模块映射中,依旧会作为一条边的目标显示出来,即便它没有自己的卡片;这通常意味着它存在于另一个未粘贴进来的代码块中。

隐私

一切都通过真正的 JavaScript 解析器(acorn)在你的浏览器中运行。你粘贴或上传的打包文件永远不会被发送到任何地方。