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

最新推荐文章于 2025-04-02 11:29:56 发布
最新推荐文章于 2025-04-02 11:29:56 发布
阅读量1.4k 收藏 14
点赞数 21
文章标签： 交互 前端 源代码管理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42861481/article/details/141681279
版权

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

🔥 🔥 🔥 Github 仓库

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

终于有勇气发布了~

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

在这里插入图片描述

前言

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

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

现存方案

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

  • Dependency cruiser验证和可视化依赖关系
  • Madge生成模块依赖关系的可视化图表
  • dependo可视化 CommonJS、AMD 或 ES6 模块依赖关系
  • JSCity将 JavaScript 源代码可视化为可导航的 3D 城市
  • colony表示 Node.js 代码及其依赖项之间链接的浏览器内集群图
  • TsUML从 TypeScript
最低0.47元/天 解锁文章
前端依赖文件可视化
itcatplayit的博客
06-29 632
前端复杂项目开发时，或是在研究库、框架代码的源码时，我们常常想，当前文件依赖了哪些模块文件，有没有可视化的呈现方式？ 答案是有的。下面我推荐三种不同的方式来可视化前端依赖文件。这三种方式各有优缺点，可根据自身需求选择。
敏捷思维-架构设计中的方法学
天行健 ● 君子以自强不息
06-04 4528
eLong_Affiliate_MemberID=4053787;方法论对软件开发而言意味着什么？我们如何看待软件开发中的方法论？方法论能够成为软件开发的救命稻草吗？在读过此文后，这些疑惑就会得到解答。 在第一篇文章中，我们来了解标题中的一些词的含义。方法学是什么？ 敏捷是什么？ 为什么讨论架构？方法论方法论的英文为Methodology，词典中的解释为"A series of rel
探索依赖关系可视化工具：Vizdeps
gitblog_00816的博客
09-08 678
探索依赖关系可视化工具：Vizdeps vizdepsVisualize Leiningen dependencies using Graphviz项目地址:https://gitcode.com/gh_mirrors/vi/vizdeps 项目介绍 Vizdeps 是一款强大的依赖关系可视化工具，最初由 Walmartlabs 开发，现由 clj-commons 社区维护。它能够帮助开发者直观...
js-analyzer：前端依赖分析的利器
最新发布
gitblog_00304的博客
04-02 1034
js-analyzer：前端依赖分析的利器 js-analyzer ???? A visual and interactive front-end dependency analysis tool~ 项目地址: https://gitc...
前端打包体积分析和产物优化（webpack-bundle-analyzer)
wtswts1232的博客
04-26 2308
React或Vue项目打包后，有时产物体积非常大。为了优化项目，我们一般从以下几个方面考虑。
前端性能优化——包体积压缩82%、打包速度提升65%
Web面试那些事儿的博客
12-01 1789
经过上面的一系列优化，可以看到：包体积由原来的2.25M减少到407KB，压缩了82%打包速度由原来的25386ms减少到8949ms，提升了65%这些方式虽然很常规，但确实可以有效地提升项目的性能本文主要介绍的是项目打包构建方面的优化方式，上一篇是业务代码层面的性能优化，其中有很多有趣的方案如果喜欢或有所启发，欢迎 star如果你现在正在找工作，可以私信“web”进群领取前端面试小册以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。
前端模块依赖关系分析与应用
油墨香^-^的博客
02-17 605
这篇分享主要的内容是是如何使用webpack的stats对象进行依赖和编译速度的解析，该对象包含大量的编译时信息，我们可以用它生成包含有关于模块的统计数据的 JSON 文件。这些统计数据不仅可以帮助开发者来分析应用的依赖图表，还可以优化编译的速度。
开源工具系列5：DependencyCheck
wolaisongfendi的博客
03-09 2330
Dependency-Check 是 OWASP（Open Web Application Security Project）的一个实用开源程序，用于识别项目依赖项并检查是否存在任何已知的，公开披露的漏洞。
开源组件是什么意思_供应链安全：安全建设中的第三方组件依赖问题
weixin_39604897的博客
12-10 2404
着力点：接入、发现、防护、管理 下图是笔者总结的第三方组件流通图，可以看到组件的分发过程很零散：接入 读者们可否有信息回答这个问题:"作为安全负责人，你知道公司使用和开发的应用中使用的开源组件都是最新的，已经安装了所有的重要安全补丁？"答案一定是窘迫的，如果连自己公司正在使用哪些软件，用什么开发的系统都不知道，何谈为其安装安全补丁呢？原因在于许多企业所用的开源组件并没有保存准确、全面、...
新谷歌工具，秀给你看开源项目之间的依赖关系
开源云中文社区
06-15 497
谷歌一直在开发一个新的试验性工具Open Source Insights，帮助开发人员发现他们所使用的开源软件包/库的依赖关系以及已知的安全漏洞。Open Source InsightsO...
node.js项目依赖关系分析工具 Depazer 的使用
软件开发工程师
01-16 512
Depazer是一个用于的工具。它可以帮助开发者快速了解项目的依赖结构、模块关系，以及可能存在的问题，从而优化代码架构和依赖管理。
npm-dependency-graph：基于Sprotty的npm包依赖关系的可视化
02-03
npm的软件包依赖图 该项目呈现npm软件包的依赖关系图。 它使用获取包元数据，使用绘制图形，使用进行自动布局。 它既可以作为具有简单网页的独立应用程序运行，也可以作为扩展程序运行。 Theia支持Web浏览器和 。 独立应用程序可从。 找到有关此项目的更多详细信息。 建造 构建和测试该应用程序的最简单方法是。 如果要在自己的计算机上执行此操作，请按照以下步骤操作。 您需要才能构建此项目。 $ git clone https://github.com/TypeFox/npm-dependency-graph.git $ cd npm-dependency-graph $ yarn 作为
前端开源库-vue-component-analyzer
08-29
前端开源库-vue-component-analyzerVue组件分析器，分析静态代码中Vue组件的依赖关系、继承和其他一些有用信息。
dependapotamus:Dependapotamus 是一个使用 d3.js 的源码依赖分析应用
07-02
属相 使用 d3.js 可视化的基于 Node.js 的源代码依赖分析工具。 安装 克隆 repo 并通过 npm 安装依赖项。 确保目标软件项目文件可读。 启动应用程序。 $ npm install $ node ./web.js 执照 Dependapotamus 是 (C) 2015 Curtis Zimmerman 并在 Gnu Affero 通用公共许可证第 3 版下发布。
dep-analyzer:用于angularjs项目的依赖分析工具
05-10
深度分析仪 用于angularjs项目的依赖分析工具。 目前，仅实现单个功能：可视化模块依赖性。 安装方式 npm install dep-analyzer 用法 var analyzer = require（“ dep-analyzer”）; analyzer.analyzeProject（“ ./ angular-folder”）;
【Web技术】1176- 前端模块依赖关系分析与应用
pingan8787
12-19 919
Meta摘要这篇分享主要的内容是是如何使用webpack的stats对象进行依赖和编译速度的解析，该对象包含大量的编译时信息，我们可以用它生成包含有关于模块的统计数据的 JSON 文件。这...
探索JavaScript依赖的绝佳工具：Dependency Cruiser
gitblog_00242的博客
08-09 1016
探索JavaScript依赖的绝佳工具：Dependency Cruiser dependency-cruiserValidate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.项目地址:https://gitcode.com/gh_mirrors/...
Android依赖分析自动化工具实战
star_nwe的博客
03-01 1090
一个Android工程常常会有很多依赖，可能是组件化项目对于其他业务及中间件的依赖，也有可能是对于第三方sdk的依赖。这里我们分别看下对于这两种场景为什么需要自动化的版本依赖分析工具：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值