Web Components 的微前端方案
相比 iframe 优点:
- 性能好
- 元素 fixed 定位正常,不会被裁剪
- 没有跨域,web storage 方便共享,不需要和宿主应用交互/通信 // 但数据混乱
- 共享地址栏
下面是缺点/限制:
- 能影响宿主环境的性能 // 单进程单线程
- 宿主环境的安全得不到保证 // 通过有限的隔离以及规范约束
- 子应用不能正常使用 CSS rem/vw/vh/vmax/vmin 单位,一些 css 不会生效
- 需要严格遵守命名规范来避免自定义元素重名
全局对象隔离? // 在 Realms/Sandbox 中执行 js
子 App 自定义元素不能使用构造函数 // 使用 umd 加载依赖
DOM 操作
只允许注册指定前缀的自定义元素
禁止其他操作
Node.ownerDocument ?
全局事件监听
拦截,替换,适配
子应用错误处理 // 需要重新处理错误栈以便 SourceMap 还原
定义规范/样板库:
- 父应用中的子应用注册表 // 记录路由,子应用资源地址,repo 地址等
- 库共享 // React/Vue/Gem
- 埋点
- 性能分析/报告
- 错误报告
- 消息/通信