首页

微前端是将前端单体应用拆分成一系列小型、独立的子应用，每个子应用都可以独立开发、测试、部署和运行。这些子应用可以独立存在，也可以组合成一个完整的前端应用。

# 组成部分

  • 主应用（Shell）：整个应用的外壳，负责加载和组合各个子应用，并提供整体的导航和布局。

  • 子应用（Micro Frontends）：拆分出的独立的功能单元，每个子应用都有自己的开发团队，可以使用不同的技术栈和框架。

# 核心要点

通信机制 + 沙箱

# 通信机制

微前端的子应用之间需要进行通信，以便在整体上协同工作。通信可以通过以下方式实现：

  • 自定义事件：子应用通过发布和订阅自定义事件的方式进行通信。

  • 共享状态：使用状态管理工具，例如 Redux，将状态共享给其他子应用。

  • 跨域通信：子应用可以通过跨域通信的方式实现数据的交互。

# 优势

  • 团队独立：技术栈自由选择，团队并行开发

  • 独立部署：单个应用更新不影响其他，降低发布风险

  • 路由管理：每个微应用管理自己的路由，避免单体应用路由配置复杂和冲突

  • 易维护：代码库解耦，职责清晰

  • 高扩展：新功能快速接入，支持增量升级

  • 容错性：故障隔离，单点问题不影响整体

# 挑战

  • 技术复杂：架构复杂，调试困难，学习成本高

  • 性能问题：资源重复加载，首屏时间长，内存消耗大

  • 状态管理：跨应用状态同步和通信复杂

  • 隔离问题：样式冲突，第三方库版本冲突

  • 运维成本：部署复杂，监控困难，版本管理复杂

  • 用户体验：可能出现加载闪烁，SEO 不友好

# 实现方案

# 基于路由分发的集成

通过路由规则将不同的路径分配给不同的微前端应用

实现方式：

  • Nginx 路由分发：在服务器层面根据路径转发到不同的微应用

  • 应用层路由劫持：主应用监听路由变化，动态加载对应的微应用

优点：

  • 实现简单，各应用完全独立

  • 天然的应用级别隔离

缺点：

  • 应用间切换可能有白屏

  • 难以实现应用间的实时通信

# iframe

将每个微前端应用嵌入到 iframe 中运行

<iframe src="http://micro-app-1.com" sandbox="allow-scripts"></iframe>
1

优点：

  • 完美的沙箱隔离（JS、CSS、DOM）

  • 实现简单，兼容性好

  • 安全性高

缺点：

  • 用户体验差（刷新、前进后退、URL 同步）

  • 通信复杂（postMessage）

  • SEO 不友好

  • 弹窗定位问题

# Web Components

利用 Web Components 标准（Custom Elements、Shadow DOM）封装微应用

优点：

  • 标准化的组件封装

  • 样式隔离（Shadow DOM）

  • 框架无关

缺点：

  • 浏览器兼容性问题

  • 学习成本较高

  • 生态相对不成熟

# Webpack 5 模块联邦

通过 Webpack 5 的模块联邦功能，实现运行时的模块共享和动态加载

// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        mf1: 'mf1@http://localhost:3001/remoteEntry.js',
      },
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11

优点：

  • 真正的运行时集成

  • 依赖共享，避免重复加载

  • 支持版本管理

缺点：

  • 强依赖 Webpack 5

  • 配置相对复杂

  • 调试困难

# 特定框架

上次更新时间: 2025年09月20日 18:21:06

← rsa 秘钥和公钥 →