前端微前端架构：大型项目的解药还是新坑？

这种结构下，所有代码在一个仓库里，代码量膨胀后维护极难。团队协作容易冲突，且任何微小改动都需要全量发布，技术栈也被锁定。

微前端实战：Single-SPA

解决之道在于将应用拆分。以 Single-SPA 为例，主应用负责路由分发，子应用按需加载。

主应用配置

这里的关键是注册应用并定义激活条件，确保路由匹配时只加载对应模块。

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

// 注册微前端应用
registerApplication({
  name: 'header',
  app: () => import('@org/header'),
  activeWhen: (location) => true,
});

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

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

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

// 启动应用
start();

子应用生命周期

每个子应用必须暴露 bootstrap、mount、unmount 三个生命周期钩子，这是框架通信的基础。

// dashboard 微前端示例
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';

function Dashboard() {
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>
      <p>Welcome to your dashboard!</p>
    </div>
  );
}

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Dashboard,
  errorBoundary(err, info, props) {
    return <div>An error occurred: {err.message}</div>;
  },
});

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

样式与通信

样式隔离通常依赖 CSS Modules 或 Shadow DOM，避免全局污染。通信则需谨慎，推荐使用自定义事件或全局状态管理。

/* 样式隔离示例 */
.dashboard {
  background-color: #f5f5f5;
  padding: 20px;
}

// 跨应用通信：自定义事件
// 发送消息
function sendMessage(message) {
  window.dispatchEvent(new CustomEvent('micro-frontend-message', { detail: message }));
}

// 接收消息
window.addEventListener('micro-frontend-message', (event) => {
  const message = event.detail;
  console.log('Received message:', message);
});

老手的忠告

微前端确实能缓解大型应用的压力，但它引入了新的复杂度。共享状态管理可能变得棘手，版本兼容性也是个大坑。一旦某个子应用崩溃，整个宿主应用都可能受影响。

在决定采用之前，务必自问：我的应用真的够大吗？团队是否真的需要技术栈的多样性？如果答案是否定的，单体应用依然是调试最友好的选择。

若必须上微前端，请做好规划：选对框架，定好通信协议，落实样式隔离。否则，你只是从一个坑跳进了另一个更深的坑。