5

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

方法：

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

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

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

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

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

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

4

2 回答 2

1

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

于 2018-10-10T09:25:40.863 回答
0

看看下面的链接：

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

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

每个应用程序都是托管的，并且 js 块正在运行时加载。这段代码可能会让那里发生的事情更清楚一点。

componentDidMount() { const { name, host } = this.props; const scriptId =微前端脚本-${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);
  });

}`

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

于 2020-02-16T10:28:24.007 回答