Vite Module Federation: скорость, простота, гибкость

1.

VITE MODULE
FEDERATION
#скорость #простота
#гибкость

2.

Что такое эти ваши
module federation?

3.

01
01
Проблемы
Роутинг
Загрузка изолированных модулей
Изолированные стили
Шаринг библтотек
Общение микрофронтов

4.

02
02
Что такое VFM?
Возможности
Подгрузка модулей
Быстрая настройка
Шаринг библиотек и компонентов
Простой конфиг
Контроль версионности библиотек

5.

03
03
Архитектура VMF
HOST
REMOTES

6.

04
04
Архитектура VMF
Реализация для интеграции в монолите
Для Remote ничего не меняется
Изменения Host в отличии от базовой стратегии
Настройка слушателей событий
перехода по урлам
В зависимости от URL грузим и
монтируем нужный микр в
монолитный div

7.

05
05
Минусы VMF
Водопад сетевых запросов,
долгая загрузка
Последовательная загрузка
зависимостей
Множество открытых проблем
Единая точка отказа

8.

06
06
Сравнительная таблица подобных
технологий
Критерий
Vite Module Federation (через viteplugin-federation)
Webpack Module Federation (MF 2.0)
single-spa (и qiankun/wujie)
Основная философия
Композиция модулей в рантайме.
"Модульный супермаркет" .
Композиция модулей в рантайме.
Стандарт индустрии .
Оркестрация приложений. Управление
жизненным циклом и маршрутизацией .
Тип интеграции
Импорт удаленных модулей напрямую
(import('remote/Module')).
Импорт удаленных модулей напрямую.
Регистрация приложений в корневом
конфиге. Монтирование/размонтирование
по событиям/роутам .
Изоляция (JS/CSS)
Низкая/Средняя. Нет встроенной
изоляции, полагается на дисциплину
команды, CSS-модули или postcss .
Низкая/Средняя. Аналогично Vite, нет
встроенной изоляции.
Высокая. single-spa не предоставляет
изоляцию, но qiankun и wujie (надстройки)
добавляют JS-песочницы и CSSизоляцию .
Производительность (Dev/Prod)
Разработка: мгновенный старт, esbuild.
Продакшн: риск "водопада" запросов,
кеширование .
Разработка: более медленная.
Продакшн: зрелая оптимизация, теперь
+Tree Shaking shared .
Может использовать любой сборщик
SSR (Server-Side Rendering)
Ограниченная .
Поддерживается (особенно в MF 2.0 с
Modern.js) .
Сложно. Требуется самостоятельная
реализация.
TypeScript / Типы
Частичная поддержка через плагины .
Высокая. В MF 2.0 поддерживается
extraction типов через границы модулей .
Типы не передаются автоматически,
требуется ручной шаринг или общие
пакеты.
Совместимость технологий
Позволяет смешивать Angular, React, Vue
в одном проекте
Позволяет смешивать Angular, React, Vue
в одном проекте
Позволяет смешивать Angular, React, Vue
в одном проекте .
Сложность настройки
Средняя. Конфиг Vite + плагин.
Средняя/Высокая. Требует понимания
Webpack.
Средняя. Требует настройки под каждый
фреймворк.
Зрелость и сообщество
Средняя. Активно развивается, но есть
тянущиеся шлейфом болячки.
Высокая. Стандарт, огромное
сообщество, активно развивается MF 2.0 .
Очень высокая (для single-spa и
qiankun). Тысячи продакшен-кейсов .

9.

05
05
Выводы
Vite Module Federation прошел путь от эксперимента до стабильного инструмента.
Он отлично подходит для новых проектов, где вся команда сидит на Vite и одном
фреймворке (React/Vue). Получаем молниеносную разработку и простую конфигурацию
Хорошо подходит для случаев:
• Новый проект на чистом Vite.
• Несколько автономных команд, которым критически важно деплоиться в разное время .
• Есть строгий контроль используемых зависимостей.
Не подходит для случаев:
• Легаси-код, который нужно интегрировать.
• Нужна гарантированная изоляция кода друг от друга.
• Нет готовности инвестировать в сложную инфраструктуру отладки и мониторинга
границ модулей.

10.

Q&A

11.

Спасибо за внимание!