微前端之乾坤 入门到源码简析

364 阅读2分钟

微前端之乾坤 入门到源码简析:

背景

官方文档: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处理(此处有坑:跨域问题,需要配置)

微信截图202303131713541.png

对加载的JS代码处理

微信截图202303131713542.png