Чим відрізняється dev-збірка від prod?

Повне пояснення

Що це і навіщо – Dev‑збірка (development build) призначена для локальної розробки: вона зберігає повну інформацію про код, включаючи source maps, що дозволяє відстежувати помилки в оригінальних файлах. Prod‑збірка (production build) створюється для розгортання в продакшн‑середовищі, де важливі швидкість завантаження і безпека.

Ключові принципи/терміни –

• Source maps: карти, що зв’язують мінімізований код з оригінальним.
• Tree shaking: видалення невикористаних експортів під час bundling.
• Minification: стискання коду, видалення пробілів і коментарів.
• Cache‑busting: додавання хешу до імен файлів для контролю кешу.

Як це працює – інструмент bundler (наприклад, Vite/webpack) читає конфігурацію: у режимі dev включає hot‑reload, source maps і не мінімізує код; у prod застосовуються оптимізації: minify, tree‑shake, code splitting.

Практика і реалізація – у Vite:

vite build --mode production   # prod‑збірка
vite build --mode development  # dev‑збірка

У webpack:

module.exports = {
  mode: process.env.NODE_ENV, // "development" або "production"
};

Тестування – для prod‑збірки важливо перевірити, що bundle працює без помилок: Jest + jsdom можна використовувати для unit‑тестів, а Cypress – для end‑to‑end.

Безпека і приватність – у prod‑збірці слід вимкнути console.log, обмежити CORS, встановити CSP‑заголовки.

Оптимізація і масштабування – використання code splitting, lazy loading компонентів, CDN для статичних файлів.

Часті помилки – 1) Відсутність source maps у prod, що ускладнює дебаг; 2) Необхідність вказати правильний NODE_ENV; 3) Залишені console.log у продакшн‑bundle.

Cheatsheet –

• vite build --mode production → prod.
• vite build --mode development → dev.
• У webpack: mode: 'production' мінімізує, mode: 'development' додає source maps.
• Перевірка bundle‑size за допомогою webpack-bundle-analyzer.