How can I tell where a shared module is loaded from when using module federation?

Question

Let's say I have five microfrontends, each of which has

    new ModuleFederationPlugin({
      shared: [{
        "foo": {
          singleton: true,
          eager: true,
          shareKey: "foo",
          import: "foo",
          shareScope: "default",
        }
      ]
    })

in their webpack config.

My understanding is that the browser will obtain "foo" from one of the microfrontends, and then all other microfrontends that request "foo" will just get the one that was already downloaded.

In the browser, is there any way of telling which microfrontend's copy of "foo" is being used?

Answer 1

You can check this from the Devtools > Sources. e.g. StackBlize Sample.

Both app1 and app2 are using React, and they share it as Singleton, and as you can see from the screenshot, it was served by app2.