如何在客户端加载前混淆/压缩JavaScript代码并保留开发注释？

阿华AIGC实验室

2026-5-28

嗨，针对你的需求，我整理了一套成熟的分环境代码处理方案——既能在开发阶段完整保留所有注释方便后续迭代维护，又能在生产环境输出混淆/压缩后的无注释代码，彻底避免注释泄露带来的安全风险。下面是具体实现方式：

解决方案：分环境处理代码混淆/压缩 + 保留开发注释

一、使用构建工具实现自动化处理（推荐方案）

前端构建工具能自动区分开发和生产环境，开发时保留源码与所有注释，生产时自动完成压缩、混淆并移除注释，是最省心的落地方式。

1. Webpack 配置示例

Webpack 默认在生产模式下会压缩代码，你可以通过 terser-webpack-plugin 精细控制混淆规则与注释移除：

先安装依赖：

npm install terser-webpack-plugin --save-dev

在 webpack.config.js 中配置环境逻辑：

const TerserPlugin = require('terser-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  optimization: {
    minimizer: isProduction ? [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 可选：生产环境移除console日志
            drop_debugger: true // 可选：移除debugger语句
          },
          mangle: true, // 开启变量名混淆
          format: {
            comments: false, // 彻底移除所有注释
          },
        },
        extractComments: false, // 禁止将注释提取到单独文件
      })
    ] : [],
  },
  // 其他项目配置...
};

开发与生产命令：

npm run dev # 开发模式：保留所有注释与源码格式，方便迭代
npm run build # 生产构建：输出混淆压缩、无注释的安全代码

2. Vite 配置示例

Vite 天生支持分环境处理，生产构建默认压缩代码，你可以通过 vite.config.js 调整混淆规则：

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  return {
    build: {
      minify: mode === 'production' ? 'terser' : false,
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        },
        mangle: true,
        format: {
          comments: false,
        },
      },
    },
    // 其他项目配置...
  };
});

开发时运行 vite 保留源码注释，生产时执行 vite build 输出混淆后的代码即可。

二、专门的代码混淆工具（适用于无构建流程的简单项目）

如果你的项目不需要完整构建流程，可以用专门工具单独处理代码：

1. JavaScript Obfuscator（高强度混淆）

这个工具支持深度混淆，比如变量名替换、字符串加密、控制流扁平化，能大幅提升逆向工程难度：

安装依赖：

npm install javascript-obfuscator --save-dev

编写处理脚本 obfuscate.js：

const JavaScriptObfuscator = require('javascript-obfuscator');
const fs = require('fs');

// 读取带注释的源码
const inputCode = fs.readFileSync('./src/main.js', 'utf8');

// 配置混淆规则
const obfuscationResult = JavaScriptObfuscator.obfuscate(inputCode, {
  compact: true, // 压缩代码体积
  controlFlowFlattening: true, // 开启控制流扁平化（增加逆向难度）
  deadCodeInjection: true, // 注入无用干扰代码
  renameGlobals: false, // 不重命名全局变量（避免影响外部依赖）
  stringArray: true, // 加密字符串常量
  stringArrayEncoding: ['base64'], // 字符串编码方式
  commentsOut: true, // 彻底移除所有注释
});

// 输出混淆后的代码
fs.writeFileSync('./dist/main.obfuscated.js', obfuscationResult.getObfuscatedCode());

运行脚本生成混淆代码：

node obfuscate.js

2. Terser（轻量压缩+移除注释）

如果只需要压缩代码、移除注释，不需要高强度混淆，Terser足够满足需求：

安装依赖：

npm install terser --save-dev

编写处理脚本 minify.js：

const terser = require('terser');
const fs = require('fs');

async function minifyCode() {
  const inputCode = fs.readFileSync('./src/main.js', 'utf8');
  const result = await terser.minify(inputCode, {
    mangle: true,
    compress: {
      drop_console: true,
    },
    format: {
      comments: false,
    },
  });
  fs.writeFileSync('./dist/main.min.js', result.code);
}

minifyCode();