微前端（乾坤）

暗号：知行

微前端（乾坤）

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构具备以下几个核心价值：

技术栈无关

独立开发、独立部署

增量升级

独立运行时

微前端的主旨

旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。

qiankun 的核心设计理念

简单

由于主应用微应用都能做到技术栈无关，qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计，使得微应用的接入像使用 iframe 一样简单。

解耦/技术栈无关

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力。

Why Not Iframe

url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用

UI 不同步，DOM 结构不共享。

全局上下文完全隔离，内存变量不共享。

慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

特性

基于 single-spa 封装，提供了更加开箱即用的 API。

技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。

HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。

样式隔离，确保微应用之间样式互相不干扰。

 JS 沙箱，确保微应用之间 全局变量/事件 不冲突。

资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。