基于微前端 React/Component 的拆分

Question

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

方法：

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

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

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

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

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

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

Answer 1

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

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);
  });

}`

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