Angular 10 生产环境构建时如何移除vendor.js中的注释？

你之前配置的removeComments属于TypeScript编译选项，仅作用于项目src目录下自有代码打包生成的main.js，而vendor.js是第三方依赖汇总打包的产物，走的是webpack的压缩流程，不受ts配置管控。绝大多数情况下vendor里的大体积注释都是各类依赖自带的License保留注释，Angular默认压缩规则会保留这类注释不做删除。

方法1：调整angular.json原生配置（优先尝试，无需修改构建逻辑） #

打开项目根目录的angular.json，定位到projects.<你的项目名>.architect.build.configurations.production节点，确认以下配置项：

{
  "optimization": true,
  "buildOptimizer": true,
  "sourceMap": false,
  "extractLicenses": true
}

• extractLicenses设为true后，构建工具会把所有依赖的License注释从js文件中抽离，单独生成LICENSE.txt放在dist目录，既合规又能大幅减小vendor.js体积
• 配置修改完成后删除原dist目录和node_modules/.cache缓存目录，重新执行ng build --prod验证效果

方法2：自定义webpack压缩规则（原生配置不生效时使用） #

如果需要完全删除vendor.js里的所有注释（包括License类保留注释），可以通过自定义webpack的terser压缩规则实现：

1. 安装对应版本的依赖（注意大版本要和Angular 10匹配）：
   npm install @angular-builders/custom-webpack@10 terser-webpack-plugin --save-dev
2. 再次修改angular.json的production构建配置：
   将builder值从默认的@angular-devkit/build-angular:browser改为@angular-builders/custom-webpack:browser，同时新增customWebpackConfig节点：

"configurations": {
  "production": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 保留其他原有配置不变
    }
  }
}

3. 项目根目录新建custom-webpack.config.js，内容如下：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false, // 删除所有类型的注释
          },
        },
        extractComments: false, // 禁止单独抽离注释
      }),
    ],
  },
};

4. 清空缓存后重新执行生产构建即可。

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