javascript tree shaking 处理循环依赖的核心做法是确保模块导出的是纯值（如常量、函数引用）而非执行副作用，并优先使用 es module 的静态分析特性。webpack 等现代构建工具在开启 sideeffects: false 后，会基于 ast 解析导入关系，只要循环链中不触发模块初始化时的副作用代码，死代码就会被安全移除。若循环导致运行时错误，需重构为延迟加载或拆分入口。
Webpack 如何识别并跳过循环依赖中的死代码
Webpack 通过静态分析模块间的 import 和 export 语句来构建依赖图。当检测到循环时，它不会立即报错，而是继续标记这些模块。如果模块内部没有执行副作用（如修改全局变量、发起网络请求），且导出的内容仅依赖于其他模块的静态引用，Tree Shaking 就能正常工作。关键在于区分“静态绑定”与“动态访问”，前者允许优化，后者可能因循环而失效。
// utils.js
export const PI = 3.14;
export function calculateArea(radius) {
return PI * radius * radius;
}
// main.js
import { calculateArea } from './utils';
console.log(calculateArea(5));
预期结果：构建后的文件中，PI 和 calculateArea 被内联或保留，未使用的导出被移除。若 utils.js 中有额外未导入的函数，它们将被删除。
Rollup 对循环依赖的处理机制有何不同
Rollup 同样采用静态分析，但其默认配置更严格。对于循环依赖，Rollup 会尝试将模块合并或重命名以避免冲突。如果循环中包含非静态表达式，Rollup 可能会警告或生成较少的优化代码。与 Webpack 相比，Rollup 更倾向于保持模块的独立性，因此在处理复杂循环时，可能需要手动配置 external 或调整输出格式。
// moduleA.js
import { funcB } from './moduleB';
export function funcA() {
return funcB();
}
// moduleB.js
import { funcA } from './moduleA';
export function funcB() {
return funcA();
}
预期结果：Rollup 会生成一个包含两个函数的单一文件，但不会执行它们。若这两个函数未被外部调用，它们可能被完全移除，取决于是否标记为副作用。
当循环依赖导致运行时错误时如何排查
如果循环依赖导致 ReferenceError 或 TypeError，通常是因为模块在初始化时访问了尚未导出的成员。例如，模块 A 在定义时立即调用了模块 B 的函数，而模块 B 又依赖模块 A 的某个值，此时该值可能为 undefined。解决方法是延迟调用或使用工厂模式，确保所有依赖都已完全初始化后再进行交互。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
