概念

“微前端”一词最早于2016年底在ThoughtWorks Technology Radar中提出。它将微服务的概念扩展到了前端。将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署、独立运行。

不是单纯的前端框架或者工具,而是一套架构体系。可以有多种落地方案。

微前端背后的思想是将Web应用视为由独立团队拥有的功能的组合。每个团队都有自己关心和专长的不同业务或任务领域。一个团队具有跨职能,从数据库到用户界面,端到端地开发其功能。 (先拆,再合。)

端到端的微前端

解决的问题

  1. 拆分和细化:单页面应用(SPA)是非常流行的项目形态之一,而随着时间的推移以及应用功能的丰富,单页应用变得不再单一而是越来越庞大也越来越难以维护。
    微前端的意义就是将这些庞大应用进行拆分,并随之解耦,每个部分可以单独进行维护和部署,提升效率。

  2. 整合历史系统:一些老框架类似(Backbone.js,Angular.js 1)的B端管理系统,要结合到新框架中但又没有时间和精力重写。
    微前端可以将这些系统进行整合,在基本不修改原逻辑的同时来兼容新老两套系统并行运行。

核心价值

不受技术影响。

独立开发、独立部署。

增量升级。我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

独立运行时。每个微应用之间状态隔离,运行时状态不共享

– qiankun

落地

组合式应用路由方案,核心是“主从”思想,包括:
一个基座应用(通常是一个前端SPA项目,负责应用注册,路由映射,消息下发)
若干个微应用(不限于技术栈,即使脱离基座应用也可以单独访问)。

组合式应用路由方案

相关落地方案

2018年 Single-SPA 诞生了,Single-SPA是一个用于前端微服务化的 JavaScript 前端解决方案(本身没有处理样式隔离,js执行隔离),实现了路由劫持和应用加载。

2019年 qiankun 基于 Single-SPA 提供了更加开箱即用的 API 做到了技术栈无关、并且接入简单。蚂蚁内部200+线上项目使用中。
(介入协议:子应用在打包的时候要提供bootstrap、mount、unmount方法,让父应用调用。)

应用之间通信

  • 基于 URL
  • 基于 CustomEvent
  • 基于 props
  • 基于 全局变量、Redux

iframe不香吗

  • iframe 中的子应用切换路由时用户刷新页面会丢失状态
  • localStorage
  • 通信不方便
  • 需要设置高度,动态布局繁琐

qiankun

  • bootstrap、mount、unmount
  • 支持子应用并行
  • 父应用通过 fetch 获取子应用资源
  • 支持js沙箱环境(js隔离)
  • css隔离(子父在默认sandbox中需要设定prefix)
  • 按需加载
  • 公共依赖加载
  • 父子应用通信机制
  • 子应用嵌套

代码演示