Сравнительный анализ производительности сборки React-приложений: Webpack, Vite и Turbopack

Аннотация

В статье представлен сравнительный анализ трёх инструментов сборки React-приложений — Webpack 5, Vite 5 и Turbopack — в контексте типового проекта на TypeScript. На тестовом стенде, развёрнутом в Docker-контейнерах, выполнены замеры времени холодной производственной сборки, времени горячей пересборки модулей (HMR), размера итогового бандла и объёма контейнерного образа. Приведены фрагменты конфигураций (webpack.config.js, vite.config.ts, next.config.mjs) и Dockerfile, демонстрирующие особенности настройки каждого инструмента. Результаты показывают, что Turbopack обеспечивает наименьшее время холодной сборки (38 с) и минимальную задержку HMR (0,2 с). Vite демонстрирует сопоставимую скорость холодной сборки (42 с) при минимальном размере production-бандла (1,32 МБ) и наименьшем образе (187 МБ). Webpack, несмотря на наибольшее время холодной сборки (185 с) и размер образа (245 МБ), остаётся наиболее зрелым и богатым по экосистеме решением. Предложены практические критерии выбора сборщика в зависимости от приоритетов проекта: скорость итеративной разработки, размер артефактов или совместимость с legacy-инфраструктурой.