Angular14执行ng build --production未完全混淆压缩JS类问题咨询

Angular 14 生产构建默认集成的 Terser 压缩工具，默认仅做空白符移除、死代码消除、局部变量名缩短处理，不会全量混淆类名、函数名等标识符。这不是配置错误，是 Angular 框架本身的运行机制决定的：依赖注入、组件注册、反射相关逻辑需要保留部分标识符原名，强行默认全量混淆会直接导致应用运行崩溃，因此你能在构建产物里看到 AppComponent 等类名明文是默认构建下的正常现象。

你当前 angular.json 中 production 配置仅开启了 optimization 总开关，可以细化 Terser 配置做更激进的压缩，不需要引入额外依赖，调整后不会影响应用正常运行：
将 production 节点下的 "optimization": true 替换为如下细化配置：

"optimization": {
  "scripts": {
    "minify": true,
    "mangle": {
      "keep_classnames": false,
      "keep_fnames": false
    }
  },
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": {
    "inline": true
  }
}

配置修改后重新执行生产构建，未被 Angular 运行时强依赖的普通类、函数名会被自动混淆缩短。但被 @Component、@Injectable 等装饰器修饰的组件、服务类名，因为框架运行时需要识别，仍有概率保留原名，无法达到完全看不到业务实现标识的效果。

Angular CLI 原生不支持全量代码混淆，要实现业务代码标识符全替换、字符串加密的效果，需要通过自定义 Webpack 配置接入专业混淆工具，操作步骤如下：

• 安装对应版本依赖：执行命令 npm i -D @angular-builders/custom-webpack@14 webpack-obfuscator javascript-obfuscator，注意 custom-webpack 的大版本号必须和你本地的 Angular 版本保持一致，使用 Angular14 就安装 14.x 版本。
• 在项目根目录新建 webpack.partial.js 配置文件，写入如下混淆规则：

const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
  plugins: [
    new WebpackObfuscator({
      identifierNamesGenerator: 'hexadecimal',
      stringArray: true,
      rotateStringArray: true,
      stringArrayThreshold: 0.75,
      renameProperties: true,
      // 排除node_modules下的第三方依赖，避免混淆第三方代码导致运行报错
      exclude: [/node_modules/]
    })
  ]
}

• 修改 angular.json 中的 build 配置：将原来的 builder @angular-devkit/build-angular:browser 替换为 @angular-builders/custom-webpack:browser，在 build 的 options 节点下新增自定义配置引入项，其余原有配置（outputPath、main、polyfills等）全部保持不变：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.partial.js",
      "replaceDuplicatePlugins": true
    },
    // 其余原有options配置保持原样
  },
  // configurations等其余节点配置不需要修改
}

• 重新执行 ng build --configuration=production 即可得到全量混淆后的构建产物。

注意：混淆规则不要设置得过于激进，控制流平展、死代码注入这类选项会导致包体积暴涨50%以上，同时明显降低应用运行性能，普通业务场景只开标识符重命名、字符串加密即可。混淆完成后必须全量回归测试功能，避免动态属性访问、反射相关的逻辑因为标识符被重命名出现异常。

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