В чем отличие Module Federation от монорепозитория и одной большой SPA?

В современной веб-разработке существует несколько стратегий организации кодовой базы и сборки приложений, каждая из которых решает разные проблемы масштабирования и командной работы.

Одна большая SPA (Монолит)

Это классический подход: всё приложение — один проект, одна сборка, один деплой. Все компоненты, страницы и библиотеки связаны на этапе сборки. Плюсы: простота начальной настройки, легкий рефакторинг в рамках одного проекта. Минусы: по мере роста кодовая база становится громоздкой, сборки замедляются, обновления требуют деплоя всего приложения, и командам сложно работать независимо.

Монорепозиторий (Monorepo)

Monorepo — это практика хранения кода нескольких проектов или пакетов в одном репозитории Git. Это может быть как несколько независимых SPA, так и набор библиотек с общими зависимостями. Инструменты вроде Lerna, Nx или Yarn Workspaces помогают управлять зависимостями и скриптами между пакетами. Ключевое отличие: сборка и деплой могут быть как централизованными (всё собирается вместе), так и изолированными (каждый пакет — отдельная сборка). Monorepo улучшает совместную работу над общим кодом, но не решает проблему независимого деплоя и выполнения.

Module Federation

Это технология, встроенная в Webpack 5, которая позволяет одному JavaScript-приложению динамически загружать код из другого приложения во время выполнения (runtime). По сути, это реализация концепции Micro Frontends на уровне сборки. Приложения (хосты и удалённые модули) собираются и развёртываются полностью независимо. Хост-приложение может загрузить, например, компонент React или целый маршрут с другого домена. Это обеспечивает истинную независимость команд и возможность поэтапного обновления частей большого приложения.

Сравнение на практике

• Связность: SPA — жёсткая связь на этапе сборки. Monorepo — связь на уровне кода и зависимостей. Module Federation — слабая связь во время выполнения.
• Деплой: В SPA и монолитном Monorepo деплой всего приложения. В Module Federation — независимый деплой каждого микрофронтенда.
• Размер бандла: SPA может иметь огромный начальный бандл. Module Federation позволяет загружать код по требованию с разных источников.

Пример конфигурации Module Federation

// webpack.config.js удалённого приложения (remote)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button', // Экспортируем компонент
      },
      shared: { react: { singleton: true } }, // Общие зависимости
    }),
  ],
};

// webpack.config.js хоста (host)
new ModuleFederationPlugin({
  name: 'host_app',
  remotes: {
    remote_app: 'remote_app@http://localhost:3001/remoteEntry.js',
  },
  shared: { react: { singleton: true } },
});

// Код в хостовом приложении для динамической загрузки
const RemoteButton = React.lazy(() => import('remote_app/Button'));

Вывод: Module Federation стоит применять, когда нужно построить большое приложение, над разными частями которого работают независимые команды, с возможностью отдельного развёртывания и обновления компонентов. Monorepo лучше подходит для централизованного управления множеством пакетов или проектов с общим кодом, но без требований к независимому runtime. Одна SPA остаётся хорошим выбором для небольших или средних проектов, где сложность распределённой архитектуры не оправдана.