</>
halfcoder

Гайды

Webpack и Vite: сборка фронтенда

Entry и code splitting, конфиг Vite, переменные окружения, tree-shaking и анализ бандла.

~9 мин чтения

ФронтендСборкаWebpackVite

Webpack и Vite: сборка фронтенда

Webpack — гибкий бандлер с loaders и plugins (много конфигурации). Vite — dev-сервер на native ESM + esbuild для трансформации, продакшен-сборка через Rollup; быстрый старт для SPA/SSR (Vue/React). TypeScript — строгая типизация.

1. Webpack: ключевые идеи

Entry → граф зависимостей → chunks, code splitting (import()), asset modules. Плагины: HtmlWebpackPlugin, MiniCssExtractPlugin, DefinePlugin.

2. Vite: конфиг минимален

vite.config.ts: aliases, proxy к API в dev, SSR options для фреймворков.

3. Env переменные

VITE_* префикс для клиента в Vite; не класть секреты. Webpack — DefinePlugin / EnvironmentPlugin.

4. Производительность

Source maps для prod — осторожно (размер, утечки). Tree-shaking требует ESM sideEffects в package.json у библиотек.

5. Webpack: dev vs prod

mode: 'development' даёт быстрые source maps и мягче минификация; production — минификация, scope hoisting, splitChunks для vendor. cache: { type: 'filesystem' } ускоряет повторные сборки на CI при сохранении кэша между job'ами.

6. Vite: плагины и SSR

@vitejs/plugin-react / vue подключают HMR. Для SSR фреймворка используйте официальный шаблон (create-vite, Next/Nuxt) — ручная склейка entry для сервера и клиента быстро усложняется. ssr.noExternal — когда зависимость должна бандлиться для SSR, а не резолвиться из node_modules как есть.

7. Совместимость и полифиллы

Browserslist в package.json определяет целевые браузеры для @babel/preset-env и autoprefixer. Vite по умолчанию таргетит современные браузеры; для legacy добавляют @vitejs/plugin-legacy с отдельным чанком и nomodule.

8. Экосистема: Turbopack, Rspack, Vitest

Next.js может собирать dev через Turbopack (Rust) — быстрее холодный старт на огромных графах. Rspack — webpack-совместимый бандлер на Rust для проектов, где миграция на чистый Vite дорога. Vitest использует тот же pipeline трансформаций, что и Vite — тесты ближе к прод-сборке без дублирования конфига.

9. Монорепозитории

pnpm workspaces + workspace:* зависимости уменьшают диск и ускоряют CI. В Webpack настраивайте resolve.alias на локальные пакеты; в Vite — optimizeDeps.include для пакетов из packages/ui, иначе pre-bundle не увидит исходники.

10. Чек-лист

  • Bundle analyzer периодически.
  • Кэш CI для node_modules / pnpm store.
  • Версионирование файлов ([contenthash]) для кэша CDN.
  • Compression (brotli/gzip) на CDN или reverse proxy.
  • Разделение runtime и vendor чанков для кэш-инвалидации при обновлении приложения.

Дальше: CI/CD