于永雨的学习笔记
  • 学海无涯
  • 前端基础
    • HTML
      • 语义化标签
      • script标签中defer和async
      • 本地存储
      • 拖拽
      • Web Workers
      • WebSocket
    • CSS
      • 盒模型和box-sizing
      • BFC(块级格式化上下文)
      • 浮动和清除浮动
      • 伪类和伪元素
      • 2倍图、3倍图
      • flex
      • 水平居中、垂直居中
      • 经典布局
        • 两列布局
        • 三列布局
      • 经典实践
      • CSS样式隔离
      • Less vs Sass
    • JavaScript
      • ES
        • 数据类型
          • 1-string
          • 2-number
          • 3-boolean
          • 4-null
          • 5-undefined
          • 6-symbol
          • 7-object
          • 常见类型判断
          • 浅拷贝、深拷贝
        • 数据集合
          • Array
          • 类数组对象
          • Map、WeakMap
          • Set、WeakSet
          • 常见遍历方式
        • 变量
          • 修饰符
          • 变量提升
        • 函数
          • apply、call、bind
          • new
          • this
          • 箭头函数
          • 闭包
          • 防抖和节流
          • 柯里化
        • 原型
          • 原型链
        • 异步
          • 单线程&事件循环
          • 常见异步
          • Promise
            • all和allSettled
            • race和any
            • resolve和reject
        • 模块化
        • 版本特性一览表
      • DOM
        • DOM事件
        • 事件分类
      • BOM
    • TypeScript
    • 浏览器
      • 页面渲染
      • 重绘和回流
      • 跨域
      • 垃圾回收
      • 取消请求
    • Web API
      • EventSource
      • XMLHttpRequest
      • WebSocket
      • IntersectionObserver
  • 前端框架
    • Vue
      • 2.0
        • 列表渲染的key
        • 生命周期
        • diff算法
      • 3.0
        • 改变
        • provide/inject
        • 组件间可复用逻辑封装
        • diff算法
    • React
      • Component
      • Props
      • State
      • Context
      • Effect
      • Hooks
        • hook依赖列表
        • useMemo
        • useCallback
        • useEffect
      • API
        • memo
      • 子组件的无效渲染
      • 组件在开发模式下渲染两次
    • Vue-Router
    • Taro
    • Qiankun
  • 前端方案
    • 错误上报
    • 性能优化
    • 长列表优化原理
    • H5移动端适配
  • 工程化
    • 前端
      • 防止package-lock.json删除
      • 打包ESM和CommonJS
      • babel
      • webpack
      • pnpm
      • 多包管理
      • vite
      • 各种base
    • 服务端
      • Maven
  • 小程序
    • 小程序历史
    • 双线程架构
    • 生命周期
    • 更新机制
  • 服务端
    • Redis
    • Node.js
      • 核心
      • 进程守护
      • Koa
    • Java
      • 安装与配置
    • Restful API
  • DevOps
    • Nginx
    • Docker
      • 核心概念
      • 基础命令
    • K8s
    • Linux
      • shell及脚本
      • 文件目录操作
      • vi/vim
  • 计算机基础
    • 数据结构
      • 栈(Stack)
      • 队列(Queue)
      • 数组(Array)
      • 链表(Linked List)
      • 树(Tree)
      • 图(Graph)
      • 堆(Heap)
      • 散列表(Hash Table)
    • 算法
      • 查找
      • 排序
  • 计算机网络
    • 基础
    • TCP
      • 建立连接(三次握手)
      • 断开连接(四次挥手)
    • UDP
    • HTTP
      • HTTP/2
      • HTTPS
    • 常见网络攻击
      • XSS
      • CSRF
      • DDos
      • MITM
    • 浏览器缓存
  • 经典面试题
    • 箭头函数this-1
    • 箭头函数this-2
    • 数组转树
    • 控制并发数
    • 动态规划-二维数组全排列
    • 柯里化
Powered by GitBook
On this page
  • 一、主要原理
  • 二、主要架构
  • 三、核心技术点
  • 四、通信方式
  • 五、qiankun VS single-spa
  • 六、实践中的注意点
  1. 前端框架

Qiankun

qiankun原理

PreviousTaroNext前端方案

Last updated 1 year ago

一、主要原理

通过监听路由变化,动态装载、销毁子应用。

qiankun是对的封装,在其基础上主要做了两方面的扩展

  • 子应用的加载方式:只需配置子应用入口,自动解析并加载其资源

  • 沙箱隔离:对JS和样式都提供了隔离机制

二、主要架构

  • 基座:负责子应用的注册、卸载、通信

  • 子应用

三、核心技术点

1、子应用加载

借助import-html-entry从子应用的首页(可以理解成一个静态资源表)解析出对应的静态资源进行请求,无需用户手动配置。

2、JS隔离

  1. 代理沙箱(Proxy Sandbox)

它将window上的所有属性遍历拷贝生成一个新的fakeWindow对象,紧接着使用proxy代理这个fakeWindow,用户对window操作全部被拦截下来,只作用于在这个fakeWindow之上。每个子应用分配一个fakeWindow。

  1. 快照沙箱(Snapshot Sandbox)

  • windowSnapshot: window对象的浅拷贝

  • modifyPropsMap :存储子应用的修改

子应用mount时,先将window存储到快照windowSnapshot上,然后将子应用之前的修改modifyPropsMap(如果有的话)应用到window上;

子应用unmount时,先将当前window和快照windowSnapshot做diff,将diff结果存储到modifyPropsMap上,然后用快照windowSnapshot恢复window;

  1. 遗留沙箱(Legacy Sandbox)

3、CSS隔离

(都没有完美解决弹窗挂在到body下的问题,解决方法:子应用自行隔离)

  • shadow DOM

  • Scoped CSS

四、通信方式

基座 <=>子应用,发布订阅模式实现

  • onGlobalStateChange()

  • setGlobalState()

  • offGlobalStateChange()

五、qiankun VS single-spa

优化点
single-spa
qiankun

子应用加载方式

用户自行配置子应用的加载方式和具体资源

用户仅配置子应用入口

应用间的隔离

无隔离机制

内置了JS和CSS隔离

应用间的通信

基座通过customProps向子应用传递静态参数

基座和子应用通过发布订阅进行信息通信

六、实践中的注意点

1.本地调试

接入多个子应用时,将需要调试的那个子应用本地启动,接入链接设置成本地url,其他设置成dev环境。可以考虑用vite的env来管理接入链接。

2.样式隔离

自身提供的两种隔离方案(shadowDOM、类Scoped CSS),无法解决一些特定场景,比如一些第三方库将弹窗等挂载到子应用根结点外(一般都是body下),弹窗内的样式没法从架构层面做隔离。

3.共享依赖

比较难抽取,尤其是各个子应用依赖的同一个第三方资源的版本再有区别的话,更增加了资源抽离的难度

参考:

样式隔离问题:

single-spa
https://qiankun.umijs.org/zh
https://single-spa.js.org/
https://juejin.cn/post/7184419253087535165
https://juejin.cn/post/7197608023429922871
https://juejin.cn/post/7148075486403362846