Developer

Vite: dev server, esbuild, Rollup, HMR

↑ 6.2 Сборка и инфраструктура: Vite, monorepo, CI∕CD · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: middle

Зачем это на собесе

Почему Vite быстрый и как устроены dev и prod-режимы.

Объяснение

Dev-сервер: не собирает весь бандл — отдаёт исходники как нативные ES-модули; браузер сам запрашивает импорты. Зависимости из node_modules предварительно собираются esbuild (pre-bundling: CJS → ESM, склейка множества внутренних модулей) и кэшируются. Трансформации — по запросу (TS, Vue SFC, JSX, CSS).

HMR: при изменении файла заменяется только затронутый модуль без перезагрузки страницы (для Vue — сохраняется состояние компонента).

Prod-сборка: Rollup (в новых версиях — Rolldown): tree shaking, code splitting, хэши, минификация (esbuild/Terser), CSS-извлечение.

// vite.config.ts
export default defineConfig(({ mode }) => ({
  plugins: [vue(), vueJsx(), Components(), AutoImport({ imports: ["vue", "vue-router"] }), visualizer({ gzipSize: true })],
  resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) } },
  server: { port: 5173, proxy: { "/api": { target: "http://localhost:5000", changeOrigin: true } } },
  build: {
    target: "es2020", sourcemap: true, chunkSizeWarningLimit: 600,
    rollupOptions: { output: { manualChunks: { vendor: ["vue", "vue-router", "pinia"] } } },
  },
  css: { preprocessorOptions: { scss: { additionalData: `@use "@/styles/vars" as *;` } } },
  define: { __APP_VERSION__: JSON.stringify(process.env.npm_package_version) },
  test: { environment: "jsdom" },                                     // Vitest использует тот же конфиг
}));
ВозможностьОписание
Плагинысовместимы с Rollup + хуки Vite (configureServer, transformIndexHtml)
Переменные окруженияimport.meta.env.VITE_*, .env.[mode]
Ассеты?url, ?raw, ?worker, import.meta.glob, new URL(..., import.meta.url)
Библиотечный режимbuild.lib
SSRvite build --ssr
Previewvite preview (проверка prod-сборки)
ОптимизацииoptimizeDeps, manualChunks, modulePreload, build.cssCodeSplit
Legacy@vitejs/plugin-legacy

Причины скорости: нативные ESM (нет бандлинга при старте), esbuild (Go, на порядки быстрее JS-сборщиков), ленивые трансформации, кэш.

Нюансы и подводные камни

  • Различие dev (ESM без бандла) и prod (Rollup) — редкие «работает в dev, ломается в prod»: проверяйте preview.
  • Зависимости с CJS/неправильными экспортами требуют optimizeDeps.include.
  • Переменные без префикса VITE_ в клиент не попадают.
  • Большое число модулей в dev даёт много запросов (влияет на тяжёлые проекты, помогает pre-bundling).
  • Плагин порядок важен (enforce: "pre" | "post").

Практика

  1. Настройте алиасы, прокси, manualChunks и визуализатор.
  2. Напишите свой мини-плагин (transform).
  3. Найдите расхождение dev и prod через vite preview.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки