微前端之乾坤 入门到源码简析:
背景
官方文档:https://https://qiankun.umijs.org/
qiankun 是蚂蚁金服基于 Single SPA 开发的一个微前端实现库,简化了微应用的注册方式,增加了微应用的沙箱管理(js、css隔离)与全局状态共享机制。
在微前端架构下,有主应用和子应用两个基本角色。子应用负责具体的业务逻辑,主应用负责调度子应用。考虑到主应用的特殊性功能,为了保证整个框架的可用性,通常主应用不负责任何业务逻辑。
Single SPA
加载微应用(加载方法还是用户自己提供的)、维护微应用状态(初始化、挂载、卸载)等
single-spa 采用 JS Entry 的方式接入微应用:
通常将子应用的所有资源打包成一个入口文件,在 single-spa^[1]^ 的很多样例中就使用了这种方式。 缺点比较明显,所有资源打成一个包,构建大,加载慢,也不利于做样式隔离和JS隔离
乾坤(qiankun)
由于主应用负责调度子应用,因此主应用需要具备路由管理和资源加载能力。主应用就需要加载子应用的资源。通常有两种资源加载方式:
乾坤是通过HTML Entry方式接入子应用:
子应用构建输出的是一个 HTML 文件,主应用通过加载这个 HTML 文件完成子应用的加载。
乾坤利用import-html-entry这个库来解析子应用页面,并且一次处理子应用的资源
就是通过HTMLEntry的方式,更容易实现样式隔离及JS隔离
通过fetch处理(此处有坑:跨域问题,需要配置)
对加载的JS代码处理