你需要了解的几种微前端解决方案

本文将介绍业内各大知名IT公司采用的微前端解决方案，以及它们带来的优缺点。由于这些缺点，我们的团队探索了一套目前认为最好的微前端解决方案。通过本文，您可以快速帮助您梳理微前端解决方案的优缺点，从而做出更好、更明智的选择，让您的团队受益。1、写在上一篇文章中，我们深入分析了什么是微前端，它能带来什么好处。现在让我们回顾一下微前端的概念：构建现代Web应用程序的技术、策略和秘诀，多个团队可以独立发布功能。中文解读：可以由多个团队开发独立开发的现代Web应用的技术、策略和场景。本文在此基础上对现有的微前端方案进行了对比和总结。废话不多说，开始今天的话题吧。2.现有的微前端解决方案在查找了大量资料后，我总结了以下几种能够真正实现微前端概念的主流解决方案。如有遗漏，欢迎小伙伴们补充~1.众所周知，iframe是由html标签提供的，可以加载其他网络应用的内容，它兼容所有的浏览器，所以你可以用它来加载任何你想加载的网络应用。iframe最大的特点就是提供了浏览器原生的硬隔离方案，可以完美解决样式隔离、js隔离等问题。看完这里，相信小伙伴们和我一样，都觉得iframe非常符合微前端概念中提到的独立开发、独立维护、相互隔离。有一种想法，你可以去ifame，然后你就完成了。但为什么会这样到现在为止，它还不是微前端的主要实现方式。后来有幸在乾坤科技圆桌上看到一篇关于微前端WhyNotIframe的文章。总结的很好。现在我将重复其中一个描述。所有的事情都要做，但它最大的问题是它的隔离性无法被打破，导致应用之间无法共享上下文，从而带来开发体验和产品体验上的问题。以下是我对文章总结部分的总结：不是单页应用，会导致浏览器刷新iframeurl状态丢失，后退前进按钮无法使用。弹出框的功能不能应用于整个大型应用，只能在相应的窗口中显示。由于应用可能不在同一个域，所以必须将主应用的cookie透传给不同根域名的子应用，以达到免登录的效果。每次子应用进入，都是一个重建浏览器上下文和重新加载资源的过程，占用资源多，资源消耗大。iframe的特性使得搜索引擎无法获取其中的内容，从而无法实现应用的seo。我猜想，以上原因是iframe不能作为官方微前端解决方案的原因。2.WebComponents可能很多朋友对WebComponents不是很了解。它是谷歌推出的浏览器的原生组件。MDN对WebComponents的定义如下：作为开发人员，我们都知道尽可能多地重用代码是一个好主意。对于自定义标记结构，这通常不是那么容易-想想复杂的HTML（以及相关的样式和脚本），有时您必须编写代码来呈现自定义UI控件，如果您不小心，使用它们可能会把您弄得一团糟页。WebComponents旨在解决这些问题——它由三种主要技术组成，它们可以一起使用来创建自定义元素，这些元素封装了功能，并且可以在您喜欢的任何地方重复使用，而不必担心代码冲突。它的三个主要技术是指：自定义元素（customelements）：一组JavaScriptAPI，允许您定义自定义元素及其行为，然后可以在您的用户界面中按需要使用。ShadowDOM：一组JavaScriptAPI，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制它们的相关功能。这样，您可以将元素的功能保密，这样就可以编写脚本和设置样式，而不必担心与文档的其余部分发生冲突。HTML模板：