1. 原因与机制
在现代前端工程中，Terser 作为常用的 JavaScript 压缩工具，可能在打包阶段移除看似未被使用的代码。对于绑定在 HTML 元素上的事件处理函数，例如 onclick、onchange 等，这些函数往往不直接在模块内部被引用，因此如果压缩器错误地判断它们为无副作用的无用代码，就会被移除，从而导致页面事件失效。核心在于区分“嵌入到 HTML 的全局函数”和“模块内部的私有实现”，以及配置如何表明这些全局入口具有副作用。
在未给出明确外部引用的情况下，压缩器可能基于静态分析丢弃函数定义。避免这种情况的关键是通过压缩配置显式保留必要的全局符号、禁用某些优化以及确保全局函数在打包后的环境中仍然可访问。
1.1 HTML 调用的函数为何会被误判为未使用
因为在代码引用关系中，事件处理函数的调用来自 DOM 事件，而不是 JavaScript 代码中的变量引用。没有静态引用，Terser 可能认为该函数在“模块内部未被直接使用”，从而进入未使用代码并可能被裁剪。
如果你的页面通过触发事件来调用这个函数，应该确保这个函数被显式地暴露为全局标识，或者通过构造副作用来告诉打包器这个函数不可移除。全局暴露与副作用提示是关键。
1.2 其他影响因素
函数命名冲突、函数被混淆、以及顶层作用域的作用域链都可能影响压缩策略。统一的命名约定和明确的导出入口可以降低误删概率。
此外，框架/打包器的版本差异也会改变默认优化行为，推荐在升级或切换打包器时同时对 terser 的参数进行复核。版本适配与参数对齐是确保稳定性的要点。
2. 实用配置与实现方法
要防止 HTML 调用的 JavaScript 函数在 Terser 压缩中被移除，最直接的方法是调整 compress 设置，禁用未使用代码的严格裁剪，并通过 mangle 保留需要的全局符号。以下配置思路适用于主流打包工具。
在实际场景中，可以结合全局导出和函数名保留来确保稳定性。优先级排序：先确保全局入口可用，再细化函数名混淆范围，最后再对输出进行大小写处理与注释控制。综合考虑可控性与体积之间的权衡。
2.1 禁用未使用代码的影响
将 compress.unused 设置为 false 可以避免将对 HTML 事件回调无直接引用的函数移除。这是最关键的一步，但也会导致代码体积略有增大，需要权衡。
同时可以结合 dead_code、conditionals 等选项的谨慎使用，避免影响其他有用的代码路径。逐项控制压缩策略，以符合项目需求。
{"compress": {"unused": false,"dead_code": true},"mangle": {"toplevel": true,"keep_fnames": true,"reserved": ["handleClick", "openModal"]},"output": {"comments": false}
}2.2 确保全局函数不被混淆
使用 mangle.keep_fnames 设置可保留函数名，避免被改名导致 HTML 引用破坏。如果 HTML 事件处理器直接引用了函数名，保留名称尤为重要。
将要暴露给全局的函数通过 window 对象显式绑定，确保浏览器全局作用域能访问。下面的示例演示了在入口脚本中对全局函数的暴露方式。明确的全局暴露有助于稳定性。
// 例：在入口脚本中
window.handleClick = function handleClick() {// 清晰暴露的全局回调console.log('点击事件触发');
};
3. 兼容性与工作流程注意事项
不同打包工具的整合方式存在差异，需在相应的插件或选项中指定 compress.unused 的行为。务必查阅工具文档的 terserOptions 映射，以确保设置在目标环境下生效。
在 Webpack、Rollup、Vite 等常用打包工具中，参数结构可能略有差异，但核心目标保持一致：确保未引用代码不会被误删，同时保留关键全局符号。工具特性差异需要单独验证。
3.1 不同打包工具的差异
Webpack 通过 TerserPlugin 将 terserOptions 传入，最直接的做法是对 compress、mangle、output 三个方面进行设置。请确保未使用代码不被裁剪，并对全局函数进行命名保护。
Rollup 和 Vite 也提供集成的 terser 配置入口，需在对应插件的选项中加入相同的压缩策略。跨工具的一致性有助于稳定性。
3.2 生产环境验证策略
发布前在生产构建中执行端到端测试，确保页面中所有通过 HTML 调用的函数均能正确执行。引入自动化回归测试会降低人工验证成本。
可以在页面中放置一个简单的按钮或事件试验区域，确保 onclick、onchange 等事件能正确触发。下面是一个简单的全局函数与事件绑定的示例页面，适用于快速验证。快速验证能快速定位压缩误删问题。
4. 排错与验证
在调试阶段，使用多种验证手段可以快速确认 HTML 调用的 JavaScript 函数没有在 Terser 压缩中被误删。控制台输出与断点调试是第一线的证据，同时结合静态分析检查引用关系。稳定性来自多维度验证。
如果事件无响应，先检查全局函数是否被正确绑定，以及打包后的代码中是否存在重命名或丢失。通过在页面中添加简单的测试用例，可以快速定位问题根源。逐步排查可提升排错效率。
// 运行时简单断点
document.getElementById('btn').addEventListener('click', window.handleClick);
4.1 快速验证方法
在本地构建后，打开浏览器开发者工具，触发页面上的事件，观察控制台输出与网络请求。控制台输出是判断函数是否被保留的直接证据。
如果事件无响应，先检查全局函数是否被正确绑定，以及打包后的代码中是否存在重命名或丢失。下面的示例演示了一个简单的事件绑定验证。简单直接的验证有助于快速定位问题。
// 绑定与触发验证
document.getElementById('btn').addEventListener('click', window.handleClick);
4.2 常见错误与排查步骤
错误场景包括：函数名被重新命名、全局对象缺失、事件属性拼写错误、加载顺序导致未定义。逐项排查可快速定位问题根源。
日志与 sourcemap 可以帮助还原压缩前后的变更，确保处理过程透明。建立可追溯的排错链路很重要。
