Microfrontends基于React / Component的分裂

Question

背景 我面临着使工具现代化并将其转换为具有反应前端的微服务的任务。我的想法是有一个包含例如一般内容的通用顶级组件。 Nav和包含该功能的每个微服务的组件。

的方法：

• 在本地捆绑组件，使其成为一个单一的前端，而forntend代码只在repo中分离。

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

• 通过在配置文件中定义每个组件的微型捆绑来延迟加载每个组件的缩小捆绑包

使用这种方法，我可以自己webpack每个组件，并从主页面异步导入它，但可能会有巨大的开销

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

问题： 是否有可能自行捆绑反应组件并从不同的资源URL导入它们？如何处理它？（或者React甚至适合它）

Answer 1

因此，经过大量搜索和实验，我找到了Zalando的Project Mosaic。它提供了一种出色的React组件拆分方式来支持Micro Frontends。但是请注意，它可能不适合较小的项目，因为需要花费一些时间来了解材料并设置所有必要的应用程序。

Answer 2

看看下面的链接：

https://www.martinfowler.com/articles/micro-frontends.html

我最近根据该文章创建了一个项目，我认为这可能是您正在寻找的。 我制作了包装器应用程序，该应用程序根据URL和路由在运行时动态呈现微前端。在上面的文章中，有一个演示应用程序演示了这个想法。 每个微前端都是具有自己的代码存储库的单独项目。 https://demo.microfrontends.com/

每个应用程序都已托管，并且js块正在运行时加载。这段代码可能会使它变得更清楚了。

componentDidMount() { const { name, host } = this.props; const scriptId = micro-frontend-script-$ {name}`;

if (document.getElementById(scriptId)) {
  this.renderMicroFrontend();
  return;
}

fetch(`${host}/asset-manifest.json`)
  .then(res => res.json())
  .then(manifest => {
    const script = document.createElement('script');
    script.id = scriptId;
    script.src = `${host}${manifest['main.js']}`;
    script.onload = this.renderMicroFrontend;
    document.head.appendChild(script);
  });

}`

希望您会发现这很有帮助:) 祝你好运！