Micro-Frontends、Web组件和共享库

Question

因此，我正在致力于将我公司的应用程序迁移到微前端方法。我们遵循https://micro-frontends.org/中描述的标准。虽然在幕后一切都在使用React，但我们正在用Web组件包装东西，这样我们将来就可以自由和灵活地成为框架不可知的人。我们已经建立并运行了一个工作架构，到目前为止，它工作得很好。我们甚至在Web组件规范之上创建了一个奇特的兼容层，它允许我们向Web组件传递类似React的道具，包括对象、数组甚至函数。这使得它们之间可以进行更好的交互。

我们现在主要关心的是库的重复。我们是一个React商店，所以即使我们有这种框架不可知的方法，一切都在使用React。虽然这种新方法让我们能够将应用程序的各个部分分别升级到较新的React版本(最终)，但我们仍然不喜欢React库有这么多重复的想法。

客观地说，即使是Gzipped，React/ReactDOM也超过了40kb。单独来说，这是非常小的，但随着规模的扩大，它开始占用越来越多的带宽。就RAM而言，这不是什么大问题，这些库的大小约为130kb，考虑到现在大多数设备的RAM容量，这并不是什么大问题。

但是，当然，我们希望事情尽可能地优化和简化。因此，我希望有人能建议一种方法，让微前端应用程序(包装在Web组件中的应用程序)可以从父应用程序中获取React和其他库。

您应该知道，父应用程序JavaScript是在微前端之前加载的。每个微前端都是通过<script>标签加载的。最后，我们目前没有使用Shadow DOM，这是我们为了将现有代码迁移到新的微前端架构中而做出的权衡。

Answer 1

的核心思想是告诉模块捆绑器如何打包你的微前端。

假设您正在使用Webpack来捆绑您的应用程序，下面是您需要做的两件事。

步骤1：

将React声明为外部依赖项，就像在Webpack config中一样

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
},

第2步：

在加载父应用程序的JS之前，请确保您正在从CDN或其他等效位置加载React和ReactDOM：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

将这些脚本放入负责引导整个index.html的主SPA中。

解释

当您将某个包/库声明为外部包/库时，Webpack不会将其包含在包中。它假设外部环境将使该特定版本作为全局变量可用。对于React，它使用React和ReactDOM作为全局变量。

这样做并通过CDN将其包含在内，您将只剩下React和ReactDOM的一个副本。当用户第一次访问应用程序时，它将变慢，但一旦缓存，应该不会成为问题

此外，您还可以扩展这个想法，并将它们声明为父应用程序或父外壳容器的外部。

Answer 2

可能的解决方案是使用Import Map准备库，但由于它不支持IE11+，我建议您使用SystemJS？

https://github.com/systemjs/systemjs

尤其是这个看起来和你的情况很接近：

https://github.com/systemjs/systemjs-examples/tree/master/loading-code/react-hello-world

在html中，你需要：

  <script type="systemjs-importmap">
    {
      "imports": {
        "react": "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

然后你可以导入ReactJS，因为浏览器知道从哪里获取它。

有可能构建某种类型的库来查看微前端(MFE)的package.json，以了解需要使用哪个库，并动态创建与上面示例类似的imports对象。

我们需要记住，有必要覆盖版本检查。提到的库可能会潜在地存储某种类型的映射，该映射将依赖项与版本以及它可访问的位置联系起来。想象一下，在上述情况下，我们需要在每个MFE :)上处理不同的react版本。

然后，当加载另一个MFE库可以检查所需的依赖项是否已经包含时，如果缺少一些，则下载它，否则使用已经获取的依赖项。

困难的部分将覆盖版本检查，因此最可能需要另一个抽象层来处理它。

https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/