CODEWITHSUNDEEP
webpack-5nrwl-nxwebpack-module-federation
webDev_434
webDev_434

Reputation: 31

Nx react application is not generating optimized bundle for production build

My microfrontend react application is created using Nx Tool. It has been created using Nrwl react executor and the present configuration is untouched & is the default configuration provided by Nx.

When I build the application in production mode, the bundle generated is not minimized & not performance optimized. In project.json, flags were set for optimized code, but they were not being honoured.

In project.json, if I replace the value of *targets > build > options > "webpackConfig"* from **custom webpack path** to **"@nrwl/react/plugins/webpack"**, it honors the optimization flags and works as expected, but it doesnt generate remoteEntry.js file which is required by the host app to render the micro frontend app.

I also tried customizing the webpack based on this [official documentation](https://nx.dev/recipes/other/customize-webpack#module-federation), but the code returns error

Changes in webpack i tried with:

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

/* ========1 Orginal Code snippet================= */
//Creates remoteEntry.js file, but not uglified code
 module.exports = withModuleFederation({
  ...moduleFederationConfig,
}); 

/* =======2 ================== */

//Returns error: NX customWebpack is not a function /* module.exports = {

  plugins: [
    new ModuleFederationPlugin({
      ...moduleFederationConfig,
    }),
  ],
}; */

Steps to replicate:

  1. Code exists here: https://stackblitz.com/edit/react-ts-azwv9t or get from GIT: https://github.com/kalingaCoder/react_MF

  2. Do npm install

  3. Do npm run build-cart

  4. check bundle output here: dist\apps\cart ( files should be minimized, but that is not happening)

Files to check:

apps\cart\project.json : *targets > build > configurations > production* apps\cart\webpack.config.js apps\host\module-federation.config.js

Upvotes: 0

Views: 818

Answers (1)

webDev_434
webDev_434

Reputation: 31

Issue is fixed now, Earlier I was using @nrwl version 14, after migrating to latest, the issue is resolved.

Ran the below command to upgrade nx migrate latest # same as nx migrate @nrwl/workspace@latest

Upvotes: 0

Related Questions