qiankun

学习记录前端微服务

什么是微前端

微前端是指存在于浏览器中的微服务，借鉴了微服务的架构理念，微服务是一个独立的、可独立运行的软件模块，它提供了一组独立的、可复用的技术栈，比如：vue、react、angular、jquery等。

前端微服务的好处

1、团队自治，2、技术灵活，3、独立开发、部署，4、兼容老项目，5、业务颗粒化

微前端解决方法

1、iframe

优点：

通过iframe实现就是每个子应用通过iframe标签嵌入到父应用中，
iframe具有天然的隔离属性，各个子应用之间以及子应用和父应用之间都可以做到互不影响。
缺点：
1、url不同步，如果刷新页面，iframe中的页面的路由会丢失
2、全局上下问完全隔离，内存变量不共享
3、url不同步，比如iframe中的页面如果哦有带遮罩的弹窗组件，则遮罩不能覆盖整个浏览器，只能在iframe中生效
4、慢，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程

2、single-spa

优点：

兼容很多技术栈，single-spa首先在基座中注册所有子应用的路由，当url改变时就会去进行匹配，匹配到哪个字应用就会去加载对应的那个字应用
相对于iframe的实现方法，single-spa中基座和各个子应用之间共享这一个全局上下文，并且不存在URL不同步和UI不同步的情况
缺点：
1、没有实现js隔离和css隔离
2、需要修改大量配置，包括基座和子应用的，不能开箱即用

3、qiankun

优势：

1、基于single-spa封装的，提供了更加开箱即用的API
2、技术栈无关，任意技术栈的应用均可使用、接入，不论是react\vue\angular\jquery还是其他框架
3、HTML entry 的方式接入，像使用iframe一样简单
4、实现了single-spa不具备的js隔离和css隔离
5、资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度
缺点： 1、主应用（基座）的样式可能会影响子应用的样式，要做好样式隔离，可以使用 css-module 2、子应用间的跳转需要通过 history.pushState() 或者将主应用的路由实例通过props传递给微应用，微应该用这个路由实例跳转

qiankun项目目录

micro-base：基座 sub-vue：vue子应用 sub-react：react子应用 sub-umi:：umi子应用 基座（主应用）：主要负责集成所有子应用，提供一个入口能够访问你所需要的子应用的展示，尽量不写复杂的业务逻辑 子应用：根据不同业务划分的模块，每个子应用都打包成umd模块的形式供基座（主应用）来加载