Webpack, Vite или Rspack: что это за зоопарк или чем собирать микрофронтенды в 2025?

Предисловие

Привет! Разбираясь с микрофронтендами в монорепозитории для проекта с 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 для повышения производительности, вышел в релиз первой версии в 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 имеют готовые решения.

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

Параметр	Webpack	Vite	Rspack
Скорость dev-сборки	Низкая 🐢	Очень высокая ⚡	Высокая 🚀
Production-оптимизация	Отличная 🏆	Хорошая 👍	Хорошая 👍
Module Federation	Нативная 🔗	Через плагин 🔌	Нативная 🔗
Сложность настройки	Высокая 🛠️	Низкая 🎯	Средняя 🛠️
Экосистема	Огромная 🌍	Растущая 🌱	Ограниченная 🚧
Поддержка Vue	Полная ✅	Полная ✅	Экспериментально 🧪

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

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

Метрика	Webpack	Vite	Rspack
Холодная сборка (prod)	120 сек	90 сек	25 сек
Инкрементальная сборка	15 сек	10 сек	3 сек
Dev-сервер (холодный)	20 сек	1,5 сек	5 сек
HMR (компонент)	800 мс	50 мс	200 мс
HMR (глобальное)	1500 мс	150 мс	400 мс
Вес сборки (основной)	180 КБ	150 КБ	170 КБ
CI/CD	150 сек	100 сек	30 сек

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

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

Framework	Startup	Server Start Time	On Load Time	Root HMR	Leaf HMR	Build Time
Rsbuild 1.0.5	417ms	250ms	167ms	82ms	85ms	320ms
Rsbuild 1.0.5 (Hot)	382ms	210ms	172ms	111ms	74ms	280ms
Vite 6.0.0-alpha (swc)	1716ms	142ms	1574ms	114ms	123ms	1260ms
Vite 6.0.0-alpha (swc)(Hot)	1077ms	114ms	963ms	34ms	17ms	1340ms
Vite 6.0.0-alpha (babel)	2838ms	126ms	2712ms	28ms	28ms	1390ms
Vite 6.0.0-alpha (babel)(Hot)	2563ms	111ms	2452ms	138ms	122ms	1310ms
Webpack 5.91.0 (swc)	1926ms	1591ms	335ms	588ms	158ms	4144ms
Webpack 5.91.0 (swc)(Hot)	851ms	557ms	294ms	242ms	216ms	483ms
Webpack 5.91.0 (babel)	5607ms	5307ms	300ms	226ms	171ms	460ms
Webpack 5.91.0 (babel)(Hot)	1083ms	827ms	256ms	260ms	163ms	481ms

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

• 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.

Графики скачиваний npm пакетов rspack / vite / webpack npmtrends

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

Графики скачиваний npm пакетов babel / SWC npmtrends

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

Фреймворк	Бандлер по-умолчанию	Рекомендуемый бандлер	Транспилятор по-умолчанию	Популярный транспилятор	Примечания
Vue 3	Vite	Vite	Esbuild (в Vite)	Babel	Vue 3 использует Vite с Esbuild для скорости, но поддерживает Webpack и Babel для кастомизации.
Nuxt.js	Vite (с версии 3)	Vite	Esbuild (в Vite)	Babel	Nuxt 3 использует Vite, Webpack доступен через модуль @nuxt/webpack-builder.
React	Нет (зависит от сборки)	Нет (для чистого react рекомендуют vite)	Babel	Babel	React зависит от инструмента (Create React App использует Webpack + Babel).
Next.js	Webpack	Turbopack (v15 default)	SWC (встроен)	Babel	Next.js перешел на SWC для скорости, но поддерживает Babel для совместимости.
Angular	Webpack (Angular CLI @angular-devkit)	Webpack + ESbuild	TypeScript	TypeScript	Angular использует TypeScript и Webpack в CLI с оптимизациями.
Svelte	Vite (в SvelteKit)	Vite, Rollup	Svelte-компилятор	Babel	Svelte использует свой компилятор, Vite — для SvelteKit, Rollup — для библиотек.

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.

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