Микрофронтенды
↑ 8.2 Архитектура фронтенда и паттерны · ← Предыдущая · → Следующая
Зачем это на собесе
Тема про масштабирование команд; ожидают знание компромиссов, а не увлечение технологией.
Идея
Разделить большой фронтенд на независимо разрабатываемые и деплоемые части, принадлежащие разным командам, которые собираются в одно приложение.
Способы интеграции
| Способ | Описание | Плюсы | Минусы |
|---|---|---|---|
| Module Federation (Webpack, Rspack, Vite-плагин) | загрузка модулей другого билда на лету | общие зависимости, гранулярность | связь версий, отладка |
| iframe | изоляция | полная независимость | UX, навигация, размеры, производительность |
| Web Components | кастомные элементы | вне фреймворка | стили, SSR |
| single-spa / qiankun | оркестрация приложений по маршрутам | зрелые решения | сложность |
| Серверная сборка (edge/SSI) | композиция HTML | SEO | инфраструктура |
| Monorepo с пакетами | не микрофронтенды, но модульность | простота | единый релиз |
Module Federation
// host
federation({
name: 'shell',
remotes: { orders: 'https://orders.example.com/assets/remoteEntry.js' },
shared: ['vue', 'vue-router', 'pinia'],
})
// использование
const OrdersPage = defineAsyncComponent(() => import('orders/OrdersPage'))Вопросы проектирования
- границы по бизнес-доменам, а не по технологиям;
- общий shell: аутентификация, навигация, дизайн-система;
- коммуникация: события (CustomEvent, шина), URL, минимально общий стор;
- общие версии Vue и библиотек (singleton);
- единая дизайн-система и токены;
- контракты и обратная совместимость между командами;
- тестирование: контрактные, интеграционные E2E;
- производительность: дублирование зависимостей, каскад загрузки.
Когда не нужны
Одна команда, продукт средних размеров. Монолит с хорошей модульной структурой проще и быстрее. Микрофронтенды решают организационную проблему (независимые релизы разных команд), а не техническую.
Вопросы с ответами
Когда микрофронтенды оправданы?
Много команд с независимым циклом релизов, устаревшее приложение, которое переписывается по частям, разные технологии. Не подходят маленьким командам.
Как обмениваться данными между микрофронтендами?
Через события и URL, минимальный общий контракт, общий shell для авторизации. Избегать общего глобального стора, который создаёт жёсткую связь.