如何查看Angular CLI production构建的默认配置选项及对应取值？

官方提供了完整的Angular构建配置说明，包含production模式的所有默认选项与取值，你可以通过本地CLI直接查询对应你项目所用Angular版本的准确配置：

• 执行命令 ng build --help 可查看所有build配置项的含义、取值范围以及不同模式下的默认值
• 执行命令 ng config projects.<你的项目名称>.architect.build.configurations.production 可直接输出当前项目完整的production模式生效配置

以下是Angular 14及以上稳定版本的默认production配置完整示例：

"production": {
  "buildOptimizer": true,
  "optimization": true,
  "vendorChunk": false,
  "extractLicenses": true,
  "sourceMap": false,
  "namedChunks": false,
  "aot": true,
  "outputHashing": "all",
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "500kb",
      "maximumError": "1mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "2kb",
      "maximumError": "4kb"
    }
  ],
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
}

常用配置项含义说明：

• buildOptimizer：Angular专属构建优化开关，可移除未使用的装饰器等冗余代码，生产模式默认开启
• optimization：开启JS、CSS代码压缩、tree shaking功能，生产模式默认开启
• aot：提前编译Angular模板，无需在浏览器端运行时编译，大幅提升页面加载性能，生产模式默认开启
• sourceMap：是否生成源码映射文件，生产模式默认关闭以减小打包体积
• vendorChunk：是否将第三方依赖单独打包为独立chunk，生产模式默认关闭以减少HTTP请求数量
• extractLicenses：是否提取所有第三方依赖的许可证信息到单独文件，生产模式默认开启
• namedChunks：是否使用可读名称命名chunk文件，生产模式默认关闭，使用哈希命名避免版本更新后的缓存问题
• outputHashing：为资源文件名添加哈希后缀，解决版本更新后浏览器缓存旧资源的问题，生产模式默认值为all
• budgets：打包体积阈值配置，打包结果超过设定值时会抛出警告或阻断构建的错误
• fileReplacements：环境变量文件替换规则，构建生产版本时自动将开发环境配置替换为生产环境配置

不同Angular版本的默认配置可能存在细微差异，优先使用本地CLI查询到的配置为准。

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