微前端探索

需要解决的问题

  1. css隔离,js隔离,全局js方法的隔离。
  2. 子应用间的通信,子父应用间的通信。
  3. 路由管理,保活机制,资源加载。
  4. 适配成本,运行性能,白屏(首屏资源加载),多应用激活,是否支持vite

wujie框架

Iframe

创建一个iframe 把子应用的完整路径拼进去,样式隐藏,设置唯一标识符ID,挂载iframe自己的window上面独有的变量。

降级处理子应用,在创建沙盒的时候,需要判断子应用是否需要降级,主要是应对核心用到的几个API,webComponent proxy等。

preloadApp:根绝name判断当前的子应用是否已经存在,如果存在的话不需要load。key是name,value是sandbox沙盒的实例,存在map里。

load的钩子函数,由子应用传入。

sandbox类:创建wujie类的时候需要创建iframe,挂载变量到子应用的iframe.contentWIndow上以及全局的window上。根绝是否降级 进行代理,选择是否使用defineProperties来进行劫持代理还是用proxy进行代理。

importHtml:利用传入的fetch或者window.fetch来对字应用的url的html页面进行请求,拉取到html模版,然后返回传入的plugins中的externalScript externalCss进行返回。

processCssLoader:处理传入的template的css-loader以及去除掉template中包含externalScript的css链接。