使用WebpackObfuscator后JS包体积翻倍是否正常？求轻量混淆器

现象描述 #

使用Webpack打包浏览器端ES6模块时，添加WebpackObfuscator或JavaScriptObfuscator后，生成的JS包体积几乎翻倍，远超浏览器可接受范围：

未使用混淆的打包结果 #

webpack --mode production --progress

asset app.js 204 KiB [emitted] [minimized] (name: main) 1 related asset
asset 513.app.js 28.6 KiB [emitted] [minimized] (id hint: vendors)
asset 25.app.js 22.6 KiB [emitted] [minimized]

（主文件app.js为204 KiB）

使用WebpackObfuscator的打包结果 #

webpack --mode production --progress

asset app.js 480 KiB [emitted] [minimized] [big] (name: main) 1 related asset
asset 513.app.js 67.2 KiB [emitted] [minimized] (id hint: vendors)
asset 25.app.js 51.2 KiB [emitted] [minimized]

（主文件app.js达480 KiB！）

所有混淆后的文件体积均为未混淆时的两倍。

问题 #

1. 这种体积翻倍的情况是否属于正常现象？
2. 是否有更轻量化的Webpack JS混淆工具？

我的Webpack配置 #

import path from 'path';
import {fileURLToPath} from 'url';
import WebpackObfuscator from 'webpack-obfuscator';

// __dirname doesn't work with ES6 modules :/
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
    library: "app",
    clean: true
  },
  target: ["web", "es2020"],
  plugins: [
    new WebpackObfuscator({
      rotateStringArray: true
    })
  ]
};

解答 #

1. 体积翻倍是否正常？ #

这种情况是正常的，但和启用的混淆选项直接相关。WebpackObfuscator/JavaScriptObfuscator这类工具会通过字符串数组旋转、变量名混淆、控制流扁平化、死代码注入等手段混淆代码，这些操作必然会增加代码体积。尤其是控制流扁平化和死代码注入，会大幅增加冗余逻辑，直接导致包体积膨胀。

你当前只启用了rotateStringArray，但工具默认可能开启了其他混淆选项（比如变量名混淆、字符串编码），这些都会推高体积。如果想平衡混淆强度和体积，可以关闭controlFlowFlattening、deadCodeInjection等高开销选项。

2. 轻量化的Webpack混淆工具推荐 #

若追求更小的体积开销，同时保留基础混淆能力，可考虑以下工具：

• TerserPlugin：它是Webpack生产模式默认的压缩插件，同时具备基础混淆能力（变量名混淆、死代码消除等）。启用混淆选项后几乎不会额外增加体积，甚至可能进一步压缩代码。配置示例：

  import TerserPlugin from 'terser-webpack-plugin';
  
  export default {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            mangle: true, // 启用变量名混淆
            compress: {
              drop_console: true, // 可选：移除console输出
            },
          },
        }),
      ],
    },
  };
  

• babel-plugin-minify：基于Babel的插件集合，包含变量名缩短、字符串字面量压缩、死代码消除等轻量化混淆手段，混淆强度适中，体积增加极少，适合对体积敏感的场景。

• obfuscator-loader：相比WebpackObfuscator提供更细粒度的选项控制，可精准关闭高体积开销的混淆特性，只保留必要功能，在混淆强度和体积间找到平衡。

内容的提问来源于stack exchange，提问作者Jason Polites