javascript - WP5 模块联盟 : Singleton instantiated multiple times

标签 javascript webpack webpack-5 webpack-module-federation

不幸的是,我对此的复制是在一个复杂的专有项目中,所以我会尽力解释发生了什么。
与我的用例最接近的示例项目是: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' }
  },
}),
Remote 在他们的配置中也将其共享,但并不急切:
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 都有单一的入口点。

最佳答案

对于您的 Remote webpack Module Federation 配置,请尝试删除单例选项(在两个配置中都设置它可能是问题,您只希望一个应用程序初始化单例)和急切选项(我认为默认情况下它是错误的,这个选项告诉在检查共享依赖项之前加载依赖项,因此您主要在容器应用程序上使用它)。这就是我在我的配置(多个 Remote )上所做的,它似乎运行良好:

new ModuleFederationPlugin({
  name: 'remoteNameHere',
  filename: 'remoteDefinition.js',
  exposes: {
    './app': path.join(modulePath, 'app.js'),
  },
  shared: {
      'my-shared-lib': { requiredVersion: '^1.0.0' }
  },
})
PS(我们永远不知道):在使用模块联合时,您可能会遇到树状库的问题,当将它们置于共享状态时,它会下载整个库。

关于javascript - WP5 模块联盟 : Singleton instantiated multiple times,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65467233/

相关文章:

Webpack加载程序订购: what are webpack pre and post loaders and how they differ from a chain of loaders

reactjs - 错误 : Prevent writing to file that only differs in casing or query string from already written file. reactjs laravel

javascript - MVC - 模糊事件的远程验证

javascript - AngularJS 和多个 $http 查询的逻辑问题

javascript - Webpack 生产版本的网站指向错误的目录

webpack-dev-server - Webpack 5 : why MiniCssExtractPlugin. 加载程序不允许 HMR 工作?

deprecation-warning - 解决 Webpack 5.9.0 弃用调用 [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] 和 [DEP_WEBPACK_CHUNK_MODULES_ITERABLE]

javascript - 在现有文档中插入数组

javascript - 如何删除或替换 SVG 内容?

javascript - 如何在 IE11 中使用 native 代码进行 polyfill?