如何用html-minifier-terser混淆事件属性中的函数名？

问题根源 #

你遇到的核心问题是：处理<script>块和事件属性内的JavaScript代码时，Terser使用了独立的混淆缓存，导致函数名的混淆映射不一致——script里的函数被重命名为n()，但事件属性里仍保留原函数名，最终引发引用错误。

你的当前配置中，nameCache: {}是每次压缩时新建的空对象，无法在不同JS片段的处理之间共享混淆后的名称映射关系。

解决方案 #

1. 复用全局的nameCache对象 #

将nameCache定义为一个外部变量，确保处理整个HTML的所有JS片段（包括script块和事件属性）都使用同一个缓存容器，这样Terser就能同步函数名的混淆结果。

示例代码：

// 提前定义全局缓存对象，避免每次压缩重新创建
const nameCache = {};

const minifiedHtml = htmlMinifier.minify(你的原始HTML内容, {
  // 其他HTML压缩选项（比如 collapseWhitespace、removeComments 等）
  minifyJS: {
    compress: { drop_console: true },
    mangle: { toplevel: true },
    nameCache: nameCache // 传入同一个缓存对象
  }
});

2. 验证配置生效逻辑 #

html-minifier-terser处理事件属性内的JS时，会调用Terser进行压缩混淆，只要共享同一个nameCache，就能保证事件属性里的函数名和script块内的混淆结果完全一致，不会出现引用错误。

如果仍有问题，可以检查：

• 确保函数确实是顶层/全局作用域的（toplevel: true只会混淆顶层变量，嵌套函数不在此范围）
• 没有在Terser配置中添加keep_fnames这类保留函数名的选项

内容的提问来源于stack exchange，提问作者handle：匿名