qiankun.js

• qiankun 基于single-spa
  • 基于single-spa基础上进行了封装,扩展了js沙箱样式隔离等
  • 提供基座模式,基座用于注册、承载、启动子应用,子应用可以为独立的前端项目
  • 提供了 单实例,多实例,应用通信,应用隔离等功能

原理

qiankun采用了运行时加载子应用，通过监听url change事件，在路由变化时，去匹配子应用进行加载挂载渲染，同时要求子应用必须暴露出三个生命周期钩子函数：

• bootstrap：对应初始化，启动
• mount：对应挂载渲染
• unmount：对应卸载

其内部是通过 import-html-entry ，来加载子应用，也就是 HTML Entry 的方式，通过设置html作为资源入口，加载远程html 解析DOM，从而获取js、css等静态资源来实现微前端的渲染。

首先，当我们配置子应用的 entry 后，qiankun 会去通过 fetch 获取到子应用的 html 字符串拿到 html 字符串后，会通过一大堆正则去匹配获取 html 中对应的 js（内联、外联）、css（内联、外联）、注释、入口脚本 entry 等等。processTpl 方法会返回我们加载子应用所需要的四个组成部分：

• template：html 模板
• script：js 脚本（内联、外联）
• styles：css 样式表（内联、外联）
• entry：子应用入口 js 脚本文件 然后 会分别去获取外联js，外联css，并进行处理， 总结来讲， css全部处理成内联style，js会被一段匿名eval函数包裹，并且绑定window.proxy对象。具体流程如下

接下来我们看下子应用在基座挂载后的DOM结构，从DOM结构中可以看出，qiankun是以HTML方式嵌入，且外联js也已经被import-html-entry处理。

我们再看下子应用在基座挂载后的CSS，从乾坤注入的注释可以看出，外联css已经被处理成内联css嵌入。