使用build-angular:browser-esbuild时，如何替代NG_BUILD_MANGLE=0禁用混淆？

在Angular的esbuild构建器中，确实不再支持NG_BUILD_MANGLE=0这个环境变量来单独禁用代码混淆，你可以通过以下几种方式实现需求：

• 命令行快速禁用所有优化（简单但粗暴）
  直接执行：

  ng build --optimization=false
  

  注意：这个命令会禁用所有构建优化，包括代码压缩、混淆、树摇等，适合临时调试场景。

• 细粒度配置仅禁用代码混淆（推荐）
  修改项目根目录下的angular.json文件，找到对应构建目标的options配置，将optimization设置为对象形式，单独关闭脚本的混淆功能：

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser-esbuild", // 或@angular-devkit/build-angular:application
      "options": {
        "optimization": {
          "scripts": {
            "mangle": false
          },
          "styles": true, // 保持样式优化
          "fonts": true   // 保持字体优化
        },
        // 其他配置项...
      }
    }
  }
  

  这样只会禁用代码混淆，其他优化（如压缩、树摇）依然生效。

• 通过环境变量控制（兼容原有习惯）
  如果你想保留类似NG_BUILD_MANGLE的环境变量控制方式，可以在angular.json中使用环境变量插值：

  "optimization": {
    "scripts": {
      "mangle": "${NG_BUILD_MANGLE:-true}"
    }
  }
  

  之后运行构建时，通过环境变量指定是否禁用混淆：

  NG_BUILD_MANGLE=false ng build
  

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