Ionic3应用中JavaScript代码应先混淆还是先压缩？

首先直接给结论：你应该调整构建顺序为「先压缩，再混淆」，这是既能保留selfDefend防护，又能完成正常构建的最优方案。下面详细解释原因和实现方式：

为什么先混淆后压缩会失败？ #

selfDefend选项的核心作用是给混淆后的代码添加防篡改机制——它会插入校验逻辑，一旦混淆后的代码被后续工具（比如你的uglify压缩器）修改（比如缩短变量名、移除空格、删除冗余代码），就会触发保护逻辑导致代码执行失败或构建报错。这正是你现在遇到的问题：混淆后的代码被压缩环节修改，触发了selfDefend的限制。

为什么先压缩再混淆是正确顺序？ #

压缩（uglify）和混淆的作用是互补的：

• 压缩是对原始代码做「精简优化」：移除空格、注释，缩短变量名，删除无用代码，本质是让代码更紧凑，但不会改变代码的核心逻辑。
• 混淆是对代码做「加密变形」：打乱逻辑结构、添加干扰代码、开启selfDefend防篡改，目的是增加逆向工程的难度。

先压缩再混淆的好处：

1. 压缩后的代码体积更小，后续混淆处理的速度更快。
2. 混淆是在已经精简的代码上进行，最终的混淆代码会保留selfDefend的防护，且不会被后续步骤修改，完美规避冲突。
3. 完全不需要牺牲selfDefend带来的安全性。

在Ionic3中如何调整构建顺序？ #

Ionic3的构建基于Webpack，你需要修改项目的Webpack配置文件（通常是项目根目录的webpack.config.js，如果没有可以通过ionic.config.json指定），调整插件的执行顺序：

1. 确保你已经安装了所需插件（如果没装的话）：

npm install uglifyjs-webpack-plugin webpack-obfuscator --save-dev

2. 修改Webpack配置的plugins数组，先添加压缩插件，再添加混淆插件：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
  // ...其他原有配置（比如entry、output等）
  plugins: [
    // 第一步：执行代码压缩
    new UglifyJsPlugin({
      uglifyOptions: {
        mangle: true, // 启用变量名混淆
        compress: {
          drop_console: true // 可选：移除console.log
        }
      }
    }),
    // 第二步：执行代码混淆，开启selfDefend
    new WebpackObfuscator({
      selfDefending: true,
      rotateStringArray: true,
      shuffleStringArray: true,
      // 根据你的需求添加其他混淆配置
    }, ['**/vendor.js']) // 重要：排除第三方依赖库，避免混淆导致运行错误
  ]
};

3. 执行ionic build --prod测试构建，此时压缩和混淆会按正确顺序执行，不会再触发selfDefend的报错。

关于两个选项的对比 #

• 选项1（调整顺序）：推荐！既保留了selfDefend的防篡改保护，又能正常完成构建，是安全性和可行性兼顾的方案。
• 选项2（关闭selfDefend）：虽然操作简单，但会失去selfDefend提供的核心防护——恶意用户可以更容易地对混淆后的代码进行格式化、逆向分析，安全性大打折扣，仅建议在测试环境或特殊场景下临时使用。

额外注意事项 #

• 测试构建后的应用：先压缩再混淆可能会出现一些极端情况（比如某些压缩后的代码结构和混淆逻辑冲突），一定要全面测试应用的功能是否正常。
• 排除不需要混淆的文件：像vendor.js这类第三方依赖库完全不需要混淆，不仅浪费时间，还可能导致库的功能异常，一定要通过混淆插件的第二个参数排除。

内容的提问来源于stack exchange，提问作者Elio Khattar