时隔三年，一个可视化可交互的前端依赖分析工具发布了

时隔三年，一个可视化可交互的前端依赖分析工具发布了

🔥 🔥 🔥 Github 仓库

🔥 🔥 🔥 [Demo 演示](JsAnalyzer | 依赖分析工具 Demo)

终于有勇气发布了~

我一直认为它只是一个不完美的半成品，所以我只是悄悄的上架到了个人的 github 仓库，并没打算公之于众。不过就在今天，我意外的发现仓库多了一个陌生人的 Issue，真的很震惊，我没想到真的有人安装文档安装使用了。这真的让我感到意外，也许真的有人觉得有用，那么我就要做好它，也有责任做好它！

前言

从事开发工作以来，很多时候我们除了开发业务代码以外，更多时候是在想如何优化自己的代码。在这个过程中，交叉的依赖关系以及不清楚修改后影响的范围，这特别是对于还不熟悉项目的

新人

，每一步都走得

小心翼翼

。

在开发工作中，因为修改某个文件导致其他引用它的模块出现问题的现象屡见不鲜。至此，我一直在寻找一个依赖分析工具，能帮我快速高效的理清项目的框架、依赖关系，模块的引用上下文。

现存方案

为此，我也找了很多开源的分析工具，不过让我很失望，类似的工具不多，而且它们都是命令行工具，想要分析不同模块的依赖需要多次执行不同的代码，分析结果也只是一个 json 文件或者依赖图片。json 文件和 png 图都是“死的”，它们只是某一个依赖关系的

临时快照

，不具备

实时性

，也不能显示模块更多

上下文

信息。

• Dependency cruiser验证和可视化依赖关系
• Madge生成模块依赖关系的可视化图表
• dependo可视化 CommonJS、AMD 或 ES6 模块依赖关系
• JSCity将 JavaScript 源代码可视化为可导航的 3D 城市
• colony表示 Node.js 代码及其依赖项之间链接的浏览器内集群图
• TsUML从 TypeScript 源代码生成 UML 图

写文章时在 GitHub 发现一个工具 [knip](GitHub - webpro/knip: ✂️ Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it!)，它可以帮你发现未依赖的文件，我的这个工具其实囊括了它里面很多功能，使用起来会更简单。参考应用场景4和场景5。

想法萌生

所以，我相信不止我一个人在重构的过程中遇到过如上问题，至此，我决定要开发一个依赖分析工具，解决上面的所有问题，而且还必须做得更好，有 UI 界面操作，可交互，能动态切换分析文件，还能展示更多的模块关联信息。

开始做产品

自己做产品，真的是很酷的事情。三年前，我终于开始的我的依赖分析工具开发之路。我的初步想法是这样的，服务端生成依赖数据，前端负责可视化展示依赖关系。下面是架构图：核心的流程就是服务端对文件分析，通过 AST 解析从而收集到文件中的依赖信息，然后再将这些依赖关系梳理清洗整合，最终生成一个物料包给到前端展示。

它来了

时隔快三年，我利用业余时间不间断开发，终于完成了核心分析功能，并不是因为这些功能很多，需要花费这么多的时间，而是有如下两个原因：
其一：业余时间开发，时间本就不固定，我也只是当做业务爱好来做；
其二：中间有一段时间开发停止了，那段时间我怀疑自己做的产品是不是真的有用，是否真的能帮助到别人，是不是一件有意义的事情。

最后，我想通了，一定有需要它的人，不能放弃，2024 年

它来了

!

产品功能/优势

一个可视化可交互的 Web 文件依赖分析工具，跨框架,可用于 Vue React Svelte Angular Node 等前端项目

• 基于 AST 语法分析， 可交互的一体化可视化依赖分析系统
• 支持切换分析入口文件。
• 支持依赖反转。
• 支持显示文件被引用次数，以及引用地址。
• 支持显示文件的导出变量被引用信息。
• 适用于 ES6、CommonJs。
• 支持的文件类型：JS、TS、JSX、TSX、Vue、Sass、Less、Css、html。
• 支持 package 依赖分析。
• 支持未引用 文件、npm 包 分析。
• 非常安全：所有文件本地存储，不涉及联网和上传 。
• 支持使用默认编辑器打开文件和文件预览。
• 支持暗黑模式。

快速开始

🔥 🔥 🔥 Github 仓库

🔥 🔥 🔥 [Demo 演示](JsAnalyzer | 依赖分析工具 Demo)

如果觉得还不错，或者对你有帮助，别忘了点一下 Star 哦~

# 1. 全局安装npminstall @js-analyzer/server -g# 2. 进入到需要分析得项目根目录cd /xxx/project

# 3. 指定当前项目并启动
js-analyzer --root ./

接下来，访问链接就能看到了！

默认配置不一定适合你的项目，请告诉工具更多信息，会使分析结果更加准确

详细配置请点击

图文介绍

左侧菜单有四个，依次是：

关系图

、

包管理

、

热词

、

隐式引用

其他的页面功能比较简单，这里我重点讲一下

关系图

页面的功能，也是整个工具最核心的功能。

关系图-文件夹关系图

点击左侧目录树，如果点击的是文件夹，则显示

文件夹关系视图

，点击的是文件则显示 该文件的

被依赖视图

。

显示文件夹下的所有文件依赖关系，图标中节点的大小表示被依赖的次数，节点越大，依赖的次数就越多。

关系图-被依赖视图

双击某个节点，可进入该节点的

被依赖视图

，显示当前文件被哪些文件依赖。

关系图-依赖视图

双击某个节点，可进入该节点的

被依赖视图

，然后点击左上角视图切换图标，第二个，则显示

依赖视图

。显示当前文件依赖了哪些文件。

关系图-上游依赖图

双击某个节点后（处于

被依赖视图

），再点击左上角的正数第三个图标，切换成 上游依赖图

，显示该文件，所有上游的依赖文件视图。

上游依赖图，我研究了很多展示的图形，路径图、环形图、力导向图。模块的引用关系是无序的，混乱的，这会使的展示的图形错中复杂，看起来很费劲，最后综合性能和显示效果，选择了力导向图，这个布局算法非常有趣，是基于物理模型，即将图形视为一个力学系统，节点作为物体，边作为弹簧或者电磁力之类的力（吸引或排斥），然后通过模拟力的作用来计算图的布局。

包管理

显示当前仓库下 npm 包，展示包引用次数大小，引用详情。

热词

显示仓库中使用频率较高的变量名和方法名，方便新人遵循命名规范。

隐式引用（未知引用）

我们在引用模块时，有些并没有定义或者在 npm 中显示安装，对于新人来说，这会造成不必要的困扰。点击可以查看引用的文件和详细信息。

依赖详情

所有图表节点单击后，都能打开引用详情弹出。展示引用的具体文件和变量。

代码预览

文件后的预览，显示代码预览信息。

编辑器打开

点击预览后面的跳转按钮将跳转到编辑器里打开。

更多

其实还有很多细节功能，就不一一列举出来了，欢迎大家去探索出更多的彩蛋。

应用场景

1. 确定影响范围：发现某个组件存在问题，然而不清楚该组件被多少页面引用了，怕影响到其他页面。

使用工具后：修改完文件模块，我们可以使用上游依赖分析视图，看到所有引用该组件的业务。

1. 提取公共组件：团队中存在公共组件库、统计一下业务项目中用到多的组件，提取到公共组件库

使用工具后：在文件夹视图，能看到根目录/某个目录下所有组件的被引用次数，次数多的组件就可以抽离到组件库了。

1. 单元测试：被引用次数多的模块往往需要非常稳定，对其添加单元测试是非常有必要的

使用工具后：在文件夹视图，能看到哪些模块/文件被引用次数最多。

1. 未使用文件删除：项目中存在大量的未使用文件，可以查看被依赖次数，被引用为 0 则表示可以删除。
2. 未使用的导出删除：单个文件内 exports 的模块，也可以看到其被引用情况，如果未被引用，可以考虑删除。

点击图表中单个文件节点，会显示文件的详细信息弹窗，里面有每个导出模块的引用关系。

1. 大家可以自己去发现更多场景…

后续规划

• 查看循环依赖分析。
• 显示模块稳定性指标分析。
• 可以定位到引用代码具体行、列，目前只支持定位到文件。
• 页面可预览文件的代码，实现不依赖编辑器快速查看依赖上下文。

想要做的真的很多很多，不过现在工作比较忙，没有时间和精力继续添加新功能，写此文章的主要目的也是希望有更多感兴趣的人加入进来。

结尾

脑海困缠自斟酌，莫忘心中自由花。

不要总是陷入自己思维的纠结中，放下束缚，相信自己的内心自由与激情，勇敢追寻自己的梦想和目标吧！

最后，如果觉得用着还不错，记得留下你的 star , 🔥 Github 仓库 🔥这对我有很大帮助。