Что такое Module Federation и как с его помощью строят микрофронтенды?

Module Federation — функция Webpack 5 (есть плагины для Vite и Rspack), которая позволяет одному приложению во время работы загружать код другого приложения, развёрнутого отдельно. На ней строят микрофронтенды.

Роли

• Host (контейнер) — приложение, которое подключает чужие модули.
• Remote — приложение, которое публикует (экспортирует) свои модули.

Любое приложение может быть и тем и другим.

Настройка

Remote объявляет, что экспортирует:

new ModuleFederationPlugin({
  name: 'catalog',
  filename: 'remoteEntry.js',
  exposes: { './ProductList': './src/ProductList' },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
});

Host указывает, откуда брать:

new ModuleFederationPlugin({
  name: 'shell',
  remotes: { catalog: 'catalog@https://catalog.example.com/remoteEntry.js' },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
});

const ProductList = React.lazy(() => import('catalog/ProductList'));

Общие зависимости

shared не даёт загрузить библиотеку несколько раз. singleton: true гарантирует один экземпляр (важно для React и контекста), requiredVersion задаёт допустимую версию.

Плюсы

• Независимые релизы команд: remote обновляется без пересборки host.
• Общие зависимости и меньше дублирования кода.
• Постепенный переход с монолита.

Сложности

• Согласование версий общих библиотек и риск рассинхронизации контрактов между командами.
• Обработка недоступности remote (fallback, ErrorBoundary).
• Единый стиль, маршрутизация, авторизация и коммуникация между приложениями.
• Типизация удалённых модулей и тестирование интеграции.

Коротко для собеседования

Module Federation загружает модули чужих приложений в рантайме: remote экспортирует, host подключает через remoteEntry.js, общие библиотеки задаются в shared как singleton. Позволяет независимые релизы, но требует дисциплины версий и контрактов.