微前端架构BASE工程

子应用渲染的几种模式

render

• 继承Base应用的组件上下文，所使用的基础依赖比如React，ReactDOM以及组件库都全部来自于Base应用，继承Base应用的组件上下文；
• 子组件需要设置微前端配置microConfig中separate为空；这样主应用在加载子应用index config以及main config的时候就不会创建iframe来加载；
• 优点是能完全使用Base应用所提供的组件以及工具函数；
• 缺点是不可以隔离window全局变量以及样式；
• 子应用在main init函数中通过调用setRender函数来控制渲染内容；

custom

• 设置microConfig 的separate为frame，主应用再加载子应用的index config以及main config的时候创建一个iframe来加载这些脚本；
• 子应用自己挂载；
• 优点是能完全隔离全局变量以及样式；
• 缺点是不能完全使用主应用的所创建的组件以及工具函数，可以使用一些基础的依赖比如React，ReactDOM，Vue等等；组件库不可以共用同一个对象，但是子应用可以自己从Base应用的静态资源中加载一遍组件库依赖；
• 子应用在main init函数中手动挂载内容，比如ReactDOM.createRoot来渲染子应用内容；