无需登录 数据私有 本地保存

JavaScript 文件依赖关系图 - import/require 可视化

分析 开发工具 JavaScript 依赖 可视化 模块
20
0
0
0

JS 依赖关系图可视化

解析 ES6 import / CommonJS require，生成交互式力导向依赖图

文件列表

还没有添加文件，点击 "添加文件" 或 "示例" 开始

支持手动输入代码或上传 .js / .ts 文件

依赖图将在此处展示

添加文件并点击"生成依赖图"
文件: 0 外部依赖: 0 依赖关系: 0 循环依赖
图例： 项目文件 外部依赖 未解析 | 节点大小 = 被依赖次数 | 拖拽节点 · 滚轮缩放 · 悬停高亮
常见问题与知识点

依赖关系图是一个有向图，展示项目中各文件之间的引用关系。节点代表文件或外部包，边代表 import 或 require 语句建立的依赖。它帮助开发者理解项目结构、发现循环依赖、评估模块耦合度。

ES6 import 是静态的（编译时解析），支持 tree-shaking，使用 import X from 'Y' 语法；CommonJS require 是动态的（运行时加载），使用 const X = require('Y')。本工具同时支持两种语法的解析。

循环依赖指 A→B→A 的引用链。在本工具的依赖图中，循环依赖表现为节点间的双向箭头或环路。工具会自动检测并标记循环依赖。最佳实践是使用依赖反转或提取共享模块来消除循环依赖。

支持：import default from 'pkg'、import { named } from 'pkg'、import * as ns from 'pkg'、import 'pkg'（副作用导入）、const x = require('pkg')、import('pkg')（动态导入）等常见语法。

依赖图可以快速识别"上帝模块"（被大量依赖的文件）、发现不合理依赖方向（如底层模块依赖上层）、定位可拆分的大文件，为重构提供数据支撑，降低项目维护成本。
🔧 相关工具