微前端架构：组合、隔离与独立部署

值得做：多团队并行、模块业务边界清晰、发布节奏差异大、
        需要渐进式重构老前端（绞杀）
不值得：单团队、模块间强耦合、页面交互高度统一、
        团队规模小（引入的成本 > 收益）

// 主应用 package.json
{
  "dependencies": {
    "@acme/header": "^2.3.0",
    "@acme/order-ui": "^1.8.0",
    "@acme/profile-ui": "^3.0.1"
  }
}

// 远程应用 order-ui/webpack.config.js —— 暴露模块
module.exports = {
  name: 'orderUi',
  filename: 'remoteEntry.js',
  exposes: {
    './OrderList': './src/OrderList',
    './OrderDetail': './src/OrderDetail',
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  },
};

// 主应用 webpack.config.js —— 消费远程模块
module.exports = {
  name: 'shell',
  remotes: {
    orderUi: 'orderUi@https://order.example.com/remoteEntry.js',
    profileUi: 'profileUi@https://profile.example.com/remoteEntry.js',
  },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
};

import React, { Suspense, lazy } from 'react';

const OrderList = lazy(() => import('orderUi/OrderList'));

export function OrdersPage() {
  return (
    <Suspense fallback={<Spinner />}>
      <OrderList />
    </Suspense>
  );
}

// 简化的 Proxy 沙箱思路（qiankun 风格）
class Sandbox {
  constructor() {
    this.proxy = new Proxy(window, {
      get: (target, key) => (key in this.modified ? this.modified[key] : target[key]),
      set: (target, key, value) => {
        if (!(key in target)) this.modified[key] = value;  // 记录新增属性
        else target[key] = value;
        return true;
      },
    });
  }
  // 卸载时还原被修改的全局变量
  unmount() {
    for (const key of Object.keys(this.modified)) delete window[key];
  }
}

/* 设计 token 放在全局，用 CSS 变量共享 */
:root {
  --color-primary: #2563eb;
  --radius-md: 8px;
}

主应用持有路由（推荐）：
  shell 负责 URL 解析，按前缀加载对应微应用
  /order/*   → orderUi
  /profile/* → profileUi
  微应用只处理自己前缀内的子路由

微应用自持路由：
  每个微应用管理完整路由，主应用只做容器
  优点：微应用可独立运行
  缺点：路由冲突、浏览器前进后退难协调

// 全局事件总线：只广播"发生了什么"，不传业务数据
eventBus.emit('user:logout');
eventBus.on('theme:change', ({ theme }) => applyTheme(theme));

orderUi 团队：改代码 → CI 构建 → 上传 remoteEntry.js → 生效
shell 团队：   什么都不用做

# 远程模块清单：声明各微应用可用版本
micro_apps:
  orderUi:
    entry: https://order.example.com/remoteEntry.js
    version: 2.4.1
    contract: ">=2.0.0 <3.0.0"
  profileUi:
    entry: https://profile.example.com/remoteEntry.js
    version: 1.9.0
    contract: ">=1.5.0 <2.0.0"

https://order.example.com/v2.4.1/remoteEntry.js  ← 回滚只需改这一个 URL

const OrderList = lazy(() =>
  import('orderUi/OrderList').catch(() => ({
    default: () => <ModuleFallback name="订单模块" />,
  }))
);