0

Please find below the webpack.config.js for host/container

plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        subA: "sub_a@http://localhost:8081/remoteEntry.js",
        subB: "sub_b@http://localhost:8082/remoteEntry.js",
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],

As shown above, I've defined subA & subB to be remote dependencies and I would expect once host being loaded, http://localhost:8081/remoteEntry.js & http://localhost:8082/remoteEntry.js both being fetched but this is not the case

enter image description here

Observation

My guess is, the above could be due to at host level, I did not import source code from subA and hence Webpack is smart enough not to fetch remoteEntry.js, and if I import source code from subA, it works fine, I can see http://localhost:8081/remoteEntry.js being fetched.

However, I don't believe my guess was correct.

On host level, I've import source code from subA, and I did not import source code from subB, however http://localhost:8082/remoteEntry.js will be fetched as well enter image description here

The image above showing that both remoteEntry.js from subA and subB are being fetched by host, despite I did not import any source code from subB, the behaviour looks to me like Webpack either avoid the entire remotes plugin at host level, or if any of the remote dependencies being needed, remoteEntry.js will be fetched altogether?

I'm actually expecting host application will actually fetch all remoteEntry.js that are being defined at remotes, despite whether the source code is being used or not

Isaac
  • 12,042
  • 16
  • 52
  • 116

1 Answers1

0

You are correct when you say that it will load all js event if it doesn't use it. To improve on that you need lazy loading.

I had the same issue and i used different names for remoteEntry.js for example saremoteEntry.js,sbremoteEntry.js and it worked for me

Iordanis Makaratzis
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 20 '22 at 10:22