前端微前端架构：大型应用的解法与代价

这种结构带来的问题显而易见：代码库庞大导致构建缓慢，团队协作容易冲突，且任何微小改动都需全量发布，技术栈也被锁定。

落地方案：基于 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',
});

// 启动应用
start();

子应用需要暴露标准生命周期钩子，以 React 为例：

// 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。

/* 使用 CSS Modules 示例 */
.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);
});

技术冷思考

微前端并非银弹。如果只是为了跟风，带来的维护成本可能远超收益。

跨应用状态共享往往比想象中复杂，强行引入 localStorage 或全局 Store 可能导致数据不一致。版本兼容性问题也常引发线上故障，一旦某个子应用崩溃，甚至可能拖垮主应用。

决策前请自问：应用是否真的大到必须拆分？团队是否需要异构技术栈？若答案是否定的，单体架构依然是调试最友好的选择。若决定采用，务必做好规划，选对框架，明确通信与隔离策略，否则很容易掉进更深的坑里。