前端架构

微前端架构主要有哪些实现方式

基于路由的微前端:

通过路由分发将不同子应用分隔在不同路由下,是目前主流的实现方式。有 Single-SPA 及其生态(如 qiankun),它基于路由分发,支持多种前端框架混用,具有良好的应用隔离和生命周期管理。

qiankun 作为 Single-SPA 的封装,提供了更便捷的 API 和沙箱机制,是目前业界使用最广泛的微前端解决方案之一。

Single-SPA官网:

https://github.com/single-spa/single-spa

qiankun官网:

https://qiankun.umijs.org/zh/guide

v8采用的single-spa做的主子应用架构便是基于路由的微前端:

主应用:负责整体布局、路由分发、公共组件和状态管理 子应用:独立开发、构建和部署的业务模块,通过路由分发被主应用加载

注意:公司所用的微前端并非qiankun 的 html entry方式,而是 js entry

基于 Web Components 的微前端:

将子应用打包成 Web Components 组件

基于 iframe 的微前端:

使用 iframe 隔离不同子应用

基于状态管理的微前端:

通过共享状态管理实现应用间通信

运行时沙箱隔离:

通过 JavaScript 沙箱机制隔离子应用

模块联邦

TIP

是一种构建时的模块共享机制,由 Webpack 5 提供。

它通过在构建时动态加载远程模块的方式,实现跨应用的代码共享,可以实现微前端架构,但本质上是一种构建时的模块联邦技术,而不是运行时的微前端实现方式。它允许不同应用在构建时共享代码和依赖,实现真正意义上的独立部署和运行。