Web Components 的微前端方案


相比 iframe 优点:
  1. 性能好
  2. 元素 fixed 定位正常,不会被裁剪
  3. 没有跨域,web storage 方便共享,不需要和宿主应用交互/通信 // 但数据混乱
  4. 共享地址栏
下面是缺点/限制:
  1. 能影响宿主环境的性能 // 单进程单线程
  2. 宿主环境的安全得不到保证 // 通过有限的隔离以及规范约束
  3. 子应用不能正常使用 CSS rem/vw/vh/vmax/vmin 单位,一些 css 不会生效
  4. 需要严格遵守命名规范来避免自定义元素重名

全局对象隔离? // 在 Realms/Sandbox 中执行 js
子 App 自定义元素不能使用构造函数 // 使用 umd 加载依赖
DOM 操作
只允许注册指定前缀的自定义元素
禁止其他操作
Node.ownerDocument ?
全局事件监听
拦截,替换,适配
子应用错误处理 // 需要重新处理错误栈以便 SourceMap 还原

定义规范/样板库:
  • 父应用中的子应用注册表 // 记录路由,子应用资源地址,repo 地址等
  • 库共享 // React/Vue/Gem
  • 埋点
  • 性能分析/报告
  • 错误报告
  • 消息/通信