当使用terser在模块模式下压缩javascript代码时，仅在html中调用或未被js模块内部直接引用的函数可能会被误删。即使设置`dead_code: false`或`mangle.reserved`也可能无效。本文将介绍一种确保此类函数在压缩后依然可用的有效策略：通过显式将其挂载到`window`对象，使其成为全局可访问成员，从而避免被terser视为死代码移除。
理解Terser在模块模式下的行为
Terser是一款强大的JavaScript代码压缩工具，能够有效减小文件体积，提升加载速度。然而，在特定配置下，它可能会移除一些我们认为有用的函数。当Terser的配置中设置module: true时，它会将JavaScript文件视为ES模块。ES模块具有独立的模块作用域，模块内部声明的变量和函数默认不会自动暴露到全局作用域（window对象）。
在这种模式下，Terser会执行严格的死代码消除（Dead Code Elimination）。如果一个函数在模块内部没有被任何其他代码引用、调用或导出，Terser就会认为它是“死代码”，即使它可能在模块外部（例如，通过HTML的onclick属性）被调用。
以下Terser配置示例展示了常见的困境：
{
compress: {
drop_console: true,
drop_debugger: false,
dead_code: false, // 试图保留死代码，但在此场景下可能无效
},
mangle: {
reserved: ["getUserStats"], // 防止函数名被混淆，但不阻止移除
},
module: true, // 关键设置，触发此问题
toplevel: true,
keep_fnames: false
}尽管设置了dead_code: false，Terser可能仍然会移除函数。这是因为dead_code: false主要用于防止移除那些在代码逻辑上无法触及的语句块，而不是改变Terser对未被模块内部引用的“私有”函数是否属于“死代码”的判断。mangle.reserved则仅仅是防止函数名被混淆，而不是阻止其被移除。
立即学习“前端免费学习笔记（深入）”；
解决方案：显式挂载到全局window对象
解决此问题的核心思想是，将需要从HTML或其他外部环境调用的函数显式地暴露到全局作用域。在浏览器环境中，这意味着将其作为window对象的属性进行挂载。一旦函数成为window对象的属性，Terser就会将其视为一个外部可访问的全局成员，从而避免将其作为未使用的死代码移除。
实现示例
假设我们有一个名为getUserStats的函数，它在JavaScript文件中定义，并在HTML中通过onclick="getUserStats()"调用：
// JavaScript文件 (例如：script.js)
// 原始函数定义
function getUserStats() {
console.log("正在获取用户统计信息...");
// ... 函数业务逻辑 ...
return { score: 100, level: 10 };
}
// 解决方案：将函数显式挂载到window对象
window.getUserStats = getUserStats;
// 现在，即使在Terser的module模式下，getUserStats 也不会被移除
// 因为它已成为全局可访问的属性在HTML文件中，你可以继续像往常一样调用它：
Terser Function Example
用户操作
通过这种方式，Terser在压缩script.js时，会识别到window.getUserStats = getUserStats;这一语句，从而判断getUserStats函数具有外部依赖，并将其保留下来。
注意事项与最佳实践
全局命名冲突： 将函数挂载到window对象会增加全局命名空间污染和潜在的命名冲突风险。在大型项目中，应谨慎使用，并考虑使用唯一的命名空间来组织全局函数，例如：window.myApp = window.myApp || {}; window.myApp.getUserStats = getUserStats;。
-
模块化原则： 这种方法在一定程度上违背了ES模块的封装性原则。对于现代前端开发，更推荐通过JavaScript动态绑定事件监听器，而不是直接在HTML中使用on*属性。这样，函数就可以保持在模块内部，并通过模块导入/导出机制进行管理。
// 更推荐的现代JavaScript事件处理方式 document.addEventListener('DOMContentLoaded', () => { const button = document.querySelector('button'); if (button) { button.addEventListener('click', getUserStats); } }); function getUserStats() { console.log("正在获取用户统计信息..."); // ... } // 在这种情况下，getUserStats 在模块内部被引用，Terser不会移除它 Terser配置的局限性： 再次强调，dead_code: false主要针对代码块的可达性，mangle.reserved仅防止重命名。它们都无法解决Terser在module: true模式下，对未在模块内部引用的函数进行死代码消除的问题。
适用场景： 这种window挂载的方法特别适用于需要与遗留HTML代码集成，或在某些特殊场景下必须从全局环境访问特定函数的项目。
总结
当Terser在module: true模式下压缩JavaScript代码，且某些函数仅在HTML中调用而未在JS模块内部直接引用时，它们很可能会被移除。为了确保这些函数在压缩后依然可用，最直接有效的方法是显式地将它们挂载到window对象，使其成为全局可访问的成员。虽然这会带来一定的全局命名空间污染风险，但在特定场景下，它是一种简单而可靠的解决方案。在实际开发中，建议优先采用现代JavaScript的事件绑定机制，以保持代码的模块化和封装性。
