В чем разница между dev и deploy?

Разница между dev и deploy

dev и deploy — это две разные фазы разработки веб-приложения. Разница между ними критична для понимания workflow разработки, оптимизации производительности и безопасности.

Dev (Development/Development Mode)

dev — это режим разработки, когда разработчик работает на своём компьютере и пишет код.

npm run dev
# или
ng serve
# или
python manage.py runserver

Характеристики dev-режима:

1. Горячая перезагрузка (Hot Reload/HMR):

// Когда ты сохранишь файл — браузер автоматически перезагрузит изменения
// Это сильно ускоряет разработку
function Component() {
  return <h1>Hello</h1>;  // Изменишь текст -> браузер обновит тут же
}

2. Минимизация отсутствует:

// Исходный код остаётся читаемым
function addUser(userData) {
  const user = {
    name: userData.name,
    email: userData.email,
    createdAt: new Date(),
  };
  return user;
}
// На диске код остаётся точно таким же

3. Source maps включены:

// При отладке в браузере видишь исходный код, не минифицированный
// DevTools показывают точные номера строк
// Можно ставить точки останова и отлаживать

4. Логирование и debug информация:

const logger = {
  log: (msg) => console.log('[DEV]', msg),
  warn: (msg) => console.warn('[DEV]', msg),
  error: (msg) => console.error('[DEV]', msg),
};

logger.log('User loaded'); // Видишь в консоли

5. Проверки и валидация:

// React строгий режим (Strict Mode) включен для выявления проблем
// ESLint проверяет код при сохранении
// TypeScript проверяет типы
// Все ошибки видны сразу в консоли

6. Нет оптимизации и сжатия:

// Файлы не сжимаются
// Картинки не оптимизируются
// CSS не минифицируется
// Это медленнее, но удобнее для разработки

Deploy (Production Deployment)

deploy — это фаза, когда приложение выпускается в production и становится доступным пользователям.

npm run build
npm run start
# или
docker build -t myapp .
docker run myapp
# или
git push production main

Характеристики production-режима:

1. Полная минимизация и оптимизация:

// Исходный код:
function addUserToDatabase(userData) {
  const user = {
    name: userData.name,
    email: userData.email,
    isActive: true,
    createdAt: new Date(),
  };
  saveUserToDatabase(user);
  return user;
}

// После минимизации (production bundle):
// function a(e){return{name:e.name,email:e.email,isActive:!0,createdAt:new Date()},void b(e)}
// Переменные переименованы: userData -> e, user -> опущен
// Пробелы и переносы удалены

2. Code splitting и tree shaking:

// Только используемый код попадает в bundle
// Неиспользуемые функции удаляются

// dev: весь код ~500KB
// production: только нужный код ~50KB

3. Отключены dev-инструменты:

// console.log удаляются
// debugger удаляется
// Проверки Strict Mode выключены
// Source maps НЕ отправляются пользователю

4. Оптимизация картинок и ассетов:

// Картинки переводятся в WebP
// Размеры оптимизируются для разных экранов
// SVG минимизируются
// Шрифты оптимизируются

5. Кеширование и версионирование:

// Файлы получают хеши:
// index-a3f9d2e1.js
// styles-b4e2c1f3.css
// Браузер кеширует файлы на месяцы
// При обновлении кода -> новый хеш -> браузер загрузит новую версию

6. Окружение оптимизировано:

// process.env.NODE_ENV = 'production'
// Логирование отключено или минимально
// Ошибки скрыты от пользователя (но логируются на сервер)
// Все проверки безопасности включены

Сравнительная таблица

Практический пример: Next.js

Dev режим:

$ npm run dev
# Запускает сервер на localhost:3000
# Hot reload: изменил файл -> браузер обновил
# Полный исходный код видно в Network

Production режим:

$ npm run build
# Собирает оптимизированный бандл
# Генерирует static-файлы (HTML, JS, CSS)
# Проверяет типы TypeScript

$ npm run start
# Запускает production сервер
# Включен кеширование
# Готово для деплоя

Окружение переменных

// .env.development
REACT_APP_API_URL=http://localhost:8000
REACT_APP_DEBUG=true
REACT_APP_LOG_LEVEL=debug

// .env.production
REACT_APP_API_URL=https://api.example.com
REACT_APP_DEBUG=false
REACT_APP_LOG_LEVEL=error

Использование в коде:

if (process.env.NODE_ENV === 'development') {
  // Логирование, которое видно только в dev
  console.log('User data:', userData);
}

const apiUrl = process.env.REACT_APP_API_URL;
// dev: http://localhost:8000
// production: https://api.example.com

Почему это важно?

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

• Production минимизирует код, уменьшает размер бандла
• Пользователи получают приложение быстрее
• Экономия трафика

2. Безопасность:

• Source maps НЕ отправляются в production
• Логирование скрыто (не видны внутренние детали)
• API URLs защищены

3. Опыт разработки:

• Dev режим ускоряет разработку (hot reload)
• Production режим ускоряет работу пользователей

4. Отладка:

• Dev: полная информация для разработчика
• Production: скрытые ошибки, но логируются на сервер для анализа

Резюме

Dev — режим разработки с горячей перезагрузкой, полной отладочной информацией и неминимизированным кодом. Production — режим для пользователей с полной оптимизацией, минимизацией, кешированием и скрытыми деталями реализации. Оба режима критичны: dev ускоряет разработку, production обеспечивает быстрое и безопасное приложение для пользователей.