JavaScript 模块的循环加载（循环依赖问题分析）

简介

"循环加载"（circular dependency）指的是，a 脚本的执行依赖 b 脚本，而 b 脚本的执行又依赖 a 脚本。

分析

使用 madge 工具进行循环加载分析。

安装

yarn global add

检测是否存在循环加载/依赖

下述命令中的 ./dist 目录是 .js 文件所在的相对/绝对目录路径（如果是 TypeScript 项目，将其替换为编译后的 .js 文件相对/绝对目录路径）

madge ./dist -c

生成加载/依赖关系图

安装 Graphviz

打开 Download 页面，找到适用于自己操作系统的软件，我这里是 Windows 10，我下载的软件为 graphviz-3.0.0 (64-bit) EXE installer。

下载之后打开安装包，在 许可证协议 界面点击 我接受(I) 后，会进入到 Install Options 界面 ，在该界面选择第二个选项 Add Graphviz to the system Path for all users，即添加系统环境变量，这样 madge 才可以随处执行它，也可以选择第三个选项，那是添加用户环境变量，只对当前登录账号生效。后面的步骤一直点击下一步就可以了，等待安装完毕。

安装完毕后，打开一个新的 cmd 或 bash 窗口，因为在 Windows 中新添加的环境变量只对新打开的控制台窗口生效，之前打开的窗口并不能读取的上面安装软件时添加的环境变量。

生成

madge ./dist -i image.png

输出结果：

D:\dev\backend-hospital-next-nodejs\restful-api>madge ./dist -i image.png
Processed 268 files (4.1s)

√ Image created at D:\dev\backend-hospital-next-nodejs\restful-api\image.png

从输出结果中可以看到加载/依赖图已成功生成，位于磁盘 D:\dev\backend-hospital-next-nodejs\restful-api\image.png 处，打开查看即可。

参考

• https://www.ruanyifeng.com/blog/2015/11/circular-dependency.html
• https://github.com/pahen/madge
• https://github.com/aackerman/circular-dependency-plugin