21年入职新公司的时候，接手的第一个挑战型的项目就是管理后台改造。由于团队业务分离，需要将以前多个应用集合在一起的前端项目改造成微前端，这样开发，测试，发布互补影响。于是便火急火燎的查文档，最终还是实现了项目分离改造，关于如何改造实现的在之前的文章里面有介绍。
最近手上业务比较少，于是准备仔细研究一下原理。
这个是我目前的项目基本架构。可以看出，我使用的是qiankun框架，它的好处就是qiankun是基于single-spa封装，更好地实现了子应用的自动加载、以及js隔离与scope-css隔离。
首先，先从single-spa说起
single-spa最早在社区火起来并实现了微前端，主要是针对单页面应用。 我们都知道，一般的单页面应用都是从入口文件main.js或者index.js开始启动。然后挂载到id=app的div上。那么微前端实现逻辑就是主应用提供一个div，然后获取到子应用的资源然后运行子应用不就行了吗。实现这些要考虑很多东西：
- 如何加载子应用，主子应用不同域，跨域请求是不允许的。
- 如何切换主子应用页面，路由怎么处理？
那single-spa是怎么处理的呢。
如何加载子应用：
single-spa通过将子应用所有资源打包成js，然后通过script标签加载子应用js。子应用需要暴露生命周期钩子函数，让single-spa知道怎么加载，启动，更新，卸载。
如何切换主子应用：
监听 url 的变化，url 变化时，会使得某个子 app 变成 active 状态，然后走整套生命周期。
然后再看看qiankun
single-spa都实现了，为什么还要用qiankun呢？其实上面只是实现了最基本的主子应用共存。还有很多问题要考虑：
- single-spa需要子应用全部都打包成js文件，而且还需要用户手动创建script标签加载。这样导致我们用构建工具打包的应用没法做构建优化，比如静态资源走cdn、懒加载等。
- single-spa未考虑到js隔离。假设主子应用都修改了window上的某个属性，那么就会造成功能异常。
- single-spa未实现样式隔离。 我们再来看看qiankun官网介绍：
那么qiankun是如何解决这些问题的呢？
首先是html-entry接入
qiankun是通过在html中提供子应用加载入口，然后封装了一个import-html-entry插件，由这个插件实现子应用各种资源加载。这个插件主要是通过fetch请求子应用，然后拿到子应用的index.html文件后再去解析html实现所有资源加载。这里面就有一个跨域问题，正常是不允许跨域的，所以需要子应用服务器允许跨域请求。
其次是js隔离
qiankun提供了3套方案：最基础的就是快照功能，子应用启动前，浅复制window上所有的属性，然后加载子应用，当切回主应用时，复制子应用window，然后对比，还原主应用window；第二套上通过proxy代理实现单个子应用的js隔离；第三套还是通过proxy代理实现了多个子应用的js隔离。感兴趣的可以去研究下源码，总之很值得学习研究。
样式隔离就是目前常规的scope-css隔离方案。
qiankun的优点在于更适合新手上手，功能配置齐全，接入简单。
