基于微前端 React/Component 的拆分

Posted 2023-02-21

【中文标题】基于微前端 React/Component 的拆分

【英文标题】：Microfrontends React/Component based splitting

【发布时间】：2018-05-07 03:57:31

【问题描述】：

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

方法：

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

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

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

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

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

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

【问题讨论】：

在我看来这是一个复杂的方法。也许您可以使用react-router 动态路由在进行服务器端渲染时停止加载所有模块，并在单独的 git 存储库中创建组件，您可以在 package.json 中链接一些 Git URL 作为依赖项。您还可以查看 lerna 以在一个 repo 中定义多个组件。最后，我认为在微服务中公开前端是一种反模式。微服务应该尽可能地愚蠢（当然不知道客户端前端）。

lerna 看起来很酷。我一定会检查出来的。我认为像这样拆分它们是有意义的，这样每个微服务都是自包含的，但如果它太复杂，我会坚持预先捆绑它们的方法

【参考方案1】：

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

【参考方案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);
  );

`

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

【讨论】：

您是否有示例您已链接的 martin fowler/cam jackson 示例如何与微前端范围的代码拆分一起使用，例如每个微前端有多个块？哪些块必须预先加载？延迟加载额外的块是否仍然有效？

@Codepunkt，您是否有机会找到问题的答案？目前我正在寻找配置反应以将所有内容编译成单个 js 文件。看起来这就是他们在演示中所做的。

@Codepunkt 我用这个作为临时解决方案：npmjs.com/package/react-app-rewire-disable-chunks

我对 React-app-rewired 做了同样的事情