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

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

为什么需要微前端？

对于大型前端应用，单体架构往往面临维护困难和团队协作冲突的问题。微前端架构提供以下优势：

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

常见误区

简单使用 iframe 加载子应用存在性能差、用户体验不佳等问题，并非理想的微前端方案。

推荐实现方案

1. Webpack Module Federation

利用 Webpack 5 内置功能实现模块共享和远程加载。

主应用配置：

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' }
      }
    })
  ]
};

微应用配置：

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>
  );
}

2. 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('微应用启动'); };
export const mount = async (props) => {
  const el = document.getElementById('micro-app-1');
  // 渲染应用逻辑
  return Promise.resolve();
};
export const unmount = async () => { return Promise.resolve(); };

总结

微前端不是银弹，而是解决大型应用维护和协作问题的有效手段。核心要点包括：

• Module Federation：Webpack 5 内置功能，支持模块共享。
• Single-SPA：支持多种技术栈的早期框架。
• Qiankun：基于 Single-SPA 的增强方案。
• 独立部署：每个微前端可独立构建和部署。
• 模块共享：共享公共依赖，减少重复加载。
• 路由与状态管理：统一导航与跨应用状态同步。