Vite
Тема дорожной карты · Frontend разработчик
Vite — это frontend-инструмент сборки нового поколения, созданный Эваном Ю, который кардинально ускоряет цикл обратной связи при разработке, отдавая исходные файлы как нативные ES-модули без традиционного этапа бандлинга. Vite использует esbuild (написанный на Go) для сверхбыстрой предварительной сборки зависимостей и транспиляции TypeScript, а для оптимизированных продакшн-сборок с tree shaking и code splitting задействует Rollup — всё настраивается в vite.config.ts. Vite поддерживает React через @vitejs/plugin-react, TypeScript, CSS Modules, PostCSS и работу со статическими ресурсами прямо из коробки, что делает его самой популярной альтернативой Webpack для новых проектов. Frontend-разработчики выигрывают от мгновенной горячей замены модулей (HMR) в Vite, которая обновляет компоненты за миллисекунды без полной перезагрузки страницы, что разительно ускоряет внутренний цикл разработки по сравнению с традиционными Webpack-конфигурациями.
Как это работает
Vite трансформирует исходник (TypeScript, JSX, современный JS, CSS Modules, ассеты) в бандлы, которые браузер исполнит, желательно оптимизированные под кеш и code splitting. Vite (dev-time esbuild + prod Rollup) — современный дефолт: быстрый HMR, разумные дефолты. Webpack — legacy, но повсеместен. Turbopack и Rspack — bun-/Rust-based эксперименты. Parcel — zero-config. Dev-сервер даёт HMR (Hot Module Replacement), правки отражаются без full reload.
Когда применять
Vite — для любого нового проекта: самый простой, быстрый, активно поддерживаемый. Webpack — только если проект уже на нём и миграция дорогая. Code-split по route-границе (lazy load). Bundle-аналитика (vite-plugin-visualizer, webpack-bundle-analyzer) — чтобы видеть, что шипится. Цель — < 200 KB начального JS gzipped на типичной странице.
Типичные ошибки
Ловушки Vite: деплой неминифицированных dev-бандлов в production; импорт всей библиотеки, когда нужна одна функция (import _ from "lodash" вместо import map from "lodash/map"); нет dynamic imports для route-level splitting; нет source maps в production (отладка вслепую); коммит dist/ или node_modules в git. Аудит размера бандла ежемесячно — он только растёт.