Skip to main content

微前端

概览​

微前端是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端解决的问题​

  • 技术栈不同的团队可以同时开发一个应用
  • 每个团队开发的模块都可以独立开发、独立部署
  • 实现增量迁移

如何实现微前端​

将一个应用划分为若干个子应用，将子应用打包成一个个的模块。当路径切换时加载不同的子应用。每个子应用都是独立的。

实现微前端的技术方案​

  • 应用如何拆分？
  • 应用如何通信？
  • 应用之间如何进行隔离？

iframe​

  • 通过 iframe 加载子应用，最简单的方案
  • 可以通过 postMessage 进行通信
  • 沙箱机制自带应用隔离

缺点：

  • 用户体验差

Web Components​

  • 将前端应用分解为自定义的 HTML 元素
  • 基于 CustomEvent 实现通信
  • Shadow DOM 实现应用隔离

缺点：浏览器支持问题、调试困难、修改样式困难

single-spa​

single-spa 通过路由劫持实现应用的加载（采用 SystemJS），提供应用见公共组件加载及公共业务逻辑处理。子应用需要暴露固定的钩子接入协议，如 bootstrap、mount、unmount 等。

  • 基于 props 实现主应用和子应用之间的通信
  • 无沙箱机制，需要自己实现 JS 沙箱和 CSS 沙箱

缺点：

  • 学习成本较高
  • 无沙箱机制
  • 需要对原有等应用进行改造
  • 子应用间相同资源会重复加载

模块联邦​

Module federation 是 Webpack5 的一个特性，通过共享模块来构建微前端。

  • 通过模块联邦将组件进行打包导出使用
  • 共享模块的方式进行通信
  • 无 JS 沙箱和 CSS 沙箱