微前端架构设计——模块化前端系统构建

微前端架构正在改变大型前端应用的构建方式，通过将复杂的前端系统拆分为更小、更易于管理的模块，实现更好的可维护性和团队协作效率。

介绍

  随着Web应用规模的不断扩大和团队规模的增长，传统的单体前端架构逐渐暴露出开发效率低下、技术栈锁定、部署困难等问题。微前端架构作为一种新的前端架构模式，借鉴了微服务的理念，将大型前端应用拆分为多个小型、自治的前端应用，每个应用可以独立开发、测试、部署和维护。

微前端架构核心概念

基本定义

微前端是一种架构风格，将前端应用划分为多个独立交付的模块，每个模块可以由不同的团队独立开发、部署和维护。

• 核心特征：
  • 技术栈无关：不同团队可以选择最适合的技术栈
  • 独立部署：每个微应用可以独立部署，降低发布风险
  • 增量升级：支持渐进式迁移和重构
  • 团队自治：每个团队专注于自己的业务领域

// 微前端应用注册示例
const microApps = [
  {
    name: 'user-center', // 微应用名称
    entry: '//localhost:8081', // 微应用入口地址
    container: '#subapp-viewport', // 微应用挂载节点
    activeRule: '/user', // 激活规则
    props: { // 传递给微应用的属性
      userName: 'John'
    }
  },
  {
    name: 'order-center',
    entry: '//localhost:8082',
    container: '#subapp-viewport',
    activeRule: '/order'
  },
  {
    name: 'payment-center',
    entry: '//localhost:8083',
    container: '#subapp-viewport',
    activeRule: '/payment'
  }
];

架构组成要素

// 微前端架构核心组件
class MicroFrontendSystem {
  constructor() {
    this.apps = []; // 注册的微应用
    this.currentApp = null; // 当前激活的微应用
    this.globalState = {}; // 全局状态管理
    this.eventBus = new EventBus(); // 事件总线
  }

  registerApp(appConfig) {
    // 注册微应用
    this.apps.push({
      ...appConfig,
      bootstrap: () => {}, // 初始化函数
      mount: () => {}, // 挂载函数
      unmount: () => {}, // 卸载函数
    });
  }

  activateApp(appName) {
    // 激活微应用
    const app = this.apps.find(a => a.name === appName);
    if (app && this.currentApp !== app) {
      this.unmountCurrentApp();
      this.mountApp(app);
    }
  }

  mountApp(app) {
    // 挂载微应用
    return app.mount();
  }

  unmountCurrentApp() {
    // 卸载当前微应用
    if (this.currentApp) {
      return this.currentApp.unmount();
    }
  }
}

微前端实现方案

1. Single SPA 方案

Single SPA是最早的微前端框架之一，提供了基础的生命周期管理。

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

// 注册微应用
registerApplication({
  name: '@micro/user',
  app: () => System.import('@micro/user'),
  activeWhen: ['/user'],
  customProps: {
    domElement: document.getElementById('user-container')
  }
});

registerApplication({
  name: '@micro/order',
  app: () => System.import('@micro/order'),
  activeWhen: ['/order']
});

// 启动Single SPA
start();

// 微应用配置 - micro-user.js
import { mountRootParcel, registerApplication } from 'single-spa';

const lifecycles = {
  async bootstrap() {
    console.log('User app bootstrapping...');
    return Promise.resolve();
  },

  async mount(props) {
    console.log('User app mounting...', props);

    // 挂载实际的React/Vue应用
    const { mount } = await import('./app');
    return mount(props);
  },

  async unmount(props) {
    console.log('User app unmounting...', props);

    // 卸载实际的React/Vue应用
    const { unmount } = await import('./app');
    return unmount(props);
  }
};

export const { bootstrap, mount, unmount } = lifecycles;

2. Qiankun 方案

Qiankun是蚂蚁金服开源的微前端解决方案，提供了沙箱、样式隔离等功能。

// 主应用 - main.js
import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
  {
    name: 'react16',
    entry: '//localhost:3001',
    container: '#subapp-viewport',
    activeRule: location => location.pathname.startsWith('/app1'),
    props: {
      // 主应用传递给微应用的属性
      message: 'Hello from main app'
    }
  },
  {
    name: 'vue3',
    entry: {
      scripts: ['//localhost:3002/main.js'],
      styles: ['//localhost:3002/main.css']
    },
    container: '#subapp-viewport',
    activeRule: '/app2'
  }
]);

// 启动微前端应用
start({
  prefetch: true, // 预加载微应用
  sandbox: {
    strictStyleIsolation: true, // 严格的样式隔离
    experimentalStyleIsolation: true // 实验性样式隔离
  },
  singular: true // 是否限制一个微应用运行
});

// 微应用入口 - micro-app.js
// 微应用需要导出生命周期函数
export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  console.log('react app mount', props);

  // 接收来自主应用的属性
  const { container, message } = props;

  // 创建应用根节点
  const rootContainer = container ? container.querySelector('#root') : document.getElementById('root');

  // 挂载React应用
  ReactDOM.render(<App />, rootContainer);
}

export async function unmount(props) {
  console.log('react app unmount', props);

  const { container } = props;
  const rootContainer = container ? container.querySelector('#root') : document.getElementById('root');

  // 卸载React应用
  ReactDOM.unmountComponentAtNode(rootContainer);
}

// 本地开发时的默认导出
if (!window.__POWERED_BY_QIANKUN__) {
  mount();
}

3. Module Federation 方案

Webpack 5的Module Federation提供了原生的微前端支持。

// 主应用 - webpack.config.js
const { ModuleFederationPlugin } = require('@module-federation/enhanced');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      remotes: {
        user_app: 'user_app@//localhost:3001/remoteEntry.js',
        order_app: 'order_app@//localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

// 主应用使用微应用组件
// App.js
import { lazy, Suspense } from 'react';

// 动态导入远程组件
const UserApp = lazy(() => import('user_app/UserComponent'));
const OrderApp = lazy(() => import('order_app/OrderComponent'));

function App() {
  return (
    <div>
      <header>Host Application</header>

      <main>
        <Suspense fallback={<div>Loading...</div>}>
          <UserApp />
          <OrderApp />
        </Suspense>
      </main>
    </div>
  );
}

export default App;

// 微应用 - webpack.config.js
const { ModuleFederationPlugin } = require('@module-federation/enhanced');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'user_app',
      filename: 'remoteEntry.js',
      exposes: {
        './UserComponent': './src/UserComponent',
        './UserService': './src/UserService'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

状态管理与通信

全局状态管理

// 微前端状态管理解决方案
class GlobalState {
  constructor() {
    this.state = {};
    this.listeners = new Map();
    this.microApps = new Map();
  }

  // 注册微应用
  registerMicroApp(appName, app) {
    this.microApps.set(appName, app);
  }

  // 设置全局状态
  setState(key, value) {
    const oldValue = this.state[key];
    this.state[key] = value;

    // 通知监听器状态变化
    const listeners = this.listeners.get(key) || [];
    listeners.forEach(listener => {
      listener(value, oldValue);
    });
  }

  // 获取全局状态
  getState(key) {
    return this.state[key];
  }

  // 订阅状态变化
  subscribe(key, callback) {
    if (!this.listeners.has(key)) {
      this.listeners.set(key, []);
    }
    this.listeners.get(key).push(callback);

    // 返回取消订阅函数
    return () => {
      const listeners = this.listeners.get(key) || [];
      const index = listeners.indexOf(callback);
      if (index > -1) {
        listeners.splice(index, 1);
      }
    };
  }

  // 微应用间通信
  sendMessage(toApp, message) {
    const app = this.microApps.get(toApp);
    if (app && typeof app.receiveMessage === 'function') {
      app.receiveMessage(message);
    }
  }
}

// 全局状态实例
const globalState = new GlobalState();

// 主应用使用示例
function MainApp() {
  const [userInfo, setUserInfo] = useState(globalState.getState('user'));

  useEffect(() => {
    const unsubscribe = globalState.subscribe('user', setUserInfo);
    return unsubscribe;
  }, []);

  return (
    <div>
      <header>
        <span>Welcome, {userInfo?.name || 'Guest'}</span>
      </header>
      <div id="micro-portal"></div>
    </div>
  );
}

微应用间通信

// 事件总线实现
class EventBus {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }

  off(event, callback) {
    if (this.events[event]) {
      const index = this.events[event].indexOf(callback);
      if (index > -1) {
        this.events[event].splice(index, 1);
      }
    }
  }
}

// 使用事件总线进行通信
const eventBus = new EventBus();

// 用户中心微应用
class UserCenter {
  constructor() {
    this.initEventListeners();
  }

  initEventListeners() {
    // 监听订单创建事件
    eventBus.on('ORDER_CREATED', (orderData) => {
      this.updateUserStats(orderData);
    });

    // 监听支付完成事件
    eventBus.on('PAYMENT_COMPLETED', (paymentData) => {
      this.updatePaymentHistory(paymentData);
    });
  }

  notifyOrderCreated(order) {
    // 通知其他微应用订单已创建
    eventBus.emit('ORDER_CREATED', order);
  }
}

// 订单中心微应用
class OrderCenter {
  constructor() {
    this.initEventListeners();
  }

  initEventListeners() {
    // 监听用户信息变化
    eventBus.on('USER_INFO_UPDATED', (userInfo) => {
      this.refreshOrderList(userInfo.id);
    });
  }

  createOrder(orderData) {
    // 创建订单逻辑
    const order = this.api.createOrder(orderData);

    // 通知用户中心订单已创建
    eventBus.emit('ORDER_CREATED', order);

    return order;
  }
}

路由管理

统一路由协调

// 微前端路由协调器
class MicroFrontendRouter {
  constructor() {
    this.apps = new Map();
    this.currentApp = null;
    this.router = null;
  }

  registerApp(name, config) {
    this.apps.set(name, {
      ...config,
      isActive: false
    });
  }

  initRouter(historyAdapter) {
    this.router = historyAdapter;

    // 监听路由变化
    this.router.listen(this.handleRouteChange.bind(this));
  }

  handleRouteChange(location) {
    // 确定哪个微应用应该被激活
    const targetApp = this.findTargetApp(location.pathname);

    if (targetApp && targetApp.name !== this.currentApp?.name) {
      this.switchApp(targetApp.name);
    }
  }

  findTargetApp(pathname) {
    for (const [name, config] of this.apps.entries()) {
      if (pathname.startsWith(config.activeRule) ||
          (config.matchRule && config.matchRule.test(pathname))) {
        return { name, ...config };
      }
    }
    return null;
  }

  async switchApp(targetAppName) {
    // 卸载当前微应用
    if (this.currentApp) {
      await this.currentApp.unmount();
      this.currentApp.isActive = false;
    }

    // 激活新微应用
    const targetApp = this.apps.get(targetAppName);
    if (targetApp) {
      await targetApp.mount();
      targetApp.isActive = true;
      this.currentApp = targetApp;
    }
  }

  // 微应用间导航
  navigateTo(appName, path) {
    const app = this.apps.get(appName);
    if (app) {
      this.router.push(`${app.activeRule}${path}`);
    }
  }
}

// React Router集成示例
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';

function MicroFrontendRouterIntegration() {
  const location = useLocation();

  useEffect(() => {
    // 通知微前端系统路由变化
    microFrontendSystem.handleRouteChange(location);
  }, [location]);

  return (
    <Routes>
      <Route path="/user/*" element={<MicroAppContainer name="user-center" />} />
      <Route path="/order/*" element={<MicroAppContainer name="order-center" />} />
      <Route path="/payment/*" element={<MicroAppContainer name="payment-center" />} />
    </Routes>
  );
}

样式与资源隔离

样式隔离解决方案

/* 基于CSS Custom Properties的主题管理 */
:root {
  /* 主题变量 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;

  /* 组件样式变量 */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-color: white;
  --btn-border-radius: 4px;
}

/* 微应用样式封装 */
.user-center-app {
  --btn-primary-bg: #007bff;
  --btn-primary-color: white;

  /* 局部样式 */
  font-family: 'Arial', sans-serif;
}

.order-center-app {
  --btn-primary-bg: #28a745;
  --btn-primary-color: white;

  /* 局部样式 */
  font-family: 'Helvetica', sans-serif;
}

// 动态样式注入
class StyleManager {
  constructor() {
    this.styles = new Map();
    this.scopeStyles = new Map();
  }

  // 注入微应用样式
  injectAppStyles(appName, styles, scopeId) {
    const scopedStyles = this.addScope(styles, scopeId);
    this.styles.set(appName, scopedStyles);

    const styleElement = document.createElement('style');
    styleElement.id = `micro-app-${appName}-styles`;
    styleElement.textContent = scopedStyles;

    document.head.appendChild(styleElement);
  }

  // 添加CSS作用域
  addScope(css, scopeId) {
    // 使用CSS类名作用域
    return css.replace(/([^{}])\s*{/g, `$1[${scopeId}] {`);
  }

  // 移除微应用样式
  removeAppStyles(appName) {
    const styleElement = document.getElementById(`micro-app-${appName}-styles`);
    if (styleElement) {
      styleElement.remove();
    }
    this.styles.delete(appName);
  }

  // 预处理器 - 添加微应用标识
  preprocessCSS(css, appId) {
    // 使用postcss或其他CSS预处理器添加作用域
    return css.replace(/([^{]*){/g, (match, selectors) => {
      const scopedSelectors = selectors.trim()
        .split(/\s*,\s*/)
        .map(selector => `[data-micro-app="${appId}"] ${selector.trim()}`)
        .join(', ');
      return `${scopedSelectors} {`;
    });
  }
}

性能优化

懒加载与预加载

// 微应用资源管理器
class ResourceLoader {
  constructor() {
    this.loadedApps = new Set();
    this.loadingApps = new Map();
    this.preloadedApps = new Set();
  }

  // 动态加载微应用
  async loadApp(appName, appConfig) {
    if (this.loadedApps.has(appName)) {
      return this.getAppInstance(appName);
    }

    if (this.loadingApps.has(appName)) {
      return this.loadingApps.get(appName);
    }

    const loadPromise = this.fetchAndInitializeApp(appConfig);
    this.loadingApps.set(appName, loadPromise);

    try {
      const appInstance = await loadPromise;
      this.loadedApps.add(appName);
      this.loadingApps.delete(appName);
      return appInstance;
    } catch (error) {
      this.loadingApps.delete(appName);
      throw error;
    }
  }

  async fetchAndInitializeApp(appConfig) {
    // 加载微应用入口脚本
    const script = document.createElement('script');
    script.src = appConfig.entry;
    script.async = true;

    return new Promise((resolve, reject) => {
      script.onload = () => {
        // 初始化微应用实例
        const appInstance = window[`__MICRO_APP_${appConfig.name}`];
        if (appInstance) {
          resolve(appInstance);
        } else {
          reject(new Error(`Micro app ${appConfig.name} initialization failed`));
        }
      };
      script.onerror = () => {
        reject(new Error(`Failed to load micro app: ${appConfig.entry}`));
      };
      document.head.appendChild(script);
    });
  }

  // 预加载策略
  async preloadApp(appName) {
    if (this.preloadedApps.has(appName)) return;

    try {
      // 预加载但不初始化
      await fetch(this.getAppEntryUrl(appName), {
        method: 'HEAD', // 只获取头部信息
      });
      this.preloadedApps.add(appName);
    } catch (error) {
      console.warn(`Failed to preload app ${appName}:`, error);
    }
  }

  // 智能预加载 - 基于用户行为预测
  setupPredictiveLoading() {
    // 监听用户行为
    document.addEventListener('mouseover', (e) => {
      const navLink = e.target.closest('[data-micro-app]');
      if (navLink) {
        const appName = navLink.dataset.microApp;
        setTimeout(() => this.preloadApp(appName), 100); // 鼠标悬停100ms后预加载
      }
    });

    // 基于路径模式预加载
    window.addEventListener('popstate', (e) => {
      const currentPath = location.pathname;
      const nextApps = this.predictNextApps(currentPath);
      nextApps.forEach(app => this.preloadApp(app));
    });
  }

  predictNextApps(currentPath) {
    // 简单的路径预测逻辑
    if (currentPath.startsWith('/user')) {
      return ['order-center', 'payment-center'];
    } else if (currentPath.startsWith('/order')) {
      return ['payment-center', 'user-center'];
    }
    return [];
  }
}

缓存策略

// 微前端缓存管理
class MicroFrontendCache {
  constructor() {
    this.appCache = new Map(); // 微应用实例缓存
    this.assetCache = new Map(); // 静态资源缓存
    this.dataCache = new Map(); // 数据缓存
  }

  // 缓存微应用实例
  cacheAppInstance(appName, instance, ttl = 5 * 60 * 1000) { // 5分钟过期
    this.appCache.set(appName, {
      instance,
      timestamp: Date.now(),
      ttl
    });
  }

  // 获取缓存的微应用实例
  getCachedApp(appName) {
    const cached = this.appCache.get(appName);
    if (cached && Date.now() - cached.timestamp < cached.ttl) {
      return cached.instance;
    }
    // 清除过期缓存
    this.appCache.delete(appName);
    return null;
  }

  // 缓存静态资源
  async cacheAsset(url, assetType = 'script') {
    if (this.assetCache.has(url)) {
      return this.assetCache.get(url);
    }

    let asset;
    if (assetType === 'script') {
      asset = await this.loadScript(url);
    } else if (assetType === 'style') {
      asset = await this.loadStylesheet(url);
    }

    this.assetCache.set(url, {
      asset,
      timestamp: Date.now(),
      etag: this.calculateETag(asset) // 简单的ETag计算
    });

    return asset;
  }

  // 智能缓存清理
  cleanupExpiredCache() {
    const now = Date.now();
    for (const [key, cached] of this.appCache.entries()) {
      if (now - cached.timestamp >= cached.ttl) {
        this.disposeApp(cached.instance); // 销毁应用实例
        this.appCache.delete(key);
      }
    }
  }

  disposeApp(instance) {
    if (instance && typeof instance.unmount === 'function') {
      instance.unmount();
    }
  }
}

开发工具与调试

微前端开发服务器

// 微前端开发工具配置
const express = require('express');
const proxy = require('http-proxy-middleware');
const cors = require('cors');

class MicroFrontendDevServer {
  constructor(options = {}) {
    this.apps = options.apps || [];
    this.port = options.port || 8080;
    this.server = express();

    this.setupMiddlewares();
    this.setupProxies();
    this.setupRoutes();
  }

  setupMiddlewares() {
    this.server.use(cors());
    this.server.use(express.json());
    this.server.use(express.static('public'));
  }

  setupProxies() {
    // 为每个微应用设置代理
    this.apps.forEach(app => {
      if (app.devServer) {
        this.server.use(app.activeRule, proxy({
          target: app.devServer,
          changeOrigin: true,
          logLevel: 'debug',
          onProxyReq: (proxyReq, req, res) => {
            // 添加微应用标识头
            proxyReq.setHeader('X-Micro-App', app.name);
          }
        }));
      }
    });
  }

  setupRoutes() {
    // 主应用路由
    this.server.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, 'index.html'));
    });

    // 微应用发现接口
    this.server.get('/api/micro-apps', (req, res) => {
      res.json(this.apps.map(app => ({
        name: app.name,
        activeRule: app.activeRule,
        devServer: app.devServer,
        status: this.getAppStatus(app.name)
      })));
    });

    // 热重载支持
    this.server.ws('/hot-reload', (ws, req) => {
      ws.on('message', (message) => {
        const data = JSON.parse(message);
        if (data.type === 'file-change') {
          // 广播文件变化
          this.broadcastToAllClients({
            type: 'reload',
            app: data.app
          });
        }
      });
    });
  }

  broadcastToAllClients(message) {
    // 广播消息给所有连接的客户端
  }

  start() {
    return new Promise((resolve) => {
      this.server.listen(this.port, () => {
        console.log(`Micro frontend dev server running on port ${this.port}`);
        resolve();
      });
    });
  }
}

调试工具

// 微前端调试面板
class MicroFrontendDebugger {
  constructor() {
    this.panels = [];
    this.logs = [];
    this.metrics = new Map();
  }

  // 创建调试面板
  createDebugPanel() {
    const panel = document.createElement('div');
    panel.id = 'micro-frontend-debug-panel';
    panel.style.cssText = `
      position: fixed;
      top: 10px;
      right: 10px;
      width: 300px;
      max-height: 80vh;
      background: white;
      border: 1px solid #ccc;
      border-radius: 4px;
      z-index: 9999;
      font-family: monospace;
      font-size: 12px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    `;

    panel.innerHTML = `
      <div style="padding: 10px; border-bottom: 1px solid #eee;">
        <h4>Micro Frontend Debugger</h4>
        <button onclick="this.getRootNode().host.closePanel()">Close</button>
      </div>
      <div id="debug-content" style="padding: 10px; overflow-y: auto; max-height: 400px;">
        <div><strong>Active Apps:</strong> <span id="active-apps"></span></div>
        <div><strong>Load Times:</strong> <span id="load-times"></span></div>
        <div><strong>Logs:</strong></div>
        <div id="debug-logs" style="margin-top: 10px;"></div>
      </div>
    `;

    document.body.appendChild(panel);
    this.updateDebugInfo();
  }

  updateDebugInfo() {
    // 更新调试信息
    const appsDiv = document.getElementById('active-apps');
    const timesDiv = document.getElementById('load-times');
    const logsDiv = document.getElementById('debug-logs');

    if (appsDiv) {
      appsDiv.textContent = Array.from(this.getActiveApps()).join(', ');
    }

    if (timesDiv) {
      const times = Array.from(this.metrics.entries())
        .map(([app, metrics]) => `${app}: ${metrics.loadTime}ms`)
        .join(', ');
      timesDiv.textContent = times;
    }

    if (logsDiv) {
      logsDiv.innerHTML = this.logs
        .slice(-10) // 只显示最近10条日志
        .map(log => `<div>${log.timestamp}: ${log.message}</div>`)
        .join('');
    }
  }

  log(level, message, data) {
    const logEntry = {
      timestamp: new Date().toLocaleTimeString(),
      level,
      message,
      data
    };
    this.logs.push(logEntry);
    this.updateDebugInfo();
  }

  recordMetric(appName, metric, value) {
    if (!this.metrics.has(appName)) {
      this.metrics.set(appName, {});
    }
    this.metrics.get(appName)[metric] = value;
  }
}

// 全局调试实例
window.microFrontendDebugger = new MicroFrontendDebugger();

// 自动记录应用生命周期
const originalMount = window.__MOUNT__;
window.__MOUNT__ = function(...args) {
  const startTime = performance.now();
  const result = originalMount.apply(this, args);

  result.then(() => {
    const endTime = performance.now();
    window.microFrontendDebugger.recordMetric(args[0].name, 'mountTime', endTime - startTime);
    window.microFrontendDebugger.log('info', `App mounted: ${args[0].name}`);
  });

  return result;
};

最佳实践

架构决策指南

// 微前端架构决策矩阵
class ArchitectureDecision {
  static shouldUseMicroFrontends(project) {
    const factors = {
      // 团队规模
      largeTeam: project.teamSize > 10,
      // 业务复杂度
      complexDomain: project.domains > 3,
      // 技术栈多样性
      techDiversity: project.techStacks.length > 2,
      // 发布频率差异
      releaseFrequencyDiff: Math.max(...project.releaseFrequencies) /
                          Math.min(...project.releaseFrequencies) > 3,
      // 独立部署需求
      deploymentIndependence: project.requiresIndependentDeployment
    };

    // 计算使用微前端的适宜度
    const suitabilityScore = Object.values(factors).filter(Boolean).length;

    return {
      shouldUse: suitabilityScore >= 3,
      factors,
      score: suitabilityScore,
      recommendation: this.getRecommendation(suitabilityScore)
    };
  }

  static getRecommendation(score) {
    if (score >= 4) return 'Highly Recommended';
    if (score >= 3) return 'Recommended';
    if (score >= 2) return 'Consider Carefully';
    return 'Not Recommended - Use Monolithic Approach';
  }
}

// 微应用设计准则
const MicroAppDesignPrinciples = {
  // 1. 保持微应用的单一职责
  singleResponsibility: {
    rule: 'Each micro app should have one clear business purpose',
    example: 'User Management, Order Processing, Payment Handling'
  },

  // 2. 定义清晰的边界
  clearBoundaries: {
    rule: 'Define explicit APIs and communication protocols',
    implementation: [
      'Use well-defined props interfaces',
      'Implement event-based communication',
      'Document public APIs'
    ]
  },

  // 3. 独立的构建和部署流程
  independentLifecycle: {
    rule: 'Each micro app should be independently buildable and deployable',
    requirements: [
      'Separate CI/CD pipelines',
      'Independent package management',
      'Version control isolation'
    ]
  },

  // 4. 容错和降级策略
  faultTolerance: {
    rule: 'System should gracefully handle micro app failures',
    strategies: [
      'Loading placeholders',
      'Error boundaries',
      'Graceful degradation'
    ]
  }
};

安全考虑

// 微前端安全策略
class MicroFrontendSecurity {
  constructor() {
    this.allowedDomains = new Set();
    this.trustedOrigins = new Set();
    this.contentSecurityPolicy = {};
  }

  // 验证微应用来源
  validateAppOrigin(appConfig) {
    const url = new URL(appConfig.entry);
    const origin = `${url.protocol}//${url.host}`;

    if (!this.trustedOrigins.has(origin)) {
      throw new Error(`Untrusted micro app origin: ${origin}`);
    }

    return true;
  }

  // 沙箱安全策略
  createSandboxConfig() {
    return {
      // 阻止访问主应用全局变量
      blockGlobalLeaks: true,
      // 限制DOM操作范围
      restrictDomAccess: true,
      // 隔离LocalStorage
      isolateStorage: true,
      // 限制网络请求
      enforceCorsPolicy: true
    };
  }

  // 内容安全策略
  setContentSecurityPolicy(policies) {
    this.contentSecurityPolicy = {
      ...this.contentSecurityPolicy,
      ...policies
    };

    // 应用CSP头
    const cspHeader = this.buildCSPHeader();
    document.querySelector('meta[http-equiv="Content-Security-Policy"]') ||
      this.injectCSPMeta(cspHeader);
  }

  buildCSPHeader() {
    const policies = this.contentSecurityPolicy;
    return Object.entries(policies)
      .map(([directive, value]) => `${directive} ${value}`)
      .join('; ');
  }

  injectCSPMeta(policy) {
    const meta = document.createElement('meta');
    meta.httpEquiv = 'Content-Security-Policy';
    meta.content = policy;
    document.head.appendChild(meta);
  }

  // 数据传输加密
  encryptMessage(message) {
    // 实现消息加密逻辑
    return btoa(JSON.stringify(message)); // 简化示例
  }

  decryptMessage(encryptedMessage) {
    try {
      return JSON.parse(atob(encryptedMessage));
    } catch (error) {
      console.error('Failed to decrypt message:', error);
      return null;
    }
  }
}

微前端架构虽然提供了良好的模块化和团队自治能力，但也增加了系统的复杂性。在实施微前端架构时，需要充分评估项目规模、团队能力、维护成本等因素，确保架构选择符合实际业务需求。

总结

  微前端架构为大型前端项目提供了有效的分解方案，通过将复杂系统拆分为更小、更易于管理的模块，实现了团队自治、技术栈灵活性和独立部署等优势。然而，微前端并非银弹，它也带来了额外的复杂性，包括状态管理、通信机制、样式隔离、性能优化等方面的挑战。

  成功实施微前端架构需要在架构设计、技术选型、开发规范、团队协作等多个维度进行综合考虑。只有在具备足够的技术实力和组织支撑的前提下，微前端架构才能真正发挥其价值，为大型前端项目带来可持续的开发效率和维护便利性。