三大主流微前端框架，you love who？

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

背景及相关信息

微前端目前已经是大型前端应用中常见的技术，目前微前端常用的框架主要有三个：

1. 无界
2. qiankun 乾坤
3. MicroApp

那么这三种微前端框架各有什么优缺点，在企业中进行大型应用开发时，应该如何进行选择呢？这篇文章讲由浅入深的告诉你答案！

原文：https://juejin.cn/user/1714893869557512/posts

01：什么是微前端？

故事开始于三年前…

小明为公司重构了一版新的管理后台，采用了市面上最流行的SPA渲染模式，具体技术栈使用的是 react + react-router 。

项目第一版很快就顺利上线了，但在后续的迭代中，遇到一个棘手的问题： 产品经理希望快速复用之前项目的某些页面 。这让小明犯了难，因为老项目是用“上古神器” jQuery 写的，完全重构成 react，成本非常高。这时后端老哥丢过来一句：“ 你们前端用 iframe 嵌进来就可以了吧？ ” 小明心里很清楚 iframe 有许多小毛病，但在当时，也确实没有比它更好的选择了。

上线后，随着时间的推移，用户产生了困惑：

1. 为什么这个页面的弹框不居中了？
2. 为什么这个页面的跳转记录无法保存？…

小明心里其实非常清楚， 这一切都是 iframe 带来的弊端 。

时间来到三年后的今天，小明听说 微前端能够解决 iframe 的各种疑难杂症 ，于是展开了调研。

市面上对微前端的定义让人眼花缭乱，比如 微前端是：

这里给出我对微前端最接地气的定义：

“类似于iframe的效果，但没有它带来的各种问题”——小明。

02：主流技术方向分类

首先，“微前端”作为近几年国内前端界最火的技术之一，目前存在多个技术流派。我 按照它们对 iframe 看法的不同 ，将主流微前端方案分为了三大派系： 革新派、改良派、中间派 。

2.1. 革新派 qiankun

以 qiankun [1] 为主的革新派认为： iframe 问题很多，应避免使用它。 完全可以利用现有的前端技术 自建 一套应用隔离渲染方案。

2.1.1. 原理：

2.1.1.1. 基于 single-spa [2]

将路由切换与子应用加载、卸载等生命周期结合起来是微前端的一项核心能力。这一步 qiankun 是基于 single-spa [3] 实现的，不同的是它支持以 html 作为加载子应用的入口，不必像 single-spa 那样需要手动梳理资源链接，内部插件 import-html-entry [4] 会自动分析 html 以获取 js 和 css。

2.1.1.2. 样式隔离

为了确保子应用之间样式互不影响，qiankun 内置了三种样式隔离模式：

1. 默认模式。

原理是加载下一个子应用时，将上一个子应用的 <link rel="stylesheet" href="xxx.css"/>、<style>...</style> 等样式相关标签通通删除与替换，来实现样式隔离。缺点是仅支持单例模式（同一时间只能渲染单个子应用），且没法做到主子应用及多个子应用之间的样式隔离。

1. 严格模式。

可通过 strictStyleIsolation：true 开启。原理是利用 webComponent 的 shadowDOM 实现。但它的问题在于隔离效果太好了，在目前的前端生态中有点水土不服，这里举两个例子。

• 可能会影响 React 事件 。比如这个issue 当 Shadow Dom 遇上 React 事件 [5] ，大致原因是在 React 中事件是“合成事件”，在React 17 版本之前，所有用户事件都需要冒泡到 document 上，由 React 做统一分发与处理，如果冒泡的过程中碰到 shadowRoot 节点，就会将事件拦截在 shadowRoot 范围内，此时 event.target 强制指向 shadowRoot，导致在 react 中事件无响应。React 17 之后事件监听位置由 document 改为了挂载 App 组件的 root 节点，就不存在此问题了。

• 弹框样式丢失。 原因是主流UI框架比如 antd 为了避免上层元素的样式影响，通常会把弹框相关的 DOM 通过 document.body.appendChild 插入到顶层 body 的下边。此时子应用中 antd 的样式规则，由于开启了 shadowDom ，只对其下层的元素产生影响，自然就对全局 body 下的弹框不起作用了，造成了样式丢失的问题。

解决方案：调整 antd 入参，让其在当前位置渲染。