Спор «webpack или Vite» обычно ведут на ощущениях. Я взял один React-проект, одну машину и три сборщика в актуальных версиях: webpack 5.112.2 (октябрь 2026) со swc-loader, Vite 7.3.7 на Rollup + esbuild и Vite 8.3.5 на Rolldown + Oxc. Проект синтетический, но честный: 1000 и 4000 компонентов на TypeScript, у каждого свой CSS, lodash-es, React 19.3. M1 Pro, 16 GB, Node 22.12. Время — медиана трёх прогонов, память — пик всего дерева процессов (ps каждые 50 мс), dev-метрики — до реального рендера страницы в Chromium через Playwright.

Продакшен-сборка, 4000 компонентов — webpack без кэша: 51,5 s, 3430 MB — webpack с прогретым filesystem cache (второй запуск): 6,2 s, 3009 MB — Vite 7: 6,4 s, 1588 MB — Vite 8: 0,94 s, 1129 MB На 1000 компонентов: 8,7 s / 1,39 s / 2,34 s / 0,38 s и 1309 / 586 / 588 / 402 MB.

Холодный webpack — это то, что происходит в CI без сохранённого кэша: в 55 раз медленнее Vite 8 и в 8 раз медленнее Vite 7. С кэшем webpack догоняет Vite 7 по времени, но памяти всё равно просит в 2 раза больше, а Vite 8 остаётся быстрее в 6,6 раза. Размер бандла сопоставим: 4,6 MB у webpack, 4,2 у Rollup, 4,4 у Rolldown.

Dev-сервер, 4000 компонентов — Старт до первого рендера: webpack 15,3 s, Vite 7 11,8 s, Vite 8 5,9 s, Vite 8 с bundledDev 1,9 s. — Полная перезагрузка: 1,32 s / 1,81 s / 1,77 s / 0,26 s. — HMR после правки компонента: 1869 ms / 155 ms / 143 ms / 58 ms. — Пиковая память: 2561 / 1320 / 1299 / 1763 MB. На 1000 компонентов: старт 4,8 / 3,6 / 1,8 / 0,75 s, HMR 490 / 150 / 145 / 50 ms, память 960 / 541 / 521 / 636 MB.

Единственное место, где webpack держится — перезагрузка страницы: один готовый бандл против 4000 ESM-запросов у Vite. Экспериментальный bundledDev в Vite 8.1+ закрывает и это: dev-сервер отдаёт бандл, reload 0,26 s. HMR — главная разница в ежедневной работе: webpack пересобирает чанк и прогоняет граф зависимостей, Vite подменяет один модуль. Почти две секунды против 150 мс на каждое сохранение файла.

Что стоит за цифрами — node_modules: webpack 331 пакета и 143 MB (swc-loader, css-loader, style-loader, MiniCssExtract, html-webpack-plugin, react-refresh-plugin, dev-server), Vite 7 — 73 и 75 MB, Vite 8 — 28 и 71 MB. — Конфиг под React + TS + CSS: 23 строки и 7 плагинов с лоадерами против 3 строк. — Инкрементальный кэш сборки есть только у webpack; у Rolldown module-level persistent cache в планах. — Module Federation: встроена в webpack и в Rolldown. — Roadmap webpack на 2026: CSS и TypeScript в ядре, universal target, путь к v6 без даты. Мейнтейнеры прямо говорят, что не соревнуются с другими бандлерами.

Когда webpack всё ещё ответ — Module Federation на проде с webpack-хостами и ремоутами — переезд это отдельный проект. — Кастомные лоадеры и плагины, которые некому переписать. — Легаси-таргеты и специфичные форматы вывода. Во всех остальных случаях цифры говорят сами: Vite 8 собирает в 6–55 раз быстрее, ест в 2–3 раза меньше памяти и держит HMR на уровне 50–150 мс.

Конфиги, графики и методика на картинках. Если у вас есть реальный проект, где webpack выигрывает — расскажите, интересно посмотреть.

#frontend #webpack #vite #rolldown #react #buildtools #performance