Micro Frontend

总结一下遇到的微前端问题

qiankun

js沙箱隔离的原因

当子应用A定义了window.a = 1，子应用B定义了window.b = 2的时候，如果不进行环境隔离，会令到子应用B也能读取到window.a变量

三种js沙箱

三种js沙箱通过以下判断来选择

function createSandboxContainer(useLooseSandbox: boolean) {
  let sandbox
  if(window.proxy) {
    sandbox = useLooseSandbox ? 
      new LegacySandbox() :
      new ProxySandbox()
  } else {
    sandbox = new SnapshotSandbox()
  }
}

SnapshotSandbox

LegacySandbox

ProxySandbox

总结

• SnapshotSandbox: 记录window对象，每次unmount都要和微应用的环境进行diff
• LegacySandbox: 在微应用修改window.xxx时直接记录diff，将其用于恢复环境
• ProxySandbox: 为每个子应用分配一个fakeWindow，当子应用操作window时，其实是在fakeWindow上操作

css沙箱隔离

有两种样式隔离模式

strictStyleIsolation严格模式

experimentalStyleIsolation实验模式

qiankun加载子应用原理

使用的是import-html-entry

wujie