背景

大前端时代下，大型单体架构模型面临三大难题：扩展性差、团队维护成本大（耦合度与复杂性）、编译部署效率低下

概念

微前端是一种架构风格，其中众多独立交付的前端应用组合成一个大型整体

类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

与业务组件/widget区别

部署方式

价值

  • 工程价值
    • 优点
      • 独立开发和部署
      • 大型单页应用无限扩展
      • 不限技术栈
      • 多团队协作
    • 缺点
      • 体验有折损（子应用异步加载不如SPA如丝般顺畅）
      • 维护成本高（子应用拆太多，多个仓库，共用组件复用都是问题）
      • 管理版本复杂、依赖复杂
      • 开发体验不太友好（需要不同工程切换以及启动多个子系统）
      • 粒度不宜太小（跟通用组件区分好）
  • 业务价值
    • 产品“原子化”（根据业务自由的编排组合）：扩展性、组合性、局部迭代
    • 解决能力输出最后一公里的价值（使得别人集成你的能力变得简单）
    • 云生态的新物种 —– 微应用

现状

业界方案

  • single-spa
  • Mooa（适用于NG的微前端框架，基于single-spa）
  • Ara Framework（基于airbnb服务端渲染的微前端框架）
  • Ali
    • baba
      • WidgetJS（轻量级的微前端方案，不过文档不友好）
      • icestark（自主研发，较single-spa更简单轻量级的微前端框架）
      • qiankun（基于single-spa的框架无关的微前端框架）
    • mama
      • Magix（通过特有的vframe(类似iframe的思路)帮你把页面按区块化拆分）

起飞资料