Отличие команд dev, build и preview

В основе рабочего процесса в Vite лежат три ключевые команды:

npm run dev
npm run build
npm run preview

Каждая команда запускает совершенно разный режим работы проекта. Несмотря на внешнюю простоту, между ними существуют фундаментальные различия в механизме обработки модулей, скорости запуска, оптимизации кода и назначении.

Команда dev

Назначение

Команда dev запускает сервер разработки.

npm run dev

Обычно внутри package.json находится следующий скрипт:

{
  "scripts": {
    "dev": "vite"
  }
}

После запуска Vite поднимает локальный HTTP-сервер:

VITE v5.0.0 ready in 320 ms

➜ Local: http://localhost:5173/

Как работает режим разработки

Главная особенность Vite — отсутствие полной сборки проекта при старте dev-сервера.

Классические сборщики вроде Webpack перед запуском собирают весь проект целиком:

  • анализируют зависимости;
  • компилируют модули;
  • объединяют файлы;
  • формируют bundle.

При большом проекте это может занимать десятки секунд.

Vite использует другой подход:

  • браузер загружает ES-модули напрямую;
  • сервер отдает файлы по требованию;
  • обработка выполняется только для реально импортированных модулей.

Работа через нативные ES-модули

Пример:

import { sum } from './utils/math.js';

console.log(sum(5, 2));

В dev-режиме браузер самостоятельно делает запрос:

GET /src/utils/math.js

Vite лишь:

  • преобразует файл при необходимости;
  • возвращает его браузеру;
  • кэширует результат.

Полный bundle при этом не создается.

Горячая перезагрузка HMR

Одной из важнейших возможностей режима dev является HMR (Hot Module Replacement).

При изменении файла:

export const title = 'New title';

Vite:

  1. определяет изменившийся модуль;
  2. пересобирает только его;
  3. отправляет обновление через WebSocket;
  4. браузер заменяет модуль без полной перезагрузки страницы.

Отличие HMR от обычного Live Reload

Live Reload

Обычный live reload:

  1. обнаруживает изменение файла;
  2. полностью перезагружает страницу.

Недостатки:

  • теряется состояние приложения;
  • перезапускаются запросы;
  • сбрасываются формы;
  • заново инициализируется JS.

HMR

HMR обновляет только изменившийся модуль.

Например:

  • меняется CSS;
  • изменяется React-компонент;
  • обновляется Vue SFC.

При этом:

  • состояние приложения может сохраняться;
  • перезагрузка страницы не выполняется;
  • обновление происходит почти мгновенно.

Предварительная оптимизация зависимостей

Во время запуска dev Vite выполняет pre-bundling зависимостей через esbuild.

Например:

import lodash from 'lodash';

Пакеты из node_modules:

  • преобразуются в ESM;
  • объединяются;
  • кэшируются.

Причины этого механизма:

1. Ускорение загрузки

Некоторые библиотеки содержат сотни файлов.

Без оптимизации браузер сделал бы огромное количество запросов.

2. Совместимость CommonJS

Многие npm-пакеты написаны в CommonJS:

module.exports = {}

Vite преобразует их в ESM.

Особенности режима dev

Нет production-оптимизаций

Во время разработки отсутствуют:

  • минификация;
  • tree shaking;
  • удаление dead code;
  • оптимизация ассетов;
  • сжатие.

Главная цель режима — скорость запуска и обновления.

Более удобные sourcemaps

Dev-сервер генерирует удобные sourcemaps.

Это позволяет:

  • видеть исходные файлы;
  • нормально отлаживать TypeScript;
  • анализировать стек ошибок.

Быстрая реакция на изменения

Даже очень большие проекты запускаются быстро, потому что:

  • нет полной сборки;
  • используется ленивое преобразование модулей;
  • активно применяется кэширование.

Команда build

Назначение

Команда build создает production-сборку приложения.

npm run build

Стандартный скрипт:

{
  "scripts": {
    "build": "vite build"
  }
}

Результатом работы обычно становится директория:

dist/

Что происходит во время build

В отличие от dev-режима, здесь выполняется полноценная сборка проекта.

Vite использует:

  • dev-сервер для разработки;
  • Rollup для production-сборки.

Основные этапы build

Анализ графа зависимостей

Vite строит полный dependency graph.

Пример:

main.js
 ├── app.js
 ├── router.js
 └── api.js

Все зависимости анализируются рекурсивно.

Bundle-сборка

Файлы объединяются в оптимизированные чанки.

Например:

dist/assets/index-a1b2c3.js
dist/assets/vendor-x8y9z0.js

Tree Shaking

Неиспользуемый код удаляется.

Пример:

export function used() {}
export function unused() {}

Если импортируется только:

import { used } from './utils.js';

Функция unused не попадет в production bundle.

Минификация

Production-сборка минимизирует код.

Исходный файл:

function calculateTotal(price, tax) {
  return price + tax;
}

После минификации:

function c(t,n){return t+n}

Это уменьшает размер bundle.

Оптимизация CSS

Во время build:

  • объединяются CSS-файлы;
  • удаляются дубликаты;
  • минимизируются стили;
  • извлекается критический CSS.

Оптимизация изображений и ассетов

Vite обрабатывает:

  • PNG;
  • SVG;
  • JPG;
  • шрифты;
  • media-файлы.

Маленькие файлы могут быть встроены в bundle как base64.

Хеширование файлов

Production-сборка добавляет hash к именам файлов:

index-7f3d2a.js
style-a8c91f.css

Это необходимо для корректного кеширования браузером.

При изменении содержимого:

  • меняется hash;
  • браузер загружает новую версию файла.

Code Splitting

Vite автоматически разбивает код на чанки.

Пример динамического импорта:

const module = await import('./admin.js');

Результат:

  • admin.js попадает в отдельный chunk;
  • загружается только при необходимости.

Оптимизация production-сборки

Production build ориентирован на:

  • минимальный размер;
  • высокую скорость загрузки;
  • эффективное кеширование;
  • снижение количества запросов.

Типичная структура production build

dist/
├── assets/
│   ├── index-a1b2.js
│   ├── vendor-f8c1.js
│   └── style-92d1.css
├── index.html

Команда preview

Назначение

Команда preview запускает локальный сервер для просмотра production-сборки.

npm run preview

Скрипт:

{
  "scripts": {
    "preview": "vite preview"
  }
}

Что делает preview

Команда НЕ выполняет сборку.

Она:

  1. берет уже готовую папку dist;
  2. запускает HTTP-сервер;
  3. отдает production-файлы браузеру.

Важная особенность preview

preview работает только после build.

Правильный порядок:

npm run build
npm run preview

Если папка dist отсутствует, preview не сможет запуститься.

Для чего нужен preview

Проверка production-версии

Dev-режим и production могут вести себя по-разному.

Например:

  • различается минификация;
  • работает tree shaking;
  • меняется порядок загрузки;
  • используются production-пути.

Preview позволяет проверить именно production-результат.

Тестирование маршрутизации

Некоторые SPA работают корректно в dev, но ломаются после build.

Например:

/settings/profile

Preview помогает выявить:

  • проблемы history API;
  • ошибки base path;
  • неправильные asset paths.

Проверка производительности

В preview можно анализировать:

  • размер чанков;
  • время загрузки;
  • lazy loading;
  • работу cache headers.

Отличие preview от dev

dev

Режим разработки:

  • HMR;
  • быстрые обновления;
  • отсутствие оптимизации;
  • исходные модули;
  • максимальное удобство разработки.

preview

Режим просмотра production build:

  • минифицированный код;
  • production bundle;
  • готовые чанки;
  • отсутствие HMR;
  • имитация реального деплоя.

Сравнение команд

Команда Назначение Основная цель
vite Dev-сервер Разработка
vite build Production build Оптимизация и сборка
vite preview Локальный preview Проверка production

Разница в скорости запуска

dev

Запускается очень быстро:

ready in 250ms

Причина:

  • отсутствует полная сборка;
  • модули обрабатываются по запросу.

build

Может выполняться значительно дольше:

build completed in 8.4s

Причина:

  • анализ всего проекта;
  • оптимизация;
  • генерация bundle;
  • минификация.

preview

Стартует быстро, потому что:

  • сборка уже готова;
  • требуется только запуск HTTP-сервера.

Различие в обработке модулей

Dev

Модули существуют отдельно:

main.js
utils.js
api.js

Браузер загружает их независимо.

Build

Файлы объединяются:

index-a82d.js
vendor-c91f.js

Различие в sourcemaps

Dev

Максимально подробные.

Подходят для отладки.

Build

Могут:

  • отключаться;
  • минимизироваться;
  • генерироваться отдельно.

Поведение переменных окружения

Во время dev:

VITE_API_URL=http://localhost:3000

Часто используются локальные API.

Во время build:

VITE_API_URL=https://api.production.com

Формируется production-конфигурация.

Использование разных .env файлов

Vite поддерживает:

.env
.env.local
.env.development
.env.production

Во время dev:

.env.development

Во время build:

.env.production

Типичный цикл разработки

Разработка

npm run dev

Production-сборка

npm run build

Проверка production

npm run preview

Почему нельзя использовать dev вместо build

Dev-сервер не предназначен для production:

  • отсутствует оптимизация;
  • нет минимизации;
  • хуже производительность;
  • выше нагрузка;
  • отсутствует корректное кеширование.

Почему preview не заменяет настоящий сервер

vite preview предназначен только для локальной проверки.

Он не является полноценным production-сервером.

Для реального деплоя обычно используются:

  • Nginx
  • Apache HTTP Server
  • Node.js
  • CDN-платформы;
  • cloud hosting.

Наиболее распространённая ошибка начинающих

Попытка запускать production через:

npm run dev

вместо:

npm run build
npm run preview

Из-за этого:

  • размеры файлов отличаются;
  • отсутствует tree shaking;
  • не тестируется production bundle;
  • скрываются ошибки деплоя.

Практическое сравнение режимов

Возможность dev build preview
HMR Да Нет Нет
Минификация Нет Да Уже готова
Bundle Нет Да Использует готовый
Tree shaking Нет Да Уже применен
Production optimization Нет Да Да
Быстрый запуск Да Нет Да
Подходит для разработки Да Нет Нет
Проверка production Нет Частично Да
Оглавление