micro front end

what

https://micro-frontends.org/

特点

• 独立
• 融合
• 技术栈无关
• 独立
  • js 沙箱
  • 样式隔离
  • 元素隔离
• 应用保活
• 预加载
• 数据通信
• 静态资源补全

Why Not Iframe

https://www.yuque.com/kuitos/gky7yw/gesexv

实现思路

• url change
• WebComponent
• 构建时集成
• 运行时集成
• iframe
• 服务端集成

ModuleFederationPlugin

框架

• https://github.com/web-infra-dev/garfish

web 框架

• umi
• https://github.com/web-infra-dev/modern.js
• nextjs

工具链

• webpack
• rspack
• vite
• parcel
• roolup

https://lerna.js.org/

代码共享

• copy
• npm/cdn
• Monorepo
• micro fe