微前端

一、是什么

微前端是将前端应用拆分为多个独立部署、独立运行的子应用。

类似于后端微服务。

二、为什么

适用于：

• 大型团队协作
• 多业务线系统
• 技术栈不统一

三、实现方案

1. iframe（最简单）

• 隔离强
• 通信困难

2. single-spa

• 路由级拆分
• 多框架支持

3. Module Federation

// webpack.config.js
new ModuleFederationPlugin({
  name: 'app1',
  remotes: {
    app2: 'app2@http://localhost:3002/remoteEntry.js',
  },
});

👉 主流方案（Webpack 5）

4. qiankun

• 基于 single-spa
• 更易用
• 阿里开源

四、核心问题

• 子应用通信
• 样式隔离
• JS 沙箱
• 路由同步

五、最佳实践

• 控制拆分粒度（不要过细）
• 建立统一基建（权限 / 登录 / 通信）
• 优先 Module Federation