Режимы development и production: ключевые отличия

Концепция режима сборки

В Webpack режим сборки определяется через параметр mode, который влияет на внутренние оптимизации, поведение плагинов и итоговую структуру бандла. Значения:

  • development — режим разработки
  • production — режим продакшена
  • none — отключение предустановленных оптимизаций

Режим не просто переключатель, а набор преднастроенных конфигураций, которые затрагивают компиляцию, минификацию, генерацию source maps и стратегию кэширования.

module.exports = {
  mode: 'development'
};

или

module.exports = {
  mode: 'production'
};

Внутренние предустановки Webpack

При выборе mode Webpack автоматически меняет множество параметров без явного указания:

Поведение в production

  • включается минификация JS
  • активируется tree shaking
  • оптимизируется runtime
  • включается deterministic chunk ids
  • включается contenthash для файлов
  • отключаются dev-инструменты

Поведение в development

  • отключена минификация
  • ускоренная сборка
  • улучшенные source maps
  • читаемые имена модулей и чанков
  • активный HMR (Hot Module Replacement)

Минификация и оптимизация кода

Production

В production используется встроенный TerserPlugin (в Webpack 5 он подключается автоматически):

  • удаление комментариев
  • устранение dead code
  • сокращение переменных
  • агрессивная оптимизация выражений

Дополнительно:

  • CSS минифицируется через CssMinimizerPlugin
  • JSON и другие ассеты оптимизируются
optimization: {
  minimize: true
}

Development

Минификация отключена:

  • код остаётся читаемым
  • сохраняются имена функций и переменных
  • упрощается отладка

Это снижает скорость сборки, но ускоряет цикл разработки за счёт уменьшения времени трансформации AST.

Source maps: различия стратегий

Development

Используются быстрые и точные карты исходников:

devtool: 'eval-source-map'

или

devtool: 'cheap-module-source-map'

Особенности:

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

Production

Source maps либо отключаются, либо упрощаются:

devtool: 'source-map'

или полностью:

devtool: false

Причины:

  • уменьшение размера сборки
  • защита исходного кода
  • снижение нагрузки на сборщик

Оптимизация имен модулей и чанков

Production

Включается стабильная система именования:

optimization: {
  moduleIds: 'deterministic',
  chunkIds: 'deterministic'
}

Результат:

  • одинаковые хеши между сборками
  • эффективное кэширование CDN
  • минимизация cache invalidation

Development

Используются читаемые имена:

  • src_components_Button_js
  • node_modules_react_index_js

Это упрощает диагностику ошибок и анализ графа зависимостей.

Tree Shaking

Tree shaking активен преимущественно в production-режиме.

Условия:

  • использование ES Modules (import/export)
  • sideEffects: false или корректная настройка в package.json
{
  "sideEffects": false
}

Production

  • удаляются неиспользуемые экспорты
  • вырезается dead code
  • уменьшается размер бандла

Development

Tree shaking может быть частично отключён или менее агрессивен, чтобы сохранить предсказуемость модулей и ускорить сборку.

Кэширование и стабильность сборок

Production

Активируются механизмы долгосрочного кэширования:

output: {
  filename: '[name].[contenthash].js'
}

Особенности:

  • contenthash зависит от содержимого файла
  • изменение кода меняет только нужный файл
  • эффективная работа CDN

Дополнительно:

  • runtime chunk выносится отдельно
  • splitChunks оптимизируется
optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all'
  }
}

Development

Обычно используется упрощённое именование:

filename: '[name].js'

Причины:

  • нет необходимости в долгосрочном кэше
  • частые пересборки делают хэши избыточными

DevServer и HMR

Development

Используется webpack-dev-server:

  • автоматическая пересборка
  • Hot Module Replacement
  • live reload
devServer: {
  hot: true,
  open: true
}

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

Production

DevServer полностью отключён:

  • сборка выполняется один раз
  • результат — статические файлы
  • HMR не используется

Переменные окружения

Webpack часто используется совместно с DefinePlugin:

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
});

Production

  • process.env.NODE_ENV === 'production'
  • библиотеки (React, Vue) включают оптимизированные режимы
  • отключаются dev-логики внутри зависимостей

Development

'process.env.NODE_ENV': JSON.stringify('development')
  • включаются предупреждения
  • активируются проверки состояния
  • расширенная диагностика

Логирование и статистика сборки

Development

  • подробные сообщения об ошибках
  • stack traces
  • информация о модулях

Production

  • минимизированный вывод
  • фокус на критических ошибках
  • отключение лишнего логирования
stats: 'errors-only'

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

Development

Приоритет:

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

Используются:

  • memory cache
  • быстрые loader’ы
  • упрощённые source maps

Production

Приоритет:

  • оптимальность результата
  • минимальный размер бандла
  • максимальная совместимость с CDN

Используются:

  • полная оптимизация AST
  • минификация
  • агрессивное разделение кода

SplitChunks и разделение кода

Production

Активное разбиение:

  • vendor chunks
  • common chunks
  • async chunks
splitChunks: {
  chunks: 'all',
  minSize: 20000
}

Цель — уменьшение повторного кода и улучшение загрузки через кэш.

Development

Разбиение упрощается:

  • меньше оптимизаций
  • быстрее сборка
  • менее агрессивное объединение

Поведение loader’ов и плагинов

Некоторые loader’ы и плагины меняют поведение в зависимости от mode:

CSS loaders

  • production: извлечение в отдельные файлы (MiniCssExtractPlugin)
  • development: инъекция через style-loader

Babel

  • production: более агрессивная трансформация
  • development: включение debug-информации

Side effects и чистка кода

Production-режим активнее учитывает:

{
  "sideEffects": false
}

Webpack может:

  • удалять импортируемые, но неиспользуемые модули
  • оптимизировать граф зависимостей
  • исключать побочные эффекты

Различия в runtime Webpack

Production

  • минимизированный runtime
  • оптимизированная загрузка чанков
  • стабильные идентификаторы

Development

  • расширенный runtime с проверками
  • больше диагностической информации
  • дополнительные хуки для HMR

Итоговые архитектурные различия

Разделение режимов формирует два принципиально разных подхода к сборке:

  • development ориентирован на скорость итераций и наблюдаемость
  • production ориентирован на эффективность доставки и минимальный размер

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

Оглавление