Какие знаешь виды микрофронтендов

«Какие знаешь виды микрофронтендов» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Микрофронтенды можно разделить на несколько основных видов:

  1. Build-time интеграция (композиция на этапе сборки)
    Пример: NPM-пакеты, монорепозитории (Lerna, Yarn Workspaces).
    // package.json
    "dependencies": {
      "shared-components": "1.0.0"
    }
  1. Client-side интеграция (динамическая загрузка в браузере)

    • Iframe: изоляция, но сложная коммуникация.
    • Web Components: Custom Elements + Shadow DOM.
    • Module Federation (Webpack 5):
      new ModuleFederationPlugin({
        remotes: {
          app1: "app1@http://localhost:3001/remoteEntry.js"
        }
      });
  2. Server-side интеграция (SSI, Edge Includes, ESI)
    Сборка фрагментов на сервере (Nginx, CDN).

  3. Гибридные подходы
    Например, Next.js с динамическими импортами или микросервисами API.

Ключевые критерии выбора: изоляция, производительность, DX.