什么是微前端

微前端是指存在于浏览器中的服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。

• 如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。

• 一般微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，可能迭代三五年或者更多，最后演变成一个巨石应用的概率往往高于其他类型的 web 应用。这就带来了技术栈落后、编译部署慢两个问题。

微前端的好处

1. 有利于团队自治
   在公司里面，一般团队都是按照业务去划分的，在没有微前端的时候，如果几个团队维护一个项目肯定会遇到一些冲突，比如合并代码的冲突，上线时间的冲突等。应用了微前端之后，就可以将项目根据业务模块拆分成几个小的模块，每个模块都由不同的团队去维护，单独开发，单独部署上线，这样团队直接就能实现自治，减少甚至不会出现和其他团队冲突的情况。
2. 可兼容老项目
   如果公司中有存在古老的 jquery 或者其他巨石项目，但是又不想用旧的技术栈去维护，选择使用微前端的方式去拆分项目是一个很好的选择。
3. 可做跨技术栈开发
   如果我们的微前端系统中需要新增一个业务模块时，只需要单独的新建一个项目，至于项目采用什么技术栈，完全可以由团队自己去定义，即使和其他模块用的不同的技术栈也不会有任何的问题
4. 除此之外还包括 业务颗粒化，技术灵活，独立开发部署 等方面的优势

现有的微前端方案

1. iframe
   iframe 大家都很熟悉，通过 iframe 实现就是每个子应用通过 iframe 标签来嵌入到父应用中，iframe 具有天然的隔离属性，各个子应用之间以及子应用和父应用之间都可以做到互不影响。但是 iframe 也有很多缺点:

   • url 不同步，如果刷新页面，iframe 中的页面的路由会丢失
   • 全局上下文完全隔离，内存变量不共享。
   • UI 不同步，比如 iframe 中的页面如果有带遮罩层的弹窗组件，则遮罩就不能覆盖整个浏览器，只能在 iframe 中生效。
   • 加载较慢，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

2. single-spa
   single-spa 是最早的微前端框架，可以兼容很多技术栈。

   single-spa 首先在基座中注册所有子应用的路由，当URL改变时就会去进行匹配，匹配到哪个子应用就会去加载对应的那个子应用。

   相对于 iframe 的实现方案，single-spa 中基座和各个子应用之间共享着一个全局上下文，并且不存在URL不同步和 UI 不同步的情况，但是 single-spa 也有以下的缺点:

   • 没有实现 js 隔离和 css 隔离
   • 需要修改大量的配置，包括基座和子应用的，不能开箱即用

3. qiankun
   qiankun 是阿里开源的一个微前端的框架，在阿里内部已经经过一批线上应用的充分检验及打磨了，所以可以放心使用。qiankun有什么优势呢?

   • 基于 single-spa 封装的，提供了更加开箱即用的 API
   • 技术栈无关，任意技术栈的应用均可使用/接入，不论是React/Vue/Angular/Query 还是其他等框架。HTMLEntry 的方式接入，像使用iframe 一样简单
   • 实现了 single-spa 不具备的 css 隔离和 js 隔离
   • 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度