循环依赖的那些事儿

循环依赖的那些事儿

背景

在业务开发过程中，经常会使用 antd 作为 UI 组件库构建页面，然而在 [email protected] 版本之前的版本，众多组件存在循环依赖的现象，导致在 vite 、rollup、microbundle 等构建工具中都出现大量的警告。对于一个用户量庞大的组件库来说，这无疑是一个巨大的隐患，有可能导致使用者在使用 antd 时出现一些不可预料的问题。因此，antd 的核心贡献者 afc163 决定立项整改 antd 当中循环依赖的乱象，具体详见：refactor: resolve Circular dependency。

我也深入参与了改专项优化任务，因此，借此机会跟大家一起分享一下关于 循环依赖的那些事儿。

循环依赖的危害

在 Web 应用中，循环依赖（Circular Dependency）是指多个模块之间相互引用，形成一个环形依赖关系。循环依赖会导致以下问题：

1. 初始化顺序不确定

   循环依赖会导致模块之间的初始化顺序不确定，因为当一个模块依赖的其他模块还没有加载完毕时，它自己也无法被正确初始化。这可能会导致程序出现各种奇怪的 bug，因为程序的执行顺序无法预测。

2. 性能下降

   循环依赖会导致程序加载和初始化的性能下降，因为每次加载模块时，都需要检查和解决模块之间的依赖关系。如果循环依赖比较多，这个过程会变得非常复杂和耗时。

3. 可维护性降低

   循环依赖会使代码的可维护性降低，因为它增加了代码的复杂度和耦合性。当一个模块需要被修改时，它可能会影响到其他依赖它的模块，从而导致整个程序崩溃或产生意料之外的行为。

4. 代码重用性降低

   循环依赖会使代码重用性降低，因为一个模块无法被单独地使用和测试。如果一个模块依赖于其他模块，那么这些模块也必须被一起使用和测试。这会使代码更加难以重用，并增加编写测试用例的难度。

检测循环依赖

了解了循环依赖的危害后，我们就要想办法解决循环依赖的问题了。首先，我们必须得知道，究竟哪里出现了循环依赖，这样我们才能有的放矢，有针对性的进行优化，而不至于盲目乱改。

目前大部分的主流构建工具都有自己的循环依赖检测插件,甚至直接内置到了构建工具当中，以下是几种常见构建工具的循环依赖检测插件：

• webpack：circular-dependency-plugin
• vite：内置，无需安装插件
• rollup：内置，无需安装插件

解决循环依赖

检测出究竟哪个地方有了循环依赖之后，接下来的事情就简单了，找到出现循环依赖的地方，重构代码即可，以下为 antd 当中重构 List 组件解决循环问题的解决方案：

其实，解决循环也是有一些技巧的：

通常之所以出现循环依赖，就是因为刚开始构建项目时，没有做好公共模块与顶层模块的抽离工作。

例如：A 组件 依赖 B 组件，B 组件依赖 C 组件，C 组件又依赖了 A 组件。

那么我们需要好好分析一下，他们之间相互依赖的代码，是否都是一些共性，如公共的工具方法或类型等，如果是的话，那我们可以额外建一个新的文件，如：shared.ts 用来定义这些公共的工具或类型，然后让依赖于这些工具的组件都从 shared 当中引入即可。

结语

组件库的长期维护不是一件轻松的事情，如果一但发现了可能影响到其健康成长的问题，如：出现循环依赖，我们应该及时排查处理，以免给后面的维护以及使用的用户挖坑。如果你的项目页深受循环依赖的困扰而不知所措，那么，相信看到这里，你已经能够轻松解决循环依赖的问题了。