死代码注入混淆后怎么避免影响实际功能？

一熙妍提问于 2026-03-16 15:28:19 阅读 51

安全

我用 webpack 加了个混淆插件，开启了死代码注入，结果页面有些按钮点击没反应了。是不是注入的无效逻辑干扰了真实代码？

比如下面这种混淆后的代码，明显多了很多无用分支：

function handleClick() {
    if (Math.random() > 0.5) {
        return;
    }
    // 真实逻辑
    submitForm();
    if (false) {
        console.log('dead code');
    }
}

有没有办法让混淆只加在安全的地方，别动我的事件处理函数？

我来解答赞 7 收藏

反馈

1 条解答

令狐俊杰 Lv1

你这种情况我遇到过，terser 的死代码删除确实可能误伤。问题在于它分不清哪些"无用"代码是真的该删的，哪些是有副作用的。

核心解决思路：配置 webpack 的 optimization 和 terser 选项

最直接的办法是在 webpack 配置里这样写：

// webpack.config.js

module.exports = {

  optimization: {

    minimize: true,

    minimizer: [

      new TerserPlugin({

        terserOptions: {          compress: {

            // 关闭这些可能误删的选项

            dead_code: true,

            unused: true,

            drop_console: true,  // 这个也可能坑人

            passes: 2

          },

          mangle: true,

          output: {

            comments: false

          }

        },

        extractComments: false

      })

    ]

  }

}

如果还是不行，试试在事件处理函数上加注解告诉 terser 别动它：

// 方式1：函数声明

function handleClick() {

  submitForm();

}



// 方式2：如果是箭头函数，用 /*#__PURE__*/ 包裹

const handleClick = /*#__PURE__*/ () => {

  submitForm();

};



// 方式3：在 submitForm 调用处标记

function handleClick() {

  /*@__PURE__*/ submitForm();

}

另外检查下你的代码是不是用了 tree-shaking 不友好的写法，比如：

// 这种动态调用 tree-shaking 识别不了

const handler = eventHandlers[eventType];

handler();



// 改成直接调用

button.addEventListener('click', handleClick);

还有一种可能是你用了模块导出但没在代码里直接引用，webpack 当成未使用的代码删了。检查下 package.json 里的 sideEffects 配置，如果确认有副作用的模块，加：

{

  "sideEffects": ["./src/event-handlers.js", "*.css"]

}

最后建议本地开 dev 模式跑一遍确认功能正常再上生产，混淆后的调试确实恶心。

2026-03-17 19:09