Nx React微前端生产构建未生成优化包问题求助

问题背景 #

用Nx工具搭建了React微前端应用，采用Nrwl React执行器，当前为Nx默认配置。生产模式构建时生成的包未压缩、未做性能优化，project.json中设置的优化标识完全未生效。

若将project.json里targets>build>options>webpackConfig的值从自定义webpack路径改为@nrwl/react/plugins/webpack，优化标识会生效，但宿主应用渲染微前端必需的remoteEntry.js文件不会生成。

尝试按照Nx官方文档自定义webpack配置，代码报错，以下是两种尝试过的配置：

尝试过的Webpack配置 #

配置1：生成remoteEntry但代码未压缩 #

const withModuleFederation = require('@nrwl/react/module-federation');
const moduleFederationConfig = require('./module-federation.config');

// 生成remoteEntry.js文件，但代码未压缩
module.exports = withModuleFederation({
  ...moduleFederationConfig,
}); 

配置2：报错「NX customWebpack is not a function」 #

const moduleFederationConfig = require('./module-federation.config');
const { ModuleFederationPlugin } = require("webpack").container;

// 报错：NX customWebpack is not a function
/* module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      ...moduleFederationConfig,
    }),
  ],
}; */

复现步骤 #

• 拉取代码后执行npm install
• 运行npm run build-cart
• 查看dist\apps\cart下的包文件（预期已压缩，实际未压缩）

需要检查的文件 #

• apps\cart\project.json：targets>build>configurations>production节点
• apps\cart\webpack.config.js
• apps\host\module-federation.config.js

解决方案 #

1. 修复自定义Webpack配置，同时启用优化与Module Federation #

在自定义webpack配置中，需基于Nx的React Webpack配置扩展，而非直接覆盖。修改apps\cart\webpack.config.js如下：

const { composePlugins, withNx } = require('@nrwl/webpack');
const withReact = require('@nrwl/react/plugins/webpack');
const withModuleFederation = require('@nrwl/react/module-federation');
const moduleFederationConfig = require('./module-federation.config');

module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(moduleFederationConfig),
  (config) => {
    // 确保生产环境下启用压缩
    if (config.mode === 'production') {
      config.optimization = {
        ...config.optimization,
        minimize: true,
        minimizer: [
          // 保留Nx默认的Terser插件，也可自定义添加其他压缩插件
          ...(config.optimization?.minimizer || []),
        ],
      };
    }
    return config;
  }
);

2. 确认project.json中的生产配置 #

检查apps\cart\project.json的production配置，确保优化相关标识正确设置：

{
  "targets": {
    "build": {
      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractLicenses": true,
          "vendorChunk": false
        }
      }
    }
  }
}

3. 验证构建结果 #

重新执行npm run build-cart，此时dist\apps\cart下的包会被压缩，同时remoteEntry.js文件正常生成。

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