Как настраивается Micro Frontend

Micro Frontend настрайвается через разбиение приложения на независимые модули, которые могут разрабатываться и деплоиться отдельно. Основные подходы:

1. Build-time интеграция (например, через npm-пакеты):

// package.json
"dependencies": {
  "product-mfe": "1.0.0",
  "cart-mfe": "1.0.0"
}

2. Run-time интеграция (чаще используется):

• iframe - просто, но ограниченно
• Web Components - нативные браузерные технологии
• Module Federation (Webpack 5) - популярное решение:

// webpack.config.js (host)
new ModuleFederationPlugin({
  remotes: {
    productApp: "productApp@http://localhost:3001/remoteEntry.js"
  }
})

3. Серверная композиция (SSI, Edge Side Includes)

Ключевые аспекты настройки:

• Единая система дизайна (DSL)
• Межмодульная коммуникация (Custom Events, Shared State)
• Изолированные стили (CSS Modules, Shadow DOM)
• Независимый деплой (версионирование API)