微前端是什么？别担心，我来告诉你！简单概括，它就像把一个大房子拆分成多个小房间，每个房间都能独立装修、独立使用，但又能和谐地融为一体。这种架构解决了传统单体应用“老态龙钟”的问题，让团队开发更高效，部署更灵活！

说到微前端的方案，你可能会问：“我该选哪个？”目前主要有三种：iframe、qiankun和microApp。iframe就像老古董，简单但问题不少，比如url不同步。相比之下，qiankun就像一位全能选手，支持各种技术栈，但接入成本有点高，性能也需注意。而microApp则更像“组件化专家”，能很好地隔离样式和脚本，但在兼容性上可能没那么友好。

所以，如果你需要简单快速，iframe够用；如果追求高效灵活，qiankun或microApp更适合。记住，选择方案要看你的团队需求和项目的实际情况！就像穿衣，适合自己最重要！

微前端是什么？

背景

1、微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
2、微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

核心价值

1、不限制技术栈：主框架不限制接入应用的技术栈，微应用具备完全自主权
2、独立开发、独立部署：微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3、增量升级（拓展）：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术
4、升级或重构：而微前端是一种非常好的实施渐进式重构的手段和策略
5、独立运行：每个微应用之间状态隔离，运行时状态不共享

目前微前端的几种解决方案

iframe

优点：

1、最稳定的、上手难度最低的。
2、提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决

缺点：

1、url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2、加载是另一个window窗口，页面缩放时内部窗口内部缩放不同步，以及弹窗无法全局覆盖，和双滚动条问题；
3、通信复杂；要用postMessage，另外发送消息时需要在onload监听事件处理，会出现发送额外的噪声消息的情况只适合简单的页面渲染

阿里乾坤 qiankun （阿里 14.2k）

官网地址
基于 single-spa 的微前端实现库，通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。

特点：

1、基于 single-spa 封装，提供了更加开箱即用的 API。
2、技术栈无关，任意技术栈的应用均可 使用/接入，不论是React/Vue/Angular/JQuery 还是其他等框架。
3、HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
4、样式隔离，确保微应用之间样式互相不干扰。
5、JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
6、资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
7、umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

不足：

1、 适配成本比较高，工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作；
2、css 沙箱采用严格隔离会有各种问题，js 沙箱在某些场景下执行性能下降严重；
3、无法同时激活多个子应用，也不支持子应用保活；
4、无法支持 vite 等 esmodule 脚本运行；

microApp （京东 4k）

官网地址
micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端。

核心功能在CustomElement基础上进行构建，CustomElement用于创建自定义标签，并提供了元素的渲染、卸载、属性修改等钩子函数，我们通过钩子函数获知微应用的渲染时机，并将自定义标签作为容器，微应用的所有元素和样式作用域都无法逃离容器边界，从而形成一个封闭的环境。

特点：

1、JS 沙箱。
2、样式隔离。
3、元素隔离。
4、预加载。
5、资源地址补全。
6、插件系统。
7、数据通信。
8、与技术栈无关
9、支持子应用保活

不足：

1、接入成本较 qiankun 有所降低，但是路由依然存在依赖；
2、多应用激活后无法保持各子应用的路由状态，刷新后全部丢失；
3、css 沙箱依然无法绝对的隔离，js 沙箱做全局变量查找缓存，性能有所优化；
4、支持vite运行，但必须使用plugin改造子应用，且 js 代码没办法做沙箱隔离；
5、对于不支持 webcompnent 的浏览器没有做降级处理；

无界：（腾讯 2k）

官网地址
无界微前端方案基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。

小结

除了Iframe，乾坤，microApp，无界三个框架都可以实现JS 沙箱，样式隔离，数据通信的功能，并且任意技术栈的应用均可 使用/接入。

结合目前的实际工作情况（vue2，webpack），下面以vue进行demo测试JS 沙箱，样式隔离，数据通信，（子应用保活）的功能。

microApp基础示例

1. 基座应用

1. 依赖版本

npm i @micro-zoe/micro-app --save

"@micro-zoe/micro-app": "^0.8.10",
"vue": "^2.6.11",

2. main.js引入

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

// 引入element

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

// 引入microApp--start

import microApp from '@micro-zoe/micro-app'

microApp.start()

// 引入microApp--endVue.config.productionTip = falseVue.use(ElementUI)

new Vue