更多信息请参见微前端主题https://代码tene ager . github . io/微前端主页：https://微前端主页：https://微前端s.org

以前，NPM数据包格式有很多分离和引用。例如，多个应用程序项之间可能存在业务逻辑模块或其他可重用的东西。然后作为NPM数据包进行管理和使用。但是，这将导致以下问题：

无效发布：如果需要重复NPM软件包内的逻辑业务，则必须首先发布NPM软件包，然后对使用该NPM软件包的每个应用程序更新一次NPM软件包版本，然后单独发布一次。程序很麻烦。相关的应用越多，耗费的人力和精力就越多。多团队协作不容易标准化。包含通用模块的NPM软件包被用作所有人拥有的共享资产，但实际上没有人拥有。这很快就会充满混乱风格的不一致代码。没有明确的承诺或技术远景。大卫亚设(David Assell，Northern Exposure，MART)这些问题让我意识到，扩大前端开发规模是一个重要但棘手的问题，以便多个团队同时开发大型复杂的产品。因此，早在2016年就诞生了微前端概念。

介绍

& AMP；# 039；微前端& amp# 039；该词最早于2016年底在ThoughtWorks技术雷达上提出，并将后端的微服务概念扩展到了前端世界。微服务是服务器端提出的有限上下文、松散结合的体系结构模型，特别是将应用程序服务器划分为较小的微服务，这些微服务可以独立运行，使用HTTP等轻量级通信方式。

微前端概念的提出可以通过下面的web应用架构模式进化图来理解。

最原始的体系结构模型是单个web应用程序，整个应用程序由一个团队开发。

随着技术的发展，开发责任开始细分，负责项目的团队分为前端团队和后端团队，即前后分离的体系结构。

随着项目越来越复杂，首先受到压力的是后端。因此，微服务的体系结构模式开始出现。

随着前端操作环境的进一步改善，web应用程序的发展趋势越来越倾向于在浏览器端集成更多的功能，前端层的代码量和业务逻辑也在迅速增加，维护变得越来越困难。因此，引入了微服务体系结构想法，将网站或web应用程序根据业务划分为较小的微应用程序，以便独立团队开发。

如图所示，微前端、微服务等体系结构模型的进化趋势是不断划分逻辑，以降低项目的复杂性，提高可维护性和可重用性。

因此，微前端是类似于微服务的体系结构，由独立提供的多个前端应用程序组成的整体体系结构样式。将前端应用程序分为更小、更简单的应用程序，可以独立开发、测试和部署。用户眼中仍然内置着一个产品。有一个基础应用程序(主应用程序)，用于管理单个子应用程序的加载和卸载。

:从

微前端概念

上面的进化过程可以看出，微前端体系结构更适合大型web应用程序，一般有以下三种形式：

公司内部的平台系统。这些系统之间有一些从属关系。用户在使用过程中处理系统之间的任务，经常跳页面或切换系统会导致效率低下的任务。此外，在多个独立系统内，还可以开发重复度高的功能，例如用户管理。这种冗馀功能可能会增加开发成本和用户使用成本。大型单页应用程序。这些应用的特点是系统体量大，日常调试开发需要更多的时间，严重影响开发经验和效率。而且，随着业务上功能的升级，项目体积也会不断增加，如果项目需要进行体系结构升级，改造成本将会很高。对现有系统的兼容性和扩展举例来说，有些项目使用旧技术，使用微前端后，可以使用新的技术框架开发新功能，从而防止重新改造，并避免在旧技术的基础上继续开发。

微前端的应用场景

微前端体系结构可以分为两大类，具体取决于集成微应用程序的位置。

将微应用程序(如通过Nginx代理转发)集成到服务器端。将微应用程序(如使用Web组件的自定义元素功能)集成到浏览器中。

微前端的架构模式

服务器端集成中常用的方法是通过反向代理在服务器端路由。也就是说，通过路径匹配，将不同的请求转发到相应的微应用程序。这种体系结构方式实施起来比较容易，改造的工作量也比较少。因为只有不同的web应用程序聚集在一起，严格地说，不能被视为完整的web应用程序。用户从一个微应用程序移动到另一个微应用程序时，经常需要刷新页面并重新加载资源。

这种代理传递方法比直接导航到相应的web应用程序有一个优点。这就简化了不同应用程序之间的通信问题。因为在同一个域中，所以可以共享localstorage，cookie数据。例如，每个微应用程序都需要身份认证信息token。登录后，只要在localstorage中记录token信息，就可以使用所有后续微型应用程序。不需要重新登录或以其他方式传递登录信息。

服务端集成

浏览器集成也称为运行时集成，有三种常用方法：

Iframe。通过Iframe方法将不同的微应用程序集成到基本应用程序中，成本较低，但在样式、兼容性方面存在问题。例如，沙箱属性sandbox的某些值在IE中不受支持。前端路由。每个微应用程序都公开渲染函数。主应用程序在启动时加载每个微应用程序的主模块，然后根据路由规则渲染相应的微应用程序。实现方式比较灵活，但有一些改造费用。Web组件。基于基本用户定义的元素加载各种微应用程序，通过Shadow DOM实施隔离，转换成本更高。这也是single-spa和基于此修改的干坤的非常流行的集成方法。

浏览器集成

微前端的优势：

比较NPM封装方式分离，更新过程和效率的重要性，微前端是多个子应用程序的集合，因此，如果多个业务应用程序依赖同一个服务应用程序的功能模块，则只要更新服务应用程序，就可以立即更新其他业务应用程序，从而缩短更新过程，降低更新成本。

同步更新

迁移是一项耗时和困难的任务。例如，一个管理系统使用AngularJS开发维护已经三年了，但随着时间的推移，AngularJS不再满足要求，包括团队成员的变化、开发成本或雇佣要求，因此团队希望更新技术堆栈，在其他框架中实现新的要求。直接迁移是不可能的，在新框架中完全重写也不现实。

使用微前端体系结构可以解决问题。您可以在保留现有项目的同时，使用新框架开发新要求，然后使用微前端体系结构集成现有项目和新项目。这样不仅可以更好地使用产品，还可以使团队成员在技术上取得进步，并最大限度地降低产品开发成本。

增量升级

目前单页应用程序体系结构中，使用组件构建用户界面，应用程序的每个组件或功能开发完成或错误修复完成后，每次都需要重新配置和发布整个产品，耗时的工作也很麻烦。

使用微前端体系结构后，您可以将不可用的功能模块拆分为单独的应用程序。在这种情况下，您可以单独制作和发布功能模块，部署时间也非常快。应用程序发布后，无需更改其他内容应用程序即可自动更新。这意味着您可以经常执行构建发布任务。

独立部署与发布

微前端架构与框架无关，所以在多个团队开发应用程序时，每个团队都可以使用自己擅长的技术堆栈进行开发。也就是说，使团队能够适当地决定要使用的技术，从而使团队合作不再僵化。

:如何组合

独立团队决策

多个微应用程序？

微前端体系结构除了多个微应用程序外，还有容器应用程序，每个微应用程序都需要在容量中注册。

正在应用设备。

微前端的每个应用程序都是单独的JavaScript模块，在浏览器中以模块方式由容器应用程序激活

移动和运行。

以模块化方式运行应用程序可以在不同的微应用程序同时运行时避免冲突。

在微应用程序中路由是如何实现的？

在微前端体系结构中，当路由发生变化时，容器应用程序必须首先拦截路由的变化，并根据路由匹配微前端。

使用，如果与微应用相匹配，则启动微应用路由，与特定页面组件相匹配。

微应用程序和微应用程序之间的状态共享是如何实现的？

微应用程序可以通过发布订阅模式(如使用RxJS)执行状态共享。

微应用程序和微应用程序之间如何共享框架和库？

通过Import-map和webpack的externals属性。

如何实现微前端

自我配置模式：通过承诺相互协调，但可能会出现处理第三方依赖性等问题。通过构建基础、配置中心来管理子应用程序。基于Single Spa的干坤方案也有可以根据自己的团队工作定制的方案。消除中心模式：脱离基础模式，每个应用程序(如基于web pack 5模块Federation的EMP微前端方案)之间可以共享资源，使多个应用程序能够相互共享资源。其中，目前值得注意的是进入中央模式的EMP微前端方案，该方案允许在技术堆栈之间的调用和同一技术堆栈的应用程序之间对共享资源进行深度定制。

微前端落地方案

微前端不是框架，不是工具/库，而是包含多个库、工具、集中治理平台和相关支持设施的体系结构体系。

微前端由三部分组成。

微前端基础设施。这是目前讨论最多的，关于微型应用程序如何通过组件base加载、脚手架工具、如何单独构建和分发、如何协调的讨论最多。微前端配置中心：支持灰度、回滚、红蓝、A/B等发布政策的标准化配置文件格式。微前端观测工具：在线/离线管理对所有分布式功能的体系结构至关重要。微前端需要具体解决的10个问题：

微应用程序注册、异步加载和生命周期管理微应用程序之间、主从之间的消息机制微应用程序之间的安全隔离措施微应用程序框架独立、版本无关的微应用程序之间、主从之间的公共依赖库、业务逻辑(utils)和版本如何管理微应用程序独立调试快速定位错误(发射问题)微应用程序发布过程微应用程序包优化问题微https://github.com/Single-SPA.钱昆：基于single-spa，提供更多现成的SINGLE-SPA SANDBOX MOUNT-HTML(API)，网址为https://github.com.Helmidan的Bifrost:Bifrost微前端帧字节的GARFISH:https://GITHUB . com/MODERN-JS.阿里的ice stark:https://github . com/micro-.EMP:https://GITHUB . com/EFOX TEAM/EMP阿里云：https://github.com/a liyun/Ali.010-；Single-spa将每个子应用程序的路由映射关系用作微前端控制器，在URL响应时匹配子应用程序路由，并加载渲染子应用程序。与Single-spa相比，qiankun解决了JS沙盒环境，不需要我们亲自处理。在Single-spa开发过程中，您必须自己编写调用JS的方法，如上面的createScript方法，而不需要qiankun。干坤只需要响应的apps的配置。会有助于加载。(威廉莎士比亚、Northern Exposure、Northern Exposure基于WebComponent的micro-app: micro-app是single这是目前市场上访问微前端成本最低的解决方案。基于web pack 5提供的模块Federation的hel-micro框架：模块Federation是web pack 5提出的概念，模块Federation用于解决多个应用程序之间的代码共享问题，并更优雅地实现应用程序之间的代码共享。基于Iframe的wujie

微前端的建设

qiankun技术圆桌包含关于微前端Why Not Iframe的想法，主要有以下几点。

Iframe提供了浏览器的默认硬隔离方案，可完全解决样式隔离、js隔离等问题。Url不同步。浏览器刷新iframe URL状态不存在。“后退”按钮不可用。UI不同步，因此不共享DOM结构。想象一下屏幕右下角四分之一的iframe中有遮罩层的弹匣。同时，要求将此弹匣放置在浏览器的中心，并自动将浏览器resize放置在中心。全局上下文完全隔离，不共享内存变量。Iframe内部和外部系统的通信、数据同步等要求，主应用程序Cookie必须传递给根域名不同的子应用程序，以实现无登录效果。慢慢来。每个子应用程序的进入是重新配置浏览器上下文、重新加载资源的过程。为此，最终大家都放弃了iframe方案。

微前端框架

MDN Web Components由三种主要技术组成，可共同创建可在任何地方重复使用的软件包功能的自定义元素，而无需担心代码冲突。

自定义元素：定义自定义元素及其行为，然后根据需要在用户界面中使用的一组JavaScript API。阴影DOM(阴影DOM):封装的& ampquot阴影& ampquot一组JavaScript API，用于将DOM树附加到元素(独立于基本文档DOM呈现)并控制相关功能。这样，元素的功能就可以保持私有，这样就可以编写脚本和设计样式，而不必担心与文档其他部分的冲突。Html模板：template和slot元素使您可以创建不在呈现页面上显示的标记模板。然后可以多次重复使用，作为自定义元素结构的基础。但是兼容性不好。查看can I use WebComponents。

实现微前端的几种方式：

spa单页应用程序时代，我们的页面只有一个名为index.html的html文件，该文件充当其他内容的容器，内容标签div id=& amp# 039；app & amp# 039；只有一个/div，其他内容是通过js生成的。也就是说，子项目的容器div id=& amp# 039；app & amp# 039；您可以将生成/div和内容的js插入主项目中，以表示子项目的内容。

链接href=/CSS/app.c8c 4d97c.css rel=样式表div id=app/div脚本src=/js/chunk-vendood

一个问题是，子项目的内容标记是动态生成的，因此资源文件(如img/video/audio)和按需加载的路由页面js/css都是相对路径，子项目的index.html中正确请求，主项目的index .是HTM要求的。

例如，我们主项目的URL是www.baidu.com，子项目的URL是www.taobao.com，子项目的index.html中的imgsrc=& amp# 039；假设有一张名为/logo.jl的图片。现在，此图片的img标签已生成为父项目的index.html，因此图片请求的地址为www.baidu.com/logo.jpg。很明显，上层项目服务器没有这张图。

解决方法：

其中的js/css/img/video等都是相对路径。可以通过网络包全部用绝对路径包装吗？这样可以解决文件请求失败的问题。是否可以手动(或通过node)将子项目中的所有文件复制到主项目服务器，node接收子项目文件的更新后自动复制，单击js/css/img文件夹进行合并，可以像CDN一样，使一台服务器挂起，并向另一台服务器请求该文件。或者服务器之间共享文件，主项目的文件请求失败会自动转到子服务器，找到并返回。通常，您可以动态修改打包到web包中的publicPath，然后自动向这些资源注入前缀。

Single-spa是基于上述子项目添加生命周期(如bootstrap、mount和unmount)的微前端框架。

Single-spa与iframe相比，父子项目属于同一个文档，因此有好处也有坏处。优点是可以共享所有数据/文件，共享公共插件，以及更快地加载子项目。缺点是会造成js/css污染。

Single-spa不能简单直接使用，开发部署需要修改大量web包配置，子项目的改造也很多。

iframe方案

运行时框架主要做了以下工作：

应用加载-根据已注册的子应用程序，通过指定的URL加载规则格式的子应用程序门户，并将其装载到指定位置

有些框架根据manifest等数据获取子应用程序注册和门户地址

一些框架与接受平台动态注入的门户地址的管理平台一起支持。(虽然也有一些框架声称运行时注入和管理平台分离，但如果不实际使用，则必须实施自己的注入逻辑。）

JS做入口更纯粹，用HTML做入口更容易改造老项目。

业界目前使用两种门户格式：HTML和JS

父子门户组合(即确定相关性)也有两种模式：构建和运行时组合生命周期(加载/装载/更新/卸载)

加载/装载时初始化、权限保护、i18n语言等

卸载ｓｃｒｉｐｔ标签、style标签、子应用程序DOM等时清理

路由，父子通信时执行双向更新的桥接路由同步-子应用程序的路由切换时更新url同步。Url跳转/更新时同步更新子应用程序

也就是说，路由子应用程序与URL应用程序通信相同。换句话说，支持父子应用程序之间快速轻松的通信并不像postMessage那么困难(请参阅字符串)。

什么。隔离沙箱-& amp；quot互补干涉& ampquot为了应用，请将每个应用程序转换为& ampquot隔离& ampquot必须在环境中运行

如果没有隔离，CSS全局样式将发生冲突，JS全局变量可能被污染/篡改/替换。异常处理(exception processing)--报告错误时(例如加载失败或路由匹配失败)，统一处理上述所有内容。

Web Component

App入口是子应用程序的加载门户，微前端框架基于已注册的子应用程序。通过给定的URL加载指定格式的子应用程序门户，并将其装载到指定位置。目前，业界有两种入门。

优点缺点说明htmlhtml作为子应用程序门户，耦合更彻底，子应用程序不依赖主应用程序DOM，子应用程序独立开发，无法再部署一次对html的请求，解决性能损失，无法构建时将jsjs优化为子应用程序门户。构建时，缺点是依赖优化主应用程序提供装载节点，软件包产品卷扩展，资源无法并行加载Js入口。

子应用程序更新包后，JS包名称将更改。主应用程序每次都必须将最新的JS绑定子应用程序所有资源打包到一个文件中。CSS提取、静态资源并行加载、第一次屏幕加载(大尺寸)等优化将丢失。在子应用程序打包过程中，必须修改其配置以完成子应用程序js资源的路径。另一方面，html入口网站只需要指定子应用程式的Html入口网站。微前端框架在加载html字符串后提取CSS、js资源，运行子应用程序时安装样式，运行脚本，运行脚本中提供的生命周期挂接。因此，优点也很明显。

应用打包后，不必担心js名称的更改。您可以继续享受Css提取、静态资源并行加载(内部使用Promise.all运行请求资源)、第一次屏幕加载等优化。请求资源时自动完成资源路径。

single-spa 微前端方案

JS Entry通常是子应用程序使资源成为一个entry ｓｃｒｉｐｔ，从而将子应用程序中的所有资源打包到js bundle中，包括CSS、图片等。Single-spa通常与SystemJS一起实施，在single-spa框架中，基础检测浏览器URL的更改，更改时通过SystemJS的导入映射加载各种子应用程序JS。

运行时框架

Import maps此功能仅在Chrome 89中受支持。对Import的映射处理使您可以控制在js中使用import时导入这些库的URL。

例如，js通常以下列方式引入模块：

Import moment from & amp# 039；moment & amp# 039；通常在node_modules中引入，但现在将以下代码添加到html中：

ｓｃｒｉｐｔ type=& amp# 039；importmap & amp# 039；{ & amp# 039；imports & amp# 039；{ & amp# 039；moment & amp# 039；& amp# 039；/moment/src/moment . js & amp；# 039；}}/SSC最终实现的效果如下：

Import moment from & amp# 039；/moment/src/moment . js & amp；# 039；通过Import maps，可以直接在浏览器中使用Import语法。无需在node中处理，不再需要web包

Import maps甚至有底层。

Imports & amp# 039；{ & amp# 039；jquery & amp# 039；[& amp；# 039；https://cdn/jquery . min . js & amp；# 039；& amp# 039；/node _ modules/jquery/；

Import maps非常强大，但浏览器兼容性还不好，所以有我们的poly file程序SystemJS

应用加载

SystemJs是具有自己的模块化规范的通用模块加载程序。他可以在浏览器和节点环境中动态加载模块。微前端的核心是加载子应用程序。因此，将子应用程序打包为模块，并通过浏览器中的SystemJs加载模块。SystemJS与IE11兼容，但对插件版本要求非常严格，变化很大，兼容性也不是特别好，使用体验也不好，目前很少在实战中使用。此外，还支持import映射，但语法略有不同。

Scriptsrc=& amp# 039；system.js & amp# 039；/ｓｃｒｉｐｔ ｓｃｒｉｐｔ type=& amp；# 039；system js-import map & amp；# 039；{ & amp# 039；import & amp# 039；{ & amp# 039；lodash & amp# 039；

JS Entry

HTML入口主要由import-html-entry库实施，该库执行以下操作：

将Entry html (index.html)的内容加载到内存中。从Entry html中导入标签下的内容(包括外部和内嵌)(如CSS、js和link)，并将其组织到网页所需的js、CSS列表中。删除无用的标签(例如注释、ignore等)。加载所有外部链js脚本，并将这些外部链js与内嵌js一起配置为ｓｃｒｉｐｔ list。加载所有外部链CSS文件，并以内嵌(style/)方式将其插入到entry html中。将已处理的entry html和要执行的脚本列表返回给调用方(基础)。通过Http请求加载指定地址的第一个屏幕内容html页，然后解析该html模板以获得模板、脚本、条目和样式。

{template:已处理的脚本、链接和脚本标记已注释掉。scripts: [脚本的http地址或{async: true，src: xx}或代码块]，如果不是标记为sttp Entry的脚本的src或最后一个脚本标记的src}，则要远程加载styles的样式内容，请在template模板中注释掉的late

然后向外曝光“Promise”对象

{//template将获取link被style替换的template template: embedHTML、//静态资源地址assetPublicPath和//外部脚本。最终，所有脚本的代码内容getexternalscripts:()=getexternalscripts(scripts，fetch)、//获取外部样式文件的内容getexternalstylesheets: Fetchscripts . length){ return promise . resolve()；} return ｅｘｅｃ scripts(入口、scripts、proxy、{fetch、strict global })；}} import-html-entry库处理完成后，基础将此html从所需的加载子应用程序放置在相应的DOM容器节点上，然后运行脚本列表以完成子应用程序加载。

详细了解详细的HTML入口源分析。import-html-entry baile:在公开子应用程序注册时提供子应用程序激活规则(路由字符串或函数)。因此，侦听hashchange和popstate事件，并根据事件回调函数中注册的子应用程序激活规则卸载/激活子应用程序。

以Vue-Router的history模式为例，在切换路由时，通常要执行三项重要任务。也就是说，执行一系列hook函数、更新URL、更新router-view，其中URL更新是通过pushstate/replew完成的，因此，请重写和改进history.pushState和history.replaceState方法，以便在运行前、运行

以Single-spa为例。

//we will trigger an app change for any routing events . window . addevent listener(& amp；# 039；hash change & amp# 039；URL reroute)；window . addevent listener(& amp；# 039；popstate & amp# 039；URL reroute)；//monkey patch addevent listener so that we can ensure correct timing const originaladdeventlistener=window . addevent listener。const originalremoveeventlistener=window . removeeventlistener；window . addevent listener=function(事件名称，fn){ if(type of fn===& amp；# 039；function & amp# 039；){ if(ROF Find(capturedeventlisteners[事件名称]，(listener)=listener===fn)){ captured event} } return originaladdeventlistener . apply(this，arguments)；} window . removeeventlistener=function(事件名称，listener fn){ if(listener fn类型==& amp# 039；function & amp# 039；){ if(routingeventslisteningto . index of(事件===listener fn)；Return} } return originalremoveeventlistener . apply(this，arguments)；} window . history . push state=patchedupdatestate(window . history . push state，& amp# 039；push state & amp# 039；)；window . history . ｒｅｐｌａｃｅ state=patchedupdatestate(window . history . ｒｅｐｌａｃｅ state，& amp# 039；replacestate & amp# 039；))这主要是添加了hashchange和popstate两个接收、接收URL的变化。重写PushState和replaceState方法，执行在方法调用现有方法后处理子应用程序的逻辑，以侦听hashchange和popstate事件，并在事件触发后执行处理子应用程序的逻辑。

Import maps

single-spa的一个关键元素是子应用程序生命周期中包含三个回调函数的生命周期：bootstrap、mount和unmount。主应用程序在管理子应用程序时，通过暴露在子应用程序中的生命周期函数启动和卸载子应用程序。

加载：应用匹配路径时，将加载脚本(不只是函数，而是状态)。Bootstrap:在第一次将应用程序内容装载到页面之前调用。Mount:当主应用程序确定需要激活此子应用程序时调用，以实现子应用程序的装载、页面呈现等逻辑。Unmount:当主应用程序确定需要卸载此子应用程序时调用，以实现卸载组件、清除事件接收等逻辑。Unload:不常用的不必要函数。卸载后，bootstrap进程将重新启动。

SystemJS

子应用程序和基础隔离有两个主要事项。

样式分离js分离

Html Entry

路由同步

目前使用的样式分离机制相对最多

生命周期

bem: block element module命名约束

B: Block独立模块；有自己意义的独立实体(如header、menu、containerE:Element元素)；块的一部分；但没有自己独立的意义(如header title、示例：small、checked模块：Block模块多词：Header-Block模块_状态：Block_Modifier模块_ _子元素：block

代码中的每个类名称都是要导入的对象的属性，因此可以明确指定使用时引用的CSS样式。此外，CSS Modules还会在打包时自动将类名转换为散列值，从而完全消除CSS类名冲突问题。

:使用

沙箱隔离

JS写CSS也是目前比较主流的场景，完全不需要单独的CSS文件。所有CSS代码都放在组件内，实现CSS的模块化，但对过去的代码来说不容易处理

:使用

样式隔离

postcss向所有类添加完全一致的前缀，但在编译时处理会增加编译时间。

shadowDOM

js隔离的核心是在基础和子应用程序中使用不同的上下文(global env)，在基础和子应用程序之间实现js操作。

简而言之，就是对子对象应用单独的窗口，防止污染基础的窗口。

BEM、CSS Modules

qiankun在js隔离中也提供了三种方案：

LegacySandbox-必须使用当前未使用的现有js沙箱配置sandbox.loose=true打开。此沙箱使用代理代理代理代理子应用程序对窗口应用操作，并将窗口的子应用程序与全局窗口同步，从而导致入侵。但是，在时间段内对窗口的添加、删除、修改操作将记录在沙箱变量中，在关闭子应用程序时删除，并根据历史记录将窗口恢复到原始状态。ProxySandbox-非IE浏览器默认使用的代理js沙箱。与LegacySandbox一样，基于代理代理代理代理子应用程序对window执行操作。与LegacySandbox不同，ProxySandbox会创建用于子应用程序的虚拟窗口对象。即使正在运行，子应用程序也不会侵入window，因此完全隔离。快照sandbox-IE浏览器默认使用的快照js沙箱。因为IE不支持代理。这个沙箱的原理是在子应用程序启动时拍摄基准窗口的快照，并将其存储在变量中。默认情况下，子应用程序的窗口操作对此变量起作用。此外，在子应用程序运行期间，SnapshotSandbox将修改保存到modifyPropsMap中，以便在创建和删除子应用程序时恢复。

CSS in JS

iframe标记允许创建独立的浏览器级操作环境，该环境与主环境隔离，并具有自己的window上下文。在通信机制中，还可以使用postMessage等API与宿主环境通信。特别是，执行JavaScript代码有以下要求：

应用程序之间的运行时隔离：通常，使用shadowDOM创建的样式隔离DOM，然后使用代理阻止JS执行，并代理到shadowDOM创建的隔离DOM。应用程序之间的通信：同一个域：window.parent不同的域：postMessage；或事件总线等定制方法；路由劫持：

A.在主应用程序环境中应用JavaScript沙箱中的路由更改。但是，接口请求处理太麻烦，通常不建议使用的相对路径配置。b .从同步沙箱内路由更改到主应用程序环境：接收iframe路由上下文并路由主应用程序(如wujie)同步。基于

postcss

URL传递数据，但消息传递能力弱基于CustomEvent的通信基于props主应用程序之间的通信的全局变量，使用Redus进行通信：如果在

JS隔离

运行期间出现错误，则必须捕获该变量。这里主要接收error和unhands

window . addevent listener(& amp；# 039；error & amp# 039；errorhandler)；window . addevent listener(& amp；# 039；unhandled rejection & amp# 039；errorhandler)；

qiankun的沙箱机制

微前端平台级管理系统的最佳实践微前端银行系统中如何实现微前端集成操作工作台微前端金融实践应用字节跳转可以落地微前端基于iframe的微前端框架3354日EMP对百度的探索：可用于落地生产的微前端体系结构微前端在得物客户域的练习|那么多微前端框架架，# 039；微前端& amp# 039；如何打开大门，实现微前端框架——qiankun目标是最完整的微前端解决方案——Qian Kun 2.0 IFRAME接班人——微前端框架Qian Kun中后台系统实践微前端练习美团交付的实践网络，很容易严选企业级微前端解决方案和落地实践。微前端落地总结前端微前端| Wilin-微前端一体化微前端研发ampamp探索和实践D平台分三个阶段实现的方法MIDIP质量效率工具产品的微前端实践是场景中我们想要的微前端体系结构思考和实践开源|度假费零成本微前端框架-零微前端是NETIP LOFTER在后台业务中的实践(1) ——微前端沙盒和微前端应用平台微前端是民生APAS/PSET平台导航与实践微前端技术游戏平台后台系统的实践ICE微前端导航微前端系统帕加索斯-中后端微前端页面构建平台手把手教团队如何定制适合的微前端系统微前端集，帮助他们专注于业务需求。 面向大型工作台的微前端解决方案icestark前端微前端|军阵-如何在大规模应用中设计微前端方案前端微前端|时间-字节设计和实践微前端沙盒标准微前端体系结构蚂蚁的落地实践云前端新种-微前端系统包容云时代的前端开发体系结构Garfish微前端实现原理快速手操作中队的通用微前端治理框架在微前端技术放映量客户端的实战中，团队间微前端生态模块联邦SDK化微模块方案-基于hel-micro MF的组件共享工作流企业微前端开发模式探索阿里本地生活微应用