Nrwl NX monorepo中Node.js应用生产构建如何移除注释并压缩代码

前置说明 #

你提到的UglifyJSPlugin已经停止维护，不支持ES6+语法，当前Node.js项目通用的压缩方案是terser-webpack-plugin，以下两种方案都可以实现你的需求。

方案1：使用NX内置配置（无需自定义webpack，优先推荐） #

NX官方的@nrwl/node:build构建执行器默认已经内置了压缩和注释移除能力，无需额外安装依赖，只需要修改对应应用的project.json配置即可：

1. 打开你Node.js应用目录下的project.json文件
2. 找到targets.build.configurations.production配置块，添加/修改如下参数：

{
  "targets": {
    "build": {
      "executor": "@nrwl/node:build",
      "options": {
        // 其他原有配置保持不变
      },
      "configurations": {
        "production": {
          "optimization": true,
          "removeComments": true,
          // 其他原有生产配置保持不变
        }
      }
    }
  }
}

3. 执行生产构建命令nx build 你的应用名称 --configuration=production即可得到无注释、压缩后的构建产物。

方案2：自定义webpack配置（需要更精细的压缩规则时使用） #

如果你需要对压缩逻辑做自定义配置，可以通过NX的自定义webpack能力实现：

步骤1：安装依赖 #

执行以下命令安装所需依赖：

npm install terser-webpack-plugin webpack-merge --save-dev

步骤2：新增自定义webpack配置 #

在Node.js应用的根目录（和project.json同目录）新建webpack.config.js文件，写入以下内容：

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

module.exports = (config, context) => {
  return merge(config, {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: true,
            format: {
              comments: false, // 移除所有注释
            },
          },
          extractComments: false, // 不把注释提取到单独的LICENSE文件
        }),
      ],
    },
  });
};

步骤3：关联自定义webpack配置 #

修改应用project.json中targets.build.options配置，添加webpack配置路径：

{
  "targets": {
    "build": {
      "executor": "@nrwl/node:build",
      "options": {
        // 其他原有配置保持不变
        "webpackConfig": "apps/替换为你的应用目录名/webpack.config.js"
      }
    }
  }
}

步骤4：执行构建 #

运行生产构建命令即可得到符合要求的产物：

nx build 你的应用名称 --configuration=production

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