微前端的初探索
微前端的初探索
- 一、什么是微前端
- 二、微前端的特点
- 三、微前端的工作原理
- 四、微前端的路由分发
- 五、微前端的应用隔离
- 六、微前端的通信
- 七、微前端的选择
一、什么是微前端
微前端是将Web应用由单一的应用转变为多个小型前端应用聚合为一的一种手段，是一种多个团队通过独立发布功能的方式共同构建现代化web应用的技术手段及方法策略，它不是单纯的前端框架或者工具，而是一套架构体系。
二、微前端的特点
任何新技术的出现都是为了解决现有场景和需求下的技术痛点：
1、拆分与细化：当下前端领域，由于时间的推移和应用功能的不断丰富完善，一个简单的单页面应用不再变得单一，而是越来越庞大也难以维护，导致改一处而动全身，由此带来的发版成本也越来越高。而微前端的意义就是将这些庞大的系统进行拆分，每个部分可以进行单独的维护及部署。
2、历史系统整合：现在的企业项目中，或多或少都会有一些老旧项目，这些项目可能会采取一些老旧的框架，而介于日常运营，这些老旧项目需要结合到新框架中来使用。但对此我们并没有理由浪费时间和精力重写老旧的逻辑。而微前端可以将这些系统进行整合，在基本不修改逻辑的情况下同时兼容新老两套系统并运行。
目前微前端框架一般都有以下特点：
- 技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权。 - 独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新。 - 增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略。 - 独立运行
每个微应用之间状态隔离，运行时状态不共享。
三、微前端的工作原理
当前微前端主要采用组合式应用路由方案，该方案的核心主要是“主从”思想，包括一个“基座”和若干个“微应用”。
基座一般是一个前端SPA项目，主要负责应用注册、路由分发、消息下发等；而微应用一般是一个独立的前端项目，例如React、Vue、Angular或者JQuery等开发的项目，每个微应用注册到基座应用中，由基座进行管理，脱离基座也是可以单独访问的。
举例来说就是基座应用下有一些菜单选项，点击每个菜单可以展示对应的微应用。这些应用的切换时纯前端无知的，所以基于目前的情况来说，前端基座需要解决的问题：
1、路由分发问题
2、主微应用的隔离问题
3、通信问题
四、微前端的路由分发
微前端的路由分发即通过路由将不同的业务分发到不同的、独立的前端应用上，通常可以通过HTTP服务器的反向代理来实现，又或者是应用框架自带的路由来解决。
作为一个SPA的基座应用，想要展示微应用的页面，除了iframe之外，要能先拉取到微应用的页面内容，这就需要远程拉取机制。
远程拉取机制通常会采用fetch API来首先获取到微应用的HTML内容，然后通过解析将微应用的JS和CSS进行抽离，采用eval方法运行JS，并将CSS和HTML内容append到基座应用中，留给微应用的展示区域，当微应用切换走时，同时卸载这些内容，从而实现当前应用的展示。
五、微前端的应用隔离
应用隔离问题主要分为主应用与微应用、微应用与微应用的CSS样式隔离和JS执行环境隔离。
CSS样式隔离
主应用与微应用的样式隔离：当主应用与微应用同屏渲染时，可能会出现样式渲染。可以采用CSS Module或者命名空间的方式，给每个应用模块以特定前缀，即可保证不会互相干扰，可以采用webpack的postcss插件，在打包时添加特定的前缀。
微应用与微应用的样式隔离：在每次进行应用加载时，将当前加载应用所有的link和style内容进行标记，卸载同时卸载页面上对应的link和style即可。
JavaScript隔离
每当微应用的JS被加载执行时，它的核心实际上时对全局对象Window的修改以及一些全局事件的改变。
例如：当微应用采用JQuery开发时，加载时会在Window上挂载一个window.$对象
为了解决这一问题，最普遍的做法时采用沙箱机制。
沙箱机制的核心：让局部的JS运行时，对外部对象的访问和修改处在可控的范围内，即无论内部怎么运行，都不会影响外部的对象。
通常在Node.js端可以采用nvm模块，而对于浏览器则需要结合with关键字和window.Proxy对象来实现浏览器端的沙箱。
六、微前端的通信
对于相互分离的微应用之间的通信，本质上离不开中间媒介或者全局对象。故而对于消息订阅的模式的通信机制是非常适用的。
在基座应用中定义事件中心Event，每个微应用分别来注册事件，当被触发事件时再由事件中心统一分发，流程如下：
如果基座和微应用采用的是React或者Vue，可以结合Redux和Vuex一起使用，从而实现应用之间的通信。
七、微前端的选择
微前端确实解决了开发中遇到的问题，但是对于开发者来说，到底是否要使用微前端，以及如何正确地使用微前端，需要遵守一些原则：
1、目前微前端最佳的使用场景是一些B端的管理系统，它技能兼容集成历史系统，也可以将新的系统集成起来，并且不会影响原来的交互体验。
2、基座应用与微应用的部署能力、微应用的配置管理能力、本地开发调试能力、线上监控及统计能力等，只有将整个能力体系搭建完善，才是整个微前端体系流程的完善。
目前业界的微前端框架：
Mooa：基于Angular的微前端服务框架
Single-Spa：最早的微前端框架，兼容多种前端技术栈
Qiankun：基于Single-Spa，阿里系开源微前端框架
Icestark：阿里飞冰微前端框架，兼容多种前端技术栈