WP5 Module Federation：单例实例化多次

Posted 2023-02-16

【中文标题】WP5 Module Federation：单例实例化多次

【英文标题】：WP5 Module Federation: Singleton instantiated multiple times

【发布时间】：2021-04-04 14:41:36

【问题描述】：

不幸的是，我对此的复制是在一个复杂的专有项目中，所以我会尽力解释发生了什么。

与我的用例最接近的示例项目是这个：https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host 本质上，我有一个全方位的设置，其中单个 Shell 应用程序使用一组远程应用程序。远程应用程序是在运行时发现的，因此不在 Webpack 配置中指定。

Shell 以及所有 Remote 都依赖于共享库 my-shared-lib：

"dependencies": 
    "my-shared-lib": "^1.0.0"

Shell 在其 Webpack 配置中将此库公开为一个渴望的单例：

new ModuleFederationPlugin(
  name: 'shell',
  filename: 'shellDefinition.js',
  shared: 
      'my-shared-lib':  singleton: true, eager: true, requiredVersion: '^1.0.0' 
  ,
),

遥控器在其配置中也将其共享，但并不急切：

new ModuleFederationPlugin(
  name: 'remoteNameHere',
  filename: 'remoteDefinition.js',
  exposes: 
    './app': path.join(modulePath, 'app.js'),
  ,
  shared: 
      'my-shared-lib':  singleton: true, eager: false, requiredVersion: '^1.0.0' 
  ,
)

问题是这样的：我已经通过运行时调试和检查 Webpack 生成的包验证了这个库被包含并实例化了几次——一次用于 shell，一次用于每个远程。 lib 的代码甚至存在于 Webpack 在获取暴露的 ./app.js 时加载的 Remote 的捆绑包中。

我不知道这里发生了什么。我也尝试共享 my-shared-lib 的每一个依赖项，但这无济于事。

我的期望是 Remotes 使用由 Shell 共享的 my-shared-lib 实例，而不是创建自己的实例。

我是否完全误解了依赖共享的工作原理，还是我做错了什么？

需要注意的是，Shell 和 Remots 都有单一的入口点。

【问题讨论】：

每个遥控器都包含/实例化是什么意思？您是否从多个 url 加载多个块？

【参考方案1】：

对于您的远程 webpack 模块联合配置，请尝试删除单例选项（在两个配置中都设置它可能是问题，您只希望一个应用程序初始化单例）和急切选项（我认为默认情况下它是 false，这个选项告诉在检查共享依赖项之前加载依赖项，因此您主要在容器应用程序上使用它）。这就是我在我的配置（多个遥控器）上所做的，它似乎运行良好：

new ModuleFederationPlugin(
  name: 'remoteNameHere',
  filename: 'remoteDefinition.js',
  exposes: 
    './app': path.join(modulePath, 'app.js'),
  ,
  shared: 
      'my-shared-lib':  requiredVersion: '^1.0.0' 
  ,
)

PS（我们永远不知道）：在使用模块联合时，您可能会遇到树形库的问题，当将它们置于共享状态时，它会下载整个库。