浅谈微前端

微前端是一种类似于后端微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

它不是单纯的前端框架或者工具，而是一套架构体系，最早在2016年底被提出，最近两年才流行起来。

采用微前端的好处

在功能越来越多，依赖越来越负责的大型前端系统中，如果在项目初期没有很好地考虑后期兼容的灵活性、扩展性以及弹性，很容易出现项目难以维护或者谁都不想碰的尴尬场面，所以初期的设计很重要。

采用微前端，可以将新、旧技术构造的前端项目完美融合到一起，彼此构建，发布，运行等不受干扰。

微前端的优势：

• 独立性：不同业务应用独立开发、独立部署、增量更新；
• 技术栈无关：在同一页面上使用多个前端框架而不用刷新页面 (Vue，React等)；
• 运行时隔离共享：不同业务子应用之间可以共享数据以及进行通信，但又能做到 js 和 css 互不影响。

关于single-spa

Single-spa 是一个将多个单页面应用聚合为一个整体应用的 javascript 微前端框架。
https://zh-hans.single-spa.js.org/

Single-spa 从现代框架组件生命周期中获得灵感，将生命周期应用于整个应用程序。 它脱胎于 Canopy 使用 React + React-router 替换 AngularJS + ui-router 的思考，避免应用程序被束缚。

现在 single-spa 几乎支持任何框架，它是很多微前端框架的基石，比如蚂蚁金服基于single-spa 的微前端解决方案qiankun。

single-spa 的原理：它相当于一个状态机 ，框架只负责维护各个子应用的状态，其中怎么加载子应用、挂载子应用、卸载子应用等，都由子应用自身控制，从而保持很好的扩展性。

关于qiankun

它主要基于 single-spa 封装了非常多的能力，把我们在构建微前端系统中遇到的一些问题，如样式隔离、沙箱、预加载等等这些你需要的能力全部内置到了 qiankun 里面，所以这是一个比较完备的微前端解决方案。

特性

• 基于 single-spa 封装，提供了更加开箱即用的 API。
• 技术栈无关，任意技术栈的应用均可 使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架。
• HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
• 样式隔离，确保微应用之间样式互相不干扰。
• JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
• 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

https://qiankun.umijs.org/zh