微前端技术框架qiankun技术分享

一、为什么选择qiankun框架？

在公司平台涉及自研和外采等多个子系统的情况下，如何将这些子系统前端界面集成到一起，组成统一平台管理界面，同时最大程度地保持用户体验一致，是项目团队面临的首要问题。传统iframe方案无法满足项目需求，因此经过反复技术对比，最终确定运用qiankun框架来解决当前任务需求。

使用qiankun框架，你可以做到以下几点：

• 多种技术框架共存：在同一个页面中使用多种技术框架（React, Vue, AngularJS, Angular, Ember等任意技术框架），并且不需要刷新页面。
• 无需重构现有代码：现有项目中的代码无需重构，即可实现微前端集成。
• 更优的性能：每个独立模块的代码可做到按需加载，不浪费额外资源。
• 独立模块运行：每个独立模块可独立运行，互不影响。

而传统的iframe存在以下不足：

• 页面加载问题：影响主页面加载，阻塞onload事件，本身加载也很慢，页面缓存过多会导致电脑卡顿。
• 布局问题：iframe必须给一个指定的高度，否则会塌陷。
• 弹窗及遮罩层问题：只能在iframe范围内垂直水平居中，无法在整个页面垂直水平居中。
• 浏览器前进/后退问题：iframe页面刷新会重置（如从列表页跳转到详情页，然后刷新，会返回到列表页），因为浏览器的地址栏没有变化。
• 页面跳转问题：iframe之间的页面跳转只会在iframe范围内进行，无法跳出iframe框架。

需要注意的是，qiankun框架在css和js方面需要制定规范进行隔离，否则容易造成全局污染，尤其是vue的全局组件和全局钩子。此外，qiankun不适用ie9以下的版本。

二、qiankun框架介绍

qiankun（乾坤）框架是基于single-spa框架搭建而成的，可以看作是single-spa的优化版。

在qiankun框架中，每个应用都是独立的，它们可以运行在不同的端口上。例如：

• 进入app1应用时，由于vue-router配置的作用，默认地址栏后加了个/app1，但实际加载的app1是跑在localhost:8081上的。

• 进入app2应用时，同理地址栏后加了个/app2，但实际加载的app2是跑在localhost:8082上的。

qiankun框架的大体实现思路如下：

1. 预加载资源：如果在应用注册配置中，有配置需要预加载的应用，则在初始化的同时去加载这些应用。
2. 初始化路由：根据配置的路由规则，与当前页面路径匹配，找到当前有效的应用信息。并且通过popstate监听页面路由变化，根据路由变化得到当前有效的应用。
3. 代理部分window事件：由于每个应用可能各自会绑定一些window事件，因此劫持window.addEventListener，将每个应用所绑定的事件记录下来，方便后续再切换路由时清除掉。
4. 加载资源：通过加载目标页面，分析各种资源然后加载执行。
5. 记录全局变量：在每个应用执行之前，记录当前全局变量，然后在应用被卸载的时候，清除掉所有全局变量，以免影响下个应用的执行。

相关知识点：

• a、沙盒模型：

  qiankun有一个沙盒模型，它能够在子系统加载之前对window对象做一个快照（拷贝），然后在子系统卸载的时候恢复这个快照，即可以保证每次子系统运行的时候都是一个全新的window对象环境。大致原理是记录window对象在子系统运行期间新增、修改和删除的属性和方法，然后会在子系统卸载的时候复原这些操作。

• b、css污染解决方案：

  qiankun解决css污染的办法是：在子系统卸载的时候，将子系统引入css使用的、标签移除掉。移除的办法是重写标签的appendChild方法。子系统加载时，会将所需要的js/css文件插入到标签，而重写的appendChild方法会记录所插入的标签，然后子系统卸载的时候，会移除这些标签。

• c、子系统预请求实现方式：

  我们需要知道子系统有哪些js/css需要加载，而借助systemJs加载子系统时，只知道子系统的入口文件（app.js）。qiankun不仅支持app.js作为入口文件，还支持index.html作为入口文件。它会用正则匹配出index.html里面的js/css标签，然后实现预请求。

总结：

qiankun框架几乎满足了所有微前端集成的需求，但也存在一些不足，如组件间通信问题随着业务复杂而变得难以管理，以及兼容性的问题。这也是后续需要进一步提升和解决的方向。