Предисловие

Привет! Разбираясь с микрофронтендами в монорепозитории для проекте с Vue3 пришёл к выводу, что так много уделяется внимания гибкости в построении архитектуры и бизнес-задачам, что все боятся заниматься улучшением "условий труда" связанных со сборкой приложения! Решил что эта задачка как раз мне подходит и представляю вашему вниманию небольшую статью которая возможно поможет вам сделать выбор или подтолкнет попробовать новые интсрументы сборки фронтенда! Для справки - микрофронтенды у нас на Module Federation, Nx для управления монрепозиторием, общаемся мы через GraphQL, тестируем с Jest и конечно куда без TypeScript. Проект активно развивается, и с ростом его масштабов столкнулись с вопросом: какой сборщик лучше всего справится с нашими задачами? Webpack уже давно с нами, но его медлительность заставляет искать альтернативы. Vite обещает молниеносную разработку, а Rspack — производительность без сложной миграции. Давайте разберёмся, что подойдёт именно нам — и, возможно, вам.

1. Webpack

https://webpack.js.org/

Старый добрый танк фронтенда — медленный, но мощный. Гибкий до предела, он тащит всё: от микрофронтендов до легаси, являясь по-факту стандартом индустрии (особенно корпоративной разработки) с 2014 года. К webpack можно относится по разному, однако всё же стоит признать, что если его хорошо настроили, то стабильно работать он может даже дольше, чем будет жить проект (конечно не без греха в виде долгого старта, прожорливости и сложной конфигурации).

Преимущества webpack

1. Зрелость и экосистема - наиболее стабильный инструмент с огромной экосистемой плагинов и лоадеров;

2. Гибкость - позволяет тонко настраивать конфигурацию;

3. Хорошая оптимизация для production - tree-shaking, code splitting, lazy-loading etc.;

4. Нативные микрофронтенды - полная поддержка Module Federation так как изначально разрабатывался в webpack;

5. Интеграция с Nx - поддержка @nx/webpack для сборки.

Недостатки webpack

1. Плохая производительность - медленный старт dev-сервера из-за полной пересборки при изменении кода, не используется ESM по-умолчанию;

2. Сложность конфигурации - требует знаний для настройки, сложно вносить изменения;

3. Прожорливость - высокое потребление памяти при разработке и долгая сборка.

2. Vite

https://vite.dev/
Относительно новый инструмент выпущенный 2020 году, авторами Vue.js. Он использует нативные ES-модули (ESM) в браузере для разработки и Rollup для production-сборки. Запускается мгновенно, обновляет код на лету, но с микрофронтендами пока играет в догонялки — поддержка сыровата.

Плюсы vite

1. Скорость разработки - мгновенный запуск dev-сервера благодаря использованию ES-модулей (ESM) в паре с ESbuild (сборщиком написанным на Go). HMR хорошо работает даже при работе над большими проектами;

2. Простота конфигурации и использования - упрощённая конфигурация сборки проектов + экосистема из немалого количества плагинов и поддержка большинства современных фреймворков;

3. Нативно для vue - разработкой и развитием занимается практически команда vue, поэтому весь ключевой функционал всегда будет с поддержкой vue + настройка пресетов из коробки;

4. Интеграция с Nx - официальный плагин @nx/vite для генерации проектов и задач.

5. Оптимизация сборки - при сборке production использует Rollup под капотом, что может снижать вес итогового бандла в некоторых случаях, улучшая runtime приложения, но может терять в скорости самой сборки;

Минусы vite

1. Ограниченная поддержка legacy - проблемы с устаревшими браузерами;

2. Экосистема - меньше плагинов, чем у Webpack;

3. Сложности с микрофронтендами - поддержка Module Federation есть, но пока не нативно. Недавно вышел официальный плагин @module-federation/vite (есть альтернатива в виде @originjs/vite-plugin-federation), возможны баги при сложных сценариях из-за относительной свежести и ненативной поддержки (примеры проектов использующих module-federation в связке с vite есть);

4. Гибкость сборки - Production-сборка на Rollup может быть менее гибкой чем Webpack;

5. (?) Возможные проблемы с тестами - некоторые разработчики отмечают проблемы при написании тестов с jest и рекомендуют переходить на vitest, однако на практике не встречал пока что проблем с тестами.

3. Rspack

https://rspack.dev/
Самый молодой сборщик, разработанный на Rust для повышения производительности вышел в релиз 1-ой версии в 2024. Он позиционируется как совместимая с Webpack альтернатива, поддерживающая большинство его API и экосистемы, но с многократным ускорением сборки благодаря параллельной архитектуре и оптимизациям на уровне Rust.

Сильные стороны rspack

1. Скорость - написан на Rust: сборка в 5-10 раз быстрее Webpack. Поддержка параллельной обработки файлов;

2. Совместимость с Webpack - поддерживает большинство конфигов и плагинов Webpack (легкая миграция);

3. Module Federation - нативная поддержка (через совместимость с Webpack @module-federation/enhanced);

4. Интеграция с Nx - экспериментальная поддержка @nx/rspack.

Слабые стороны rspack

1. Незрелость - меньше документации и сообщества, меньше решённых проблем;

2. Ограниченная экосистема - не все плагины Webpack совместимы, мало готовых решений для Vue

3. Транспилятор - использует движок SWC (тоже на Rust) вместо Babel, который по тестам лучше (до 20х раз), но с теми же рисками;

4. Риск нестабильности - в силу молодости проекта пользователи могли столкнуться ещё не со всеми проблемами, в то время как большинство проблем webpack/vite имеют готовые решения.

Сравнение по ключевым параметрам

Сравнение скорости работы

Исходные данные машины 8 ядер, 16 ГБ RAM и SSD. Проект: Vue 3 приложение с микрофронтенд-архитектурой и минимальными конфигами (2-3 модуля, подключенные через Module Federation). Размер исходного кода: ~10 МБ (около 500 компонентов, 100 зависимостей, 10 000 строк кода).

Тесты в таблице сгенерированы ChatGPT, но суть такая же, в большинстве замеров vite сильно лучше webpack (~3x-5x раз), в части кейсов rspack > vite, особенно для production-сборки.

Пример реальных тестов (1000 React components):

Дополнительно сравнение инструментов с бенчмарками:

• https://kinsta.com/blog/vite-vs-webpack/

• https://dev.to/abhinav_sharma_e01f930be6/vite-vs-webpack-which-one-is-right-for-your-project-886

• https://medium.com/alan/a-bundler-story-migrating-from-webpack-to-rspack-f548c62f757d

• https://github.com/rspack-contrib/performance-compare

Сравнение популярности и оценка рисков

По популярности rspack (релиз 1 версии всё же был в 2024, хотя релиз v0.1 был в 2023) видно, что ещё далеко даже до конкурента vite в плане популярности, а вот от webpack всё чаще отказываются в пользу vite.

Так же прилагаю сравнение и движков по популярности (SWC показывает результаты получше, чем rspack :-)

Использование рекомендуемых инструментов в популярных фреймворках и CLI

vue-cli & create-react-app - deprecated инструменты использовавшие webpack + babel

Для новых проектов без использования CLI или старта из шаблона используют npm create vite с пресетами в случаях когда хотят самостоятельно тонко сконфигурировать проект.

Выводы

Webpack продолжает оставаться хорошим выбором для тех кто предпочитает стабильность. На сегодняшний день он всё ещё не сдаёт позиций оставаясь таким же гибким, но медленным и громоздким решением. Альтернативны же предлагают всё больше возможностей по усовершенствованию сборки проекта и лучший developer experience.

Vite будет хорошим выбором из-за большого количества более эффективных инструментов, активно развивающегося сообщества и лучшей скорости разработки с простой конфигурацией. Однако миграция может быть достаточно сложной из-за достаточно большого размера проекта и возможных проблем с module-federation. Eсть решения вроде https://github.com/originjs/webpack-to-vite для более лёгкого перехода, но шаткую надёжность при переходе и большое количество времени на тестирование всё равно придётся закладывать.

Использовать Rspack в настоящее время может быть достаточно рискованным, потому что это один из самых молодых инструментов в принципе, но переход на него может быть достаточно лёгким из-за идентичного API, но принимая риски можно получить практически лучшее время сборки и почти все фишки webpack. Однако помимо рисков по интеграции самого сборщика стоит помнить и о транспиляторе SWC который использует rspack, который так же менее популярен, чем babel со всеми вытекающими последствиями.

Мы пришли к выводу, что интегрировать vite в монорепозиторий сегодня затея не особо перспективная, rspack выглядит очень хорошо, но смущает его молодость - отдали предпочтение стабильности webpack. Но решили, что для новых (особенно внутренних) проектов в отдельных репозиториях будем стартовать на vite.

Поделитесь в комментариях какими инструментами в микрофронтендах пользуетесь вы и, надеюсь, данная статья помогла вам с выбором!