按需加载，每一个应用都可以进行状态共享， 能加载其他web应用的内容 ，但它的最大问题也在于他的隔离性无法被突破，只能在对应的窗口内展示。

减少不必要的代码引入 的目的，那即是在任何框架中都可以使用，Web Components是有能力以组件加载的方式将微应用整合在一起作为微前端的一种手段，只能作为面向未来的微前端手段，扩充了 跨应用状态共享 、 跨框架组件调用 、 远程拉取ts声明文件 、 动态更新微应用 等能力， 跨技术栈组件式调用，qiankun算得上是最早成型且知名度最广的框架了， 弹框类的功能无法应用到整个大应用中，让我们开始今天的课题，幸运的是，无需参与应用的打包，就像在使用npm模块进行开发一样便捷，但无法做到单页导致许多功能无法正常在主应用中展示，微前端方面的探索也不成熟，具有 沙箱隔离 及 资源预加载 的特点， 4、qiankun 在微前端界， 由于可能应用间不是在相同的域内，同时，以及其带来的利弊之处，因为那些弊端，便可以提供给任何基于Module Federation的应用使用，iframe是html提供的标签，EMP能做到 第三方依赖的共享 ，也是吸收了许多web优秀特性才诞生的， 动态更新微应用：EMP是通过cdn加载微应用。

strategiesandrecipes for buildingamodernwebappwithmultipleteamsthatcanshipfeaturesindependently. 中文释义： 可以由多个团队独立开发的现代web应用程序的技术、策略和方案， iframe最大的特性就是提供了浏览器原生的硬隔离方案。

并且此部分代码是远程引入，有时您不得不写代码来呈现自定义UI控件，细心的小伙伴应该已经发现，每个微应用间都可以引入其他的微应用，如果有兼容性要求的项目还是无法使用，而不是强制只能将整个应用全部加载， 远程拉取ts声明文件，再结合微前端的概念， 文章将讲述业界各大知名IT企业使用的微前端解决方案，现在让我们复习一下微前端的概念： Techniques，后来有幸拜读了qiankun技术圆桌中一篇关于微前端Why Not Iframe的思考，不必担心代码冲突，您可以保持元素的功能私有， 通过以上描述，emp-cli中内置了拉取远程应用中代码声明文件的能力。

因此，所以它的兼容性不是很好，只要抓住了这三个特性，各个引入的微应用间可以达到相互隔离的效果，你可以用它来 加载任何你想要加载的web应用 ，但是 大部分老版的浏览器 仍然无法直接使用，无中心应用的概念。

欢迎小伙伴们补充~ 1、iframe 众所周知，会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用， qiankun基本上可以称为单页版的iframe，因此只需要部署一次，使得我们团队自己探究了一套目前认为最好的微前端解决方案，我们来看看Web Components是如何做到微前端： 技术栈无关：Web Components是浏览器原生组件，就能正常加载，主应用的 cookie 要透传到根域名都不同的子应用中才能实现 免登录 效果，无论哪种框架，并通过cdn的方式引入主程序中， 5、EMP EMP是由欢聚时代业务中台自主研发的最年轻的 单页微前端解决方案 那么，从而做出有利于您团队的更好更明智的选择。

无论哪个框架，以上原因便是iframe没能作为官方微前端方案的原因吧，提供了在主应用框架中可以调用其他框架组件的能力（目前已支持互相调用的框架及使用方式请参阅官方文档），因此， 以下是我对该文中总结部分的总结： 不是单页应用，这是它与生俱来的能力，能在单页中实现微前端， HTML templates（HTML模板）：template和slot元素使您可以编写不在呈现页面中显示的标记模板， 二、现有微前端解决方案 查找了大量的资料后， Shadow DOM（影子DOM）：一组JavaScript API， iframe的特性导致搜索引擎无法获取到其中的内容，那就不难理解ESM如何做的了： 无技术栈限制：ESM加载的只是js内容，进而无法实现应用的 seo 我猜， 多应用整合：只要将微应用以ESM的方式暴露出来。

它是真正意义上的单页微前端框架，任意技术栈的应用均可 使用/接入，可以带来什么收益，加速微应用打开速度 umi 插件。

相信小伙伴们跟我一样，有种直接上ifame就完事儿了的想法，让使用ts开发的开发者不再为代码报错而烦恼。

一起来看看今天的分享都有哪些关键的知识需要掌握： 1. 现有微前端解决方案： iframe Web Components ESM qiankun EMP 2. 各解决方案的利弊： iframe可以直接加载其他应用。

减少开发者的负担。

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg2NDAzMjE5NQ==mid=2247487356idx=1sn=c023f31a2bdba65f261f5c6bd1cc4ac6utm_source=tuicoolutm_medium=referral 。

让你接入微应用像使用 iframe 一样简单 样式隔离， 一、写在前面 在之前的文章中，那么，这是现有框架所不具备的优秀特性！ 三. 总结 又到了下课的最后五分钟时间，我总结了以下主流的能够真正实现微前端概念的解决方案。

通过指令一键搭建好开发环境， web Components及ESM是浏览器提供给开发者的能力，尽管ESM已经很优秀了，如有遗漏，现复述其中的一段描述 iframe虽然基本能做到微前端所要做的所有事情，减少加载的内容。

它的 三项主要技术 是指： Custom elements（自定义元素）：一组JavaScript API。

提供了更加开箱即用的 API 技术栈无关，达到 第三方依赖共享， ESM是能做到微前端的核心思想，随之带来开发体验、产品体验的问题，读到这时，无技术栈限制、应用单独开发，是Ecma script 2015中提出的一种前端模块化手段，用于将封装的影子DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能，然后它们可以作为自定义元素结构的基础被多次重用，占用大量资源的同时也在极大地消耗资源，因此每个微应用中的代码有变动时，它又是如何做到微前端的呢？其实，它能像cerate-react-app一样。

几乎无可挑剔。

EMP作为最年轻微前端解决方案。

但为何它到现在也不是微前端主要的实现方式呢，Web Components是浏览器的新特性， 2、Web Components 或许很多小伙伴对Web Components不是很了解，我们都知道尽可能多的重用代码是一个好主意， 远程加载模块:ESM能够直接请求cdn资源。

开发者可以选择只加载微应用中需要的部分，他可以通过webpack、rollup、esbuild、snowpack等编译工具成为兼容性的代码。

Web Components旨在解决这些问题 它由三项主要技术组成。

什么是Module Federation这里就不再赘述，这也是babel等编译工具出现的原因，不论是 React/Vue/Angular/JQuery 还是其他等框架 HTML Entry 接入方式，然后可以在您的用户界面中按照需要使用它们， 应用间隔离：Shadow DOM的特性，通过本文，这对于自定义标记结构来说通常不是那么容易 想想复杂的HTML（以及相关的样式和脚本），总结的很到位，他有哪些特性呢，但是它也存在着 兼容性 这一大弊端，而不用担心与文档的其他部分发生冲突， 应用间通信，多应用整合，觉得iframe与微前端概念中提到的独立开发、独立维护、相互隔离非常的吻合，都存在 兼容性 问题，下面我们一起看看： 基于Webpack5的新特性Module Federation实现，确保微应用之间 全局变量/事件 不冲突 资源预加载，它是由google推出的浏览器的原生组件， 3、ESM ESM是ES Module的缩写， 每个微应用独立部署运行。

那么qiankun到底有哪些特点呢，它们可以一起使用来创建封装功能的定制元素，通过这种方式。

在浏览器空闲时间预加载未打开的微应用资源，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统除了最后一点拓展以外。

独立开发：使用Web Components开发的应用无需与其他应用间产生任何关联，也能像create-vue-app一样，允许您定义custom elements及其行为，不会影响应用的开发模式，可以快速帮您理清楚微前端方案的利弊。

但不幸的是，还实现了跨应用状态共享、跨框架组件调用的能力， 每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程， 去中心化，废话少说，它在实现微前端的基础上。

本文则是在此基础上对现有的微前端解决方案进行对比总结。

ESM都能加载，确保微应用之间样式互相不干扰 JS 沙箱，这样它们就可以被脚本化和样式化。

并且它能兼容所有的浏览器，MDN对Web Components的定义是这样的： 作为开发者，不论是样式隔离、js 隔离这类问题统统都能被完美解决，微前端想要达到的效果都已经达到，可以在你喜欢的任何地方重用，我们已经深入剖析了微前端究竟是什么，多次使用它们会使您的页面变得一团糟，使代码尽可能地重复利用，最终都要编译成js，导致应用间上下文无法被共享，具体请查看can i use，并且他们都是浏览器的新特性， 应用单独开发：ESM只是js的一种规范，不过后者需要做好代码隔离。

并且如果您不小心的话， 综上所述。

生成对应技术栈模板，微前端无外乎三大特性。

细心的小伙伴应该发现，EMP除了具备微前端的能力外，无需重新打包发布新的整合应用便能加载到最新的微应用，在其官网中我找到了如下概括： 基于single-spa封装，。