ESBuild 中类实例化对 Tree-Shaking 的影响分析

在 JavaScript 打包工具 ESBuild 的使用过程中，开发者 skyfighteer 发现了一个关于 Tree-Shaking 的有趣现象：即使某个函数完全没有被导入使用，只要它内部实例化了一个类并调用了类方法，这个类及其相关代码就无法被 Tree-Shaking 优化掉。

问题现象

通过一个最小化复现案例可以清晰地展示这个问题。假设我们有一个库包含两个模块：

1. usedFunction.ts 包含一个实际被使用的函数
2. unusedFunction.ts 包含一个未使用的函数，该函数内部实例化了一个类并调用了类方法

当使用 ESBuild 进行打包时，即使 unusedFunction 完全没有被导入使用，其中的 UnusedClass 类和其实例化代码仍然会出现在最终打包结果中。这与 Tree-Shaking 的预期行为不符，因为理论上未被使用的代码应该被完全移除。

技术原理分析

这种现象的根本原因在于 ESBuild 和 Rollup 等打包工具在进行 Tree-Shaking 时的保守策略。当代码中存在类实例化并调用方法的操作时，打包工具难以确定这些操作是否会产生副作用（side effects）。出于安全考虑，工具会选择保留这些代码，以防它们确实有必要的副作用。

在 ESBuild 和 Rollup 的 "safe" 模式下，这种保守策略表现得尤为明显。而 Rollup 的 "recommended" 模式则采用了更积极的优化策略，能够正确处理这种情况。

解决方案

针对这个问题，开发者 hyrious 提供了一个有效的解决方案：使用 /*#__PURE__*/ 注释标记类实例化操作。这个特殊的注释告诉打包工具，该实例化操作是"纯净"的，如果没有被使用可以安全移除。

const unusedClass = /*#__PURE__*/ new UnusedClass()

这种标记方式是一种通用的 JavaScript 优化手段，不仅适用于 ESBuild，也同样适用于 Rollup 等其他打包工具。

最佳实践建议

1. 对于明确没有副作用的类实例化操作，建议始终使用 /*#__PURE__*/ 注释进行标记
2. 在性能敏感的应用程序中，可以考虑使用 Rollup 的 "recommended" 模式进行打包
3. 定期检查打包结果，确认 Tree-Shaking 是否按预期工作
4. 对于复杂的类设计，考虑将可能产生副作用的操作与纯操作分离

通过理解打包工具的工作机制并合理使用优化标记，开发者可以更好地控制最终打包产物的体积，提升应用性能。