reactjs - 微前端基于 React/Component 的拆分

Question

背景: 我面临着对工具进行现代化改造并将其转换为具有反应前端的微服务的任务。我的想法是拥有一个通用的顶级组件，其中包含例如导航和包含该功能的每个微服务的组件。

方法:

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

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

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

通过这种方法，我可以单独对每个组件进行 webpack，然后从主页异步导入它，但可能会产生巨大的开销

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

问题: 是否可以单独捆绑 React 组件并从不同的 Resource-URL 导入它们，以及如何实现这一点？(或者 React 是否适合这样做)

Answer 1

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