Какие подходы использовать для разделения монолита на микрофронтенды?

Продвинутые темы

Монолит на микрофронтенды разделяют подходами: по доменам/командам, через Module Federation, iframe, web components или роутинг-композицию. Постепенно, выделяя независимые части.

Подходы к разделению

Разделение по бизнес-доменам

Выделить независимые функциональные области (каталог, корзина, профиль) — каждая становится микрофронтендом с своей командой. Основной принцип декомпозиции.

Module Federation (Webpack 5)

Динамическая загрузка модулей приложений в рантайме, шаринг зависимостей:

Независимый деплой, общий стек.
Основной современный подход.

Роутинг-композиция

Приложение-контейнер (shell) по маршрутам загружает нужный микрофронтенд:

/catalog → микрофронтенд каталога
/cart → микрофронтенд корзины

iframe

Полная изоляция (свой контекст, стили):

Максимальная изоляция, но тяжёлая коммуникация.

Web Components

Микрофронтенд как кастомный элемент (Shadow DOM):

Стек-независимость, изоляция стилей.

Стратегия постепенного разделения

Strangler Fig — постепенно выносить части монолита, оставляя его работающим.
Начать с наименее связанной области.
Выделить общие зависимости (design system, auth).
Настроить композицию (shell, роутинг).
Наладить коммуникацию (события, shared-состояние минимально).

Аспекты

Общие зависимости — шарить (React, design system), избегать дублирования.
Коммуникация — минимальная, через явные контракты.
Роутинг — контейнер управляет навигацией.
Деплой — независимый.

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

Монолит на микрофронтенды разделяют: по бизнес-доменам (каталог, корзина — команды), через Module Federation (рантайм-загрузка, шаринг зависимостей — основной подход), роутинг-композицию (shell грузит по маршрутам), iframe/Web Components (изоляция). Постепенно (Strangler Fig), начиная с наименее связанной части, выделяя общие зависимости и налаживая композицию/коммуникацию.