前端微前端：大型应用的模块化解决方案

前端微前端：大型应用的模块化解决方案

常见误区

前端微前端并非过度设计。

'我的应用不大，不需要微前端'——结果应用越来越大，维护困难； '微前端太复杂了，不如一个大单体'——结果团队协作困难，部署冲突； '我用 iframe 就够了'——结果性能差，用户体验差。

微前端不是银弹，但对于大型应用来说，它是一个有效的解决方案。

为什么需要微前端？

• 团队协作：不同团队可以独立开发和部署
• 技术栈灵活：不同微前端可以使用不同的技术栈
• 独立部署：单个微前端可以独立部署，不影响其他部分
• 可扩展性：可以轻松添加新的微前端

反面教材

<!-- 反面教材：使用 iframe 实现微前端 -->
<!DOCTYPE html>
<html>
<head>
<title>主应用</title>
</head>
<body>
<h1>主应用</h1>
<!-- 使用 iframe 加载微前端 -->
<iframe src="https://micro-app1.example.com"></iframe>
<iframe src="https://micro-app2.example.com"></iframe>
</body>
</html>

正确的做法

使用 Module Federation

// 主应用 webpack 配置
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        microApp1: 'microApp1@http://localhost:3001/remoteEntry.js',
        microApp2: 'microApp2@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

// 微应用 1 webpack 配置
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'microApp1',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

// 主应用中使用微应用
import React, { lazy, Suspense } from 'react';

// 懒加载微应用
const MicroApp1 = lazy(() => import('microApp1/App'));
const MicroApp2 = lazy(() => import('microApp2/App'));

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>加载中...</div>}>
        <MicroApp1 />
        <MicroApp2 />
      </Suspense>
    </div>
  );
}

使用 Single-SPA

// 主应用配置
import { registerApplication, start } from 'single-spa';

// 注册微应用
registerApplication({
  name: 'micro-app-1',
  app: () => import('@org/micro-app-1'),
  activeWhen: (location) => location.pathname.startsWith('/micro-app-1'),
  customProps: { authToken: 'token' }
});

registerApplication({
  name: 'micro-app-2',
  app: () => import('@org/micro-app-2'),
  activeWhen: (location) => location.pathname.startsWith('/micro-app-2')
});

// 启动应用
start();

// 微应用配置
import { mountRootParcel } from 'single-spa';

// 导出生命周期函数
export const bootstrap = async () => {
  console.log('微应用 1 启动');
};

export const mount = async (props) => {
  console.log('微应用 1 挂载', props);
  // 挂载应用
  const el = document.getElementById('micro-app-1');
  // 渲染应用
  return Promise.resolve();
};

export const unmount = async () => {
  console.log('微应用 1 卸载');
  // 卸载应用
  return Promise.resolve();
};

方案总结

建议使用 Module Federation 或 Single-SPA 等专业方案，而非简单地使用 iframe。

微前端不是为了拆分而拆分，而是为了解决大型应用的维护和协作问题。它需要合理的架构设计和团队协作。

核心要点

• Module Federation：Webpack 5 的内置功能，支持模块共享
• Single-SPA：最早的微前端框架，支持多种技术栈
• Qiankun：基于 Single-SPA 的微前端方案，提供了更多功能
• 独立部署：每个微前端可以独立构建和部署
• 技术栈灵活：不同微前端可以使用不同的技术栈
• 模块共享：共享公共依赖，减少重复加载
• 路由管理：统一的路由管理，实现微前端间的导航
• 状态管理：跨微前端的状态管理方案

微前端让大型应用的开发和维护变得更加简单。