基于微前端 React/Component 的拆分

Question

背景： 我面临着使工具现代化并将其转换为具有 React 前端的微服务的任务。我的想法是有一个通用的顶级组件，例如包含导航和包含功能的每个微服务的组件。

方法：

• 在本地捆绑组件，使其有效地成为一个整体前端，并且前端代码仅在 repo 中分离。

我认为这将放弃不必为每次更改重新部署整个应用程序的优势

• 通过在配置文件中定义它们，从微服务中延迟加载每个组件的缩小包

使用这种方法，我可以单独对每个组件进行 webpack，然后从 Main Page 异步导入它，但可能会有巨大的开销

我阅读了基于组件的拆分与 react-loadable 和捆绑 react-router 或 webpack，但我找不到有关如何从不同的 URL 端点加载小包的信息。

问题： 是否可以自己捆绑 React 组件并从不同的 Resource-URL 导入它们，一种方法将如何？（或者 React 甚至适合那个）

Answer 1

因此，经过相当多的搜索和实验，我找到了Zalando 的Project Mosaic，这就是我想要的。它提供了一种很好的 React 组件拆分方式来支持微前端。但请注意，它可能不适合较小的项目，因为需要一些时间来了解材料并设置所有必要的应用程序。