我们有几个Web应用程序，我们希望在一个单页面应用程序下呈现 . 我们正在寻找一个可以使用的微前端架构/框架 . 正如我们所看到的，这些是我们实施的选择：
-
使用单一spa开源框架：https://github.com/CanopyTax/single-spa
-
使用Iframes（友好的Iframes）托管应用程序（shell）并根据当前url加载每个应用程序 .
-
编写我们自己的Javascript框架
-
其他？
当前状态是monolith FE应用程序，它将其他子应用程序作为内部第三方程序包使用 . 这种方法对我们来说是不可扩展的，因为托管应用程序正在一起构建所有产品，并没有真正分离 .
我们的要求是微前端的通常要求：1 . 独立开发 - 每个团队都可以选择自己的框架并构建他们的产品，而不管其他产品 .
-
独立部署 - 每个应用程序都可以在 生产环境 中升级，无需停机，也不会干扰其他应用程序 .
-
共享组件 - 我们在我们的应用程序中使用Angular4，并且我们已经编写了一个专有的第三方库（共享组件和逻辑），应该在所有产品之间共享，以获得相似的外观 .
-
我们希望能够升级每个应用程序的框架（Angular，RXjs，Typescript等以及我们的专有组件库），而无需关心其他应用程序 .
我们尝试使用单一spa框架，但我们遇到了一些问题，如果这对我们来说是正确的方法，或者我们应该尝试不同的方法，我们现在可以自己思考 .
我们使用单一水疗中心的问题是：1 . 资产加载是有问题的 . （我们必须将资产文件放在托管应用程序的根文件夹中，并且切换到另一个应用程序时会遇到资产冲突） . 2.我们仍然不知道如何处理所有应用程序的全局样式（我们使用sass进行样式化，并且必须与每个应用程序的本地样式一起使用）3 . 升级角度框架（或所有其他框架）是不可能的对于一个应用程序，它是全部或全部（因为我们有一个角度的实例） . 4.我们必须在托管应用程序（shell）的另一侧实现不同的捆绑开发 .
当我们考虑Iframe（使用友好的Iframe）解决方案时，我们可视化所有子应用程序之间的完全分离，并倾向于认为这对我们来说是更合适的方法 .
使用Iframe有任何陷阱吗？
谢谢，丹尼尔
5 回答
我想将2¢添加到前端微服务可能的架构解决方案的主题中：
OpenTable使用的OpenComponents - https://github.com/opentable/oc
马赛克由Zalando - https://www.mosaic9.org/
希望你发现它们很有用 .
由于你的问题有点广泛，我只会解决你对iframe使用的疑问，因为在没有了解情况（目标群体？，移动？？什么是KPI？（性能，初始负载，开发成本，可重用性，...）
iframe对"total"隔离（代码样式）很有帮助，没有其他方法可以解决这个问题，但是正因如此，它们有一些缺点：
在iframe之间共享数据需要在外部和内部SPA中进行编排，这涉及设置其他安全措施（因为每个SPA都被暴露）
由外部SPA设计内部SPA，只有当它们位于同一个域并需要额外的JS代码时才能工作
如果内部SPA与外部SPA位于同一域中，则
共享cookie仅起作用
性能方面，每个Iframe需要自己加载所有内容;重新使用资产，图书馆等非常困难，并涉及干预每个SPA的工具 .
通常情况下，如果您拥有一切真正的微前端方法，那么您可以控制所有内容，这是比Iframe更好的解决方案 .
你可以试试PuzzleJs . 它旨在成为网关和店面的微前端架构的框架解决方案 . 它被用于 生产环境 我们的高流量电子商务网站 . 你应该检查一下 .
它实际上涵盖了几乎所有的要求 .
独立部署
独立源代码
独立技术
而且在iframe解决方案中，可能很难管理诸如CORS之类的东西以及与其他iframe的通信 .
但微前端解决方案仍然不完善 . 当你真正深入了解它时，有很多复杂的问题 .
某些资产会尝试在全局范围内声明相同的变量，有时它们会有不同的版本会导致错误 . 因此，团队不会彼此完全独立 .
记录和监控变得非常困难 . 像New Relic这样的工具会对你有帮助，但这还不够 . 您应该实现自定义监视和错误报告工具 .
保持应用程序停靠和自动扩展友好非常重要 . 有了这个架构，如果你有4个网关和一个店面，它可能会很棘手 .
实现微前端架构的初始成本非常高 . 您应该仔细考虑您的时间和开发人员资源
性能是最重要的 . 您不希望多次下载react或其他库，因为多个团队正在使用它们 . 您应该实现DllPluginn以删除重复的代码 . 它会让一切变得更难 .
还有很多其他问题我都记不起来了 . 如果您没有超过50名开发人员在同一店面项目上工作，那么微前端就是一个过度杀伤的决定 .
我们目前使用单一spa框架完成同样的工作 . 我们得出了与你相同的结论 . 对我们来说，一个主要问题是儿童应用程序的翻译，因为至少我们无法找到将它们捆绑到子应用程序的方法 . 风格等其他资产也是一个问题 .
我的建议是等待angular elements，因为该框架并非设计用于微前端风格 .
您可以从每个应用程序中公开Web组件，并在主SPA中聚合/使用它们 . 所有浏览器都支持Web组件，所有领先的SAP farmeworks（如angular，ember，react，vue）都支持webcomponent . 这样，您就不会绑定到任何特定的SPA框架，并且可以在任何地方重新生成组件 .