前端微前端架构实践：告别单体巨石应用

前端微前端架构实践：告别单体巨石应用

现状痛点

维护一个百万行代码的单体应用是什么体验？构建时间超过十分钟，团队协作困难重重。想改个功能，往往牵一发而动全身，这种'巨石应用'模式在业务快速迭代时显得力不从心。

单体应用的困境

典型的单体结构往往将所有模块强耦合在一起，导致依赖混乱和构建缓慢：

// App.jsx
import React from 'react';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Dashboard from './components/Dashboard';
import Users from './components/Users';
import Products from './components/Products';
import Orders from './components/Orders';
import Settings from './components/Settings';

function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <main>
        <Dashboard />
        <Users />
        <Products />
        <Orders />
        <Settings />
      </main>
    </div>
  );
}
export default App;

把所有东西塞进一个大包里，不仅难以维护，还导致构建效率低下。

解决方案

1. Webpack Module Federation

这是目前 React/Vue 生态中最流行的方案之一。核心思想是将不同应用打包成独立的远程模块，主应用在运行时按需加载。

首先确保使用 Webpack 5 环境。在宿主应用中配置插件，注意 shared 配置，将 React 设为单例可以避免重复加载：

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        dashboard: 'dashboard@http://localhost:3001/remoteEntry.js',
        users: 'users@http://localhost:3002/remoteEntry.js',
        products: 'products@http://localhost:3003/remoteEntry.js',
        orders: 'orders@http://localhost:3004/remoteEntry.js',
        settings: 'settings@http://localhost:3005/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
      },
    }),
  ],
};

远程应用侧只需暴露需要的组件，保持轻量：

// dashboard/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'dashboard',
      filename: 'remoteEntry.js',
      exposes: { './Dashboard': './src/Dashboard' },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
      },
    }),
  ],
};

主机端使用 lazy 动态导入即可，配合 Suspense 处理加载状态：

// App.jsx
import React, { lazy, Suspense } from 'react';
import Header from './components/Header';
import Sidebar from './components/Sidebar';

const Dashboard = lazy(() => import('dashboard/Dashboard'));
const Users = lazy(() => import('users/Users'));
const Products = lazy(() => import('products/Products'));
const Orders = lazy(() => import('orders/Orders'));
const Settings = lazy(() => import('settings/Settings'));

function App() {
  return (
    <div>
      <Header />
      <div>
        <Sidebar />
        <main>
          <Suspense fallback={<div>加载中...</div>}>
            <Dashboard />
            <Users />
            <Products />
            <Orders />
            <Settings />
          </Suspense>
        </main>
      </div>
    </div>
  );
}
export default App;

2. Single-SPA

如果你更倾向于基于路由的隔离，Single-SPA 是个老牌选择。它允许你在同一个 HTML 页面中挂载多个框架（甚至混合 Vue/React）。

主应用负责注册子应用的生命周期，通过路径匹配激活：

// src/registerApplications.js
import { registerApplication, start } from 'single-spa';

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

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

start();

子应用需要导出标准的生命周期钩子，确保卸载时清理资源：

// packages/dashboard/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Dashboard from './Dashboard';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Dashboard,
  errorBoundary(err, info, props) {
    return <div>应用出错了</div>;
  },
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

3. Qiankun

蚂蚁金服开源的 Qiankun 基于 Single-SPA，但封装了沙箱机制，更适合企业级复杂场景，能更好地隔离样式和全局变量。

主应用注册微应用，指定容器和激活规则：

// src/main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'dashboard',
    entry: '//localhost:3001',
    container: '#micro-app-container',
    activeRule: '/dashboard',
  },
  {
    name: 'users',
    entry: '//localhost:3002',
    container: '#micro-app-container',
    activeRule: '/users',
  },
]);

start();

微应用需处理样式隔离和生命周期，注意判断是否被 qiankun 加载：

// packages/dashboard/src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

let instance = null;

function render(props) {
  const { container } = props;
  instance = createApp(App);
  instance.use(router);
  instance.mount(container ? container.querySelector('#app') : '#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('dashboard bootstraped');
}

export async function mount(props) {
  console.log('dashboard mounted', props);
  render(props);
}

export async function unmount() {
  console.log('dashboard unmounted');
  instance.unmount();
  instance = null;
}

总结

微前端不是银弹，但在应对超大型项目时，它能有效降低耦合度，缩短构建时间，让团队协作更加顺畅。根据团队技术栈和业务复杂度选择合适的方案，才是关键。