Module Federation 常见问题有哪些？如何解决？

Module Federation 在实际应用中可能会遇到各种问题，以下是常见问题及解决方案：

1. 版本冲突问题

问题描述： 多个应用使用不同版本的共享依赖，导致运行时错误。

解决方案：

javascript
// 使用 strictVersion 和 requiredVersion 控制版本
shared: {
  react: {
    singleton: true,
    requiredVersion: '^17.0.0',
    strictVersion: false, // 允许小版本差异
    version: deps.react
  }
}

// 或使用 package.json 的 resolutions 字段统一版本
{
  "resolutions": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

2. 模块加载失败

问题描述： 远程模块加载失败，导致应用崩溃。

解决方案：

javascript
// 添加错误边界和降级方案
class ErrorBoundary extends React.Component {
  state = { hasError: false }
  
  static getDerivedStateFromError(error) {
    return { hasError: true }
  }
  
  render() {
    if (this.state.hasError) {
      return this.props.fallback || <FallbackComponent />
    }
    return this.props.children
  }
}

// 使用 Suspense 和错误处理
const RemoteComponent = React.lazy(() => 
  import('remoteApp/Component').catch(() => 
    import('./LocalFallback')
  )
)

function App() {
  return (
    <ErrorBoundary fallback={<LocalFallback />}>
      <Suspense fallback={<Loading />}>
        <RemoteComponent />
      </Suspense>
    </ErrorBoundary>
  )
}

3. 开发环境跨域问题

问题描述： 本地开发时，不同端口的远程应用无法加载。

解决方案：

javascript
// 在 webpack.config.js 中配置 devServer
devServer: {
  port: 3000,
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
  }
}

// 或使用代理
devServer: {
  port: 3000,
  proxy: {
    '/remote': {
      target: 'http://localhost:3001',
      changeOrigin: true,
      pathRewrite: { '^/remote': '' }
    }
  }
}

4. 样式隔离问题

问题描述： 远程模块的样式影响主应用或其他远程模块。

解决方案：

javascript
// 使用 CSS Modules
import styles from './Button.module.css'

// 或使用 CSS-in-JS
import styled from 'styled-components'

const Button = styled.button`
  /* 样式自动隔离 */
`

// 或使用 Shadow DOM
class ShadowComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button { color: red; }
      </style>
      <button>Shadow Button</button>
    `
  }
}

5. 状态管理问题

问题描述： 多个应用之间的状态无法共享。

解决方案：

javascript
// 使用共享的状态管理库
// Remote 应用
export { createStore } from './store'

// Host 应用
import { createStore } from 'remoteApp/store'
const store = createStore()

// 或使用事件总线
const eventBus = {
  listeners: {},
  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = []
    }
    this.listeners[event].push(callback)
  },
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(cb => cb(data))
    }
  }
}

6. 路由冲突问题

问题描述： 多个应用的路由配置冲突。

解决方案：

javascript
// 使用路由前缀
const routes = [
  {
    path: '/dashboard/*',
    component: React.lazy(() => import('dashboardApp/App'))
  },
  {
    path: '/settings/*',
    component: React.lazy(() => import('settingsApp/App'))
  }
]

// 或使用路由守卫
const ProtectedRoute = ({ children, ...rest }) => {
  const isAuthenticated = useAuth()
  return (
    <Route {...rest}>
      {isAuthenticated ? children : <Redirect to="/login" />}
    </Route>
  )
}

7. 类型定义问题

问题描述： TypeScript 无法识别远程模块的类型。

解决方案：

javascript
// 创建类型声明文件 types.d.ts
declare module 'remoteApp/*' {
  const value: any
  export default value
}

// 或使用类型导出
// Remote 应用
export interface ButtonProps {
  label: string
  onClick: () => void
}

// Host 应用
import type { ButtonProps } from 'remoteApp/types'

8. 构建产物过大

问题描述： remoteEntry.js 或模块文件过大，影响加载速度。

解决方案：

javascript
// 使用代码分割
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        priority: 10
      },
      common: {
        name: 'common',
        minChunks: 2,
        priority: 5
      }
    }
  }
}

// 压缩构建产物
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ]
}

通过以上解决方案，可以有效应对 Module Federation 在实际应用中遇到的各种问题。