资源

微前端的那些事儿
https://github.com/phodal/microfrontends

微前端在小米 CRM 系统的实践
https://xiaomi-info.github.io/2020/04/14/fe-microfrontends-practice/
<微前端的那些事儿> 的整理总结

蚂蚁
https://developer.aliyun.com/article/742576
https://zhuanlan.zhihu.com/p/78362028

美团
https://tech.meituan.com/2020/02/27/meituan-waimai-micro-frontends-practice.html

实现方式

  1. 路由分发
  2. 前端微服务化
  3. 微应用
  4. 微件化
  5. iframe
  6. Web Components


微前端 - 图1

微服务化

目前主流的框架有 Single-SPA、qiankun、Mooa，后两者都是基于 Single-SPA 的封装。

Why Not iframe

link

  • url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  • UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..
  • 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。