qiankun微前端方案实践

关于微前端及qiankun，网上已有大量文章详细介绍了，本文不做赘述，只是附上根据不同侧重点介绍的文章链接。

官方文档

qiankun官方文档

技术细节及原理介绍

可能是你见过最完善的微前端解决方案

vue实践指导

基于qiankun的微前端接入笔记
qiankun 微前端方案实践及总结

下面主要记录一下我在实际开发过程中遇到的问题和解决问题的方案

实际问题

1. qiankun加载样式表不完整，导致主应用与子应用来回切换时样式丢失。

我们的项目主应用是一个比较完整的项目，后来需要增加一块功能且这块功能需要单独部署，所以就将这块功能单独起一个项目，在主应用中添加一个组件作为子应用的容器。

但是在开发过程中我们发现，在主子应用间快速切换时，会出现子应用部分样式丢失的问题。通过在正常情况和异常情况下审查元素我们发现，出现异常是因为子应用中少加载了几个样式文件（几个style标签），所以导致部分样式正常，部分样式丢失的情况。

为了解决这一问题，我们首先想到的是查官方文档。毕竟这是我们第一次接触这个框架，可能存在一些使用不规范的问题（比如，为了避免加载子应用时找不到其容器元素的问题，我们将启动函数从main.js转移到了容器组件的mount钩子中）。可是在挨个排除这些所谓的“不规范”之后，上述问题并未得到解决。接着我们又查看了官网的“常见问题”文档。经过尝试了几个与样式相关的解决办法后，我们的问题依然得不到解决。

现在我们只能通过自己手动解决这个问题了。

首先我们知道这个问题的根源是qiankun少加载了样式表，然后我们尝试着去探索异常出现的规律。经过多次试验，我们发现以下几个关键信息：
- qiankun加载样式表的机制：qiankun在进入子应用时，只会加载正常显示当前页面的样式文件，子应用其他页面的样式暂不加载。然后跳转到其他页面时，才会动态加载其他页面的样式。每跳转到一个新页面，子应用的style标签数量就累加。直到跳转完子应用的每个页面，子应用的所有样式才算加载完，