使用模块联合时，如何判断共享模块的加载位置？答案

【问题标题】：How can I tell where a shared module is loaded from when using module federation?使用模块联合时，如何判断共享模块的加载位置？
【发布时间】：2022-11-04 15:43:39
【问题描述】：

假设我有五个微前端，每个微前端都有

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

在他们的 webpack 配置中。

我的理解是浏览器将从其中一个微前端获取“foo”，然后所有其他请求“foo”的微前端将只获取已经下载的那个。

在浏览器中，有什么方法可以告诉正在使用哪些“食物”的微前端副本？

【问题讨论】：

标签： javascript webpack webpack-module-federation

【解决方案1】：

您可以从 Devtools > Sources 中检查这一点。例如StackBlize Sample。

app1 和 app2 都在使用React，它们以 Singleton 的形式共享它，从屏幕截图中可以看出，它是由 app2 提供的。

【讨论】：