本文目录

[[toc]]

术语

• master: 主应用，对外提供的入口，负责加载 service 。
• service: 子应用，用于嵌套到 master 中一起运行，也支持自治。

微前端实践中的具体问题

路由

由于接入的服务可能很多，需要对 service 进行 懒加载 / 懒初始化

路由表存放到 master 还是 service ？

如果存放到 master ， service 就无法脱离 master 单独启动了，除非再冗余一套路由表。

如果存放到 service ，那就需要在 master 中，那么 master 中就需要获取 service 的路由表，并注册该路由表到全局。

考虑 service 需要自治，所以路由表会存放到 service 中，再由 master 初始化的时候加载

master 加载 service 路由表的时候，是否需要添加 route 前缀

如果不添加前缀，在 service 页面直接刷新，会出现 master 初始化完成后，才初始化 service 的情况。

此时由于 service 中的路由还未初始化，会出现 404 的情况。

如果添加前缀，业务中存在根据 URL 鉴权的情况，如果修改 URL ，则需要在鉴权环节统一移除掉前缀，避免匹配失败。

iframe 的缺点

• url 不同步:
  • 浏览器一刷新， iframe url 状态丢失。
  • 前进后退按钮无法使用。
• UI 不同步: DOM 不能共享，导致全局弹窗、遮罩、居中等交互难以实现。
• 上下文完全隔离:
  • 内存变量不共享，导致需要额外处理通信、数据同步等需求。
  • cookie 不共享，需要把主站 cookie 透传给不同的子应用实现鉴权。
• 加载速度慢: 每次子应用都需要重新初始化、重新加载资源，非常慢。