Оптимизация

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

optimization.checkWasmTypes

boolean

Указывает webpack на проверку несовместимых типов модулей WebAssembly при их импорте/экспорте. По умолчанию optimization.checkWasmTypes включено в production режиме и выключено в остальных случаях.

webpack.config.js

module.exports = {
  //...
  optimization: {
    checkWasmTypes: false,
  },
};

optimization.chunkIds

boolean = false string: 'natural' | 'named' | 'size' | 'total-size' | 'deterministic'

Указывает webpack, какой алгоритм использовать при выборе идентификаторов чанков. Установка optimization.chunkIds в false сообщает webpack, что ни один из встроенных алгоритмов не должен использоваться, так как может быть предоставлен пользовательский алгоритм через плагин. Есть несколько значений по умолчанию для optimization.chunkIds:

Также, если среда разработки, то optimization.chunkIds устанавливается в 'named', а в режиме производства — в 'deterministic'
В противном случае optimization.chunkIds будет установлено по умолчанию в 'natural'

Поддерживаются следующие строковые значения:

Опция	Описание
`'natural'`	Числовые идентификаторы в порядке использования.
`'named'`	Читаемые идентификаторы для лучшей отладки.
`'deterministic'`	Короткие числовые идентификаторы, которые не будут изменяться между компиляциями. Хорошо подходит для кэширования на длительный срок. Включено по умолчанию для режима производства.
`'size'`	Числовые идентификаторы, ориентированные на минимальный начальный размер загрузки.
`'total-size'`	Числовые идентификаторы, ориентированные на минимальный общий размер загрузки.

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: 'named',
  },
};

По умолчанию, минимальная длина составляет 3 цифры, когда optimization.chunkIds установлено в 'deterministic'. Чтобы переопределить это поведение по умолчанию, установите optimization.chunkIds в false и используйте webpack.ids.DeterministicChunkIdsPlugin.

webpack.config.js

module.exports = {
  //...
  optimization: {
    chunkIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicChunkIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.concatenateModules

boolean

Указывает webpack на поиск участков графа модулей, которые можно безопасно объединить в один модуль. Зависит от optimization.providedExports и optimization.usedExports. По умолчанию optimization.concatenateModules включено в production режиме и выключено в остальных случаях.

webpack.config.js

module.exports = {
  //...
  optimization: {
    concatenateModules: true,
  },
};

optimization.emitOnErrors

boolean = false

Используйте optimization.emitOnErrors для вывода ресурсов при возникновении ошибок во время компиляции. Это гарантирует, что ошибочные ресурсы будут выведены. Критические ошибки выводятся в сгенерированный код и приведут к ошибкам во время выполнения.

webpack.config.js

module.exports = {
  //...
  optimization: {
    emitOnErrors: true,
  },
};

optimization.avoidEntryIife

boolean = false

5.95.0+

Используйте optimization.avoidEntryIife для предотвращения обертывания модуля входа в IIFE, когда это требуется (поиск "This entry needs to be wrapped in an IIFE because" в JavascriptModulesPlugin). Данный подход помогает оптимизировать производительность для JavaScript-движков и позволяет использовать tree shaking при создании библиотек ESM.

В настоящее время optimization.avoidEntryIife может оптимизировать только один модуль входа вместе с другими модулями.

По умолчанию optimization.avoidEntryIife включено в production режиме и выключено в противном случае.

webpack.config.js

module.exports = {
  //...
  optimization: {
    avoidEntryIife: true,
  },
};

optimization.flagIncludedChunks

boolean

Указывает webpack на определение и пометку чанков, которые являются подмножествами других чанков, таким образом, чтобы подмножества не загружались, когда больший чанк уже загружен. По умолчанию optimization.flagIncludedChunks включено в production режиме и выключено в остальных случаях.

webpack.config.js

module.exports = {
  //...
  optimization: {
    flagIncludedChunks: true,
  },
};

optimization.innerGraph

boolean = true

optimization.innerGraph указывает webpack, проводить ли анализ внутреннего графа для неиспользуемых экспортов.

webpack.config.js

module.exports = {
  //...
  optimization: {
    innerGraph: false,
  },
};

optimization.mangleExports

boolean string: 'deterministic' | 'size'

optimization.mangleExports позволяет управлять маппингом экспортов.

По умолчанию optimization.mangleExports: 'deterministic' включено в production режиме и выключено в остальных случаях.

Поддерживаются следующие значения:

Опция	Описание
`'size'`	Короткие имена — обычно один символ — ориентированные на минимальный размер загрузки.
`'deterministic'`	Короткие имена — обычно два символа — которые не будут меняться при добавлении или удалении экспортов. Хорошо подходит для кэширования на длительный срок.
`true`	То же, что и `'deterministic'`
`false`	Сохранить оригинальное имя. Хорошо подходит для удобочитаемости и отладки.

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleExports: true,
  },
};

optimization.mangleWasmImports

boolean = false

При установке в true указывает webpack на уменьшение размера WASM путём изменения импортов на более короткие строки. Это приводит к маппингу имён модулей и экспортов.

webpack.config.js

module.exports = {
  //...
  optimization: {
    mangleWasmImports: true,
  },
};

optimization.mergeDuplicateChunks

boolean = true

Указывает webpack на слияние чанков, содержащих одинаковые модули. Установка optimization.mergeDuplicateChunks в false отключит эту оптимизацию.

webpack.config.js

module.exports = {
  //...
  optimization: {
    mergeDuplicateChunks: false,
  },
};

optimization.minimize

boolean = true

Указывает webpack на минимизацию бандла с помощью TerserPlugin или указанного(ых) плагина(ов) в optimization.minimizer.

webpack.config.js

module.exports = {
  //...
  optimization: {
    minimize: false,
  },
};

optimization.minimizer

[TerserPlugin] или [function (compiler)] или undefined | null | 0 | false | ""

Позволяет переопределить минимизатор по умолчанию, предоставив другой минимизатор или несколько настраиваемых экземпляров TerserPlugin. Начиная с webpack 5.87.0, ложные значения могут использоваться для условного отключения отдельных минимизаторов.

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
    ],
  },
};

Или как функция:

module.exports = {
  optimization: {
    minimizer: [
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({
          /* your config */
        }).apply(compiler);
      },
    ],
  },
};

По умолчанию webpack установит optimization.minimizer в следующее значение:

[
  {
    apply: (compiler) => {
      // Lazy load the Terser plugin
      const TerserPlugin = require('terser-webpack-plugin');
      new TerserPlugin({
        terserOptions: {
          compress: {
            passes: 2,
          },
        },
      }).apply(compiler);
    },
  },
]; // eslint-disable-line

К которому можно получить доступ с '...' в случае, если вы хотите сохранить его при настройке optimization.minimizer:

module.exports = {
  optimization: {
    minimizer: [new CssMinimizer(), '...'],
  },
};

В принципе, '...' является сокращённой ссылкой на значение конфигурации по умолчанию, которое webpack бы иначе установил за нас.

optimization.moduleIds

boolean: false string: 'natural' | 'named' | 'deterministic' | 'size'

Указывает webpack, какой алгоритм использовать при выборе идентификаторов модулей. Установка optimization.moduleIds в false сообщает webpack, что ни один из встроенных алгоритмов не должен использоваться, так как может быть предоставлен пользовательский алгоритм через плагин.

Поддерживаются следующие строковые значения:

Опция	Описание
`natural`	Числовые идентификаторы в порядке использования.
`named`	Читаемые идентификаторы для лучшей отладки.
`deterministic`	Имена модулей хешируются в небольшие числовые значения.
`size`	Числовые идентификаторы, ориентированные на минимальный начальный размер загрузки.

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: 'deterministic',
  },
};

deterministic параметр полезен для длительного кэширования, но всё же приводит к более компактным бандлам по сравнению с hashed. Длина числового значения выбирается для заполнения не более 80% пространства идентификаторов. По умолчанию минимальная длина составляет 3 цифры, когда optimization.moduleIds установлено в deterministic. Чтобы переопределить поведение по умолчанию, установите optimization.moduleIds в false и используйте webpack.ids.DeterministicModuleIdsPlugin.

webpack.config.js

module.exports = {
  //...
  optimization: {
    moduleIds: false,
  },
  plugins: [
    new webpack.ids.DeterministicModuleIdsPlugin({
      maxLength: 5,
    }),
  ],
};

optimization.nodeEnv

boolean = false string

Указывает webpack на установку process.env.NODE_ENV в заданное строковое значение. optimization.nodeEnv использует DefinePlugin, если не установлено в false. optimization.nodeEnv по умолчанию равно режиму, если установлено, иначе по умолчанию равно 'production'.

Возможные значения:

любая строка: значение, которое необходимо установить для process.env.NODE_ENV.
false: не изменять/устанавливать значение process.env.NODE_ENV.

webpack.config.js

module.exports = {
  //...
  optimization: {
    nodeEnv: 'production',
  },
};

optimization.portableRecords

boolean

optimization.portableRecords указывает webpack на генерацию записей с относительными путями, чтобы иметь возможность перемещать папку контекста.

По умолчанию optimization.portableRecords отключен. Автоматически включается, если хотя бы один из параметров записи, предоставленных в конфигурации webpack: recordsPath, recordsInputPath, recordsOutputPath.

webpack.config.js

module.exports = {
  //...
  optimization: {
    portableRecords: true,
  },
};

optimization.providedExports

boolean

Указывает webpack выяснить, какие экспорты предоставляются модулями, чтобы сгенерировать более эффективный код для export * from .... По умолчанию optimization.providedExports включен.

webpack.config.js

module.exports = {
  //...
  optimization: {
    providedExports: false,
  },
};

optimization.realContentHash

boolean

Добавляет дополнительный проход хэширования компиляции после обработки ресурсов, чтобы получить правильные хэши содержимого ресурсов. Если realContentHash установлено в false, для расчёта хэша используются внутренние данные, и он может измениться, даже если ресурсы идентичны. По умолчанию optimization.realContentHash включен в режиме production mode и отключен в противном случае.

webpack.config.js

module.exports = {
  //...
  optimization: {
    realContentHash: false,
  },
};

optimization.removeAvailableModules

boolean = false

Указывает webpack обнаружить и удалить модули из пакетов, когда эти модули уже включены во всех родительских. Установка optimization.removeAvailableModules в true включит эту оптимизацию.

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeAvailableModules: true,
  },
};

optimization.removeEmptyChunks

boolean = true

Указывает webpack обнаружить и удалить пустые пакеты. Установка optimization.removeEmptyChunks в false отключит эту оптимизацию.

webpack.config.js

module.exports = {
  //...
  optimization: {
    removeEmptyChunks: false,
  },
};

optimization.runtimeChunk

object string boolean

Установка optimization.runtimeChunk в true или 'multiple' добавляет дополнительный пакет, содержащий только запуск, к каждому входному точке. Этот параметр является псевдонимом для:

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

Значение 'single' вместо этого создает файл runtime, который будет совместно использоваться всеми сгенерированными пакетами. Этот параметр является псевдонимом для:

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
  },
};

Установив optimization.runtimeChunk в object, можно указать только свойство name, которое представляет имя или функцию создания имени для пакетов runtime.

По умолчанию false: каждый пакет входа содержит runtime.

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
    },
  },
};

optimization.sideEffects

boolean = true string: 'flag'

Указывает webpack распознавать флаг sideEffects в package.json или правилах, чтобы пропустить модули, помеченные как не содержащие побочных эффектов, когда экспорты не используются.

package.json

{
  "name": "awesome npm module",
  "version": "1.0.0",
  "sideEffects": false
}

optimization.sideEffects зависит от optimization.providedExports для включения. Эта зависимость имеет стоимость времени сборки, но устранение модулей оказывает положительное влияние на производительность из-за меньшего кода. Эффект этой оптимизации зависит от вашей кодовой базы, попробуйте её для потенциального повышения производительности.

webpack.config.js

module.exports = {
  //...
  optimization: {
    sideEffects: true,
  },
};

Чтобы использовать только ручной флаг и не анализировать исходный код:

module.exports = {
  //...
  optimization: {
    sideEffects: 'flag',
  },
};

Значение 'flag' используется по умолчанию в сборках, не являющихся производственными.

optimization.splitChunks

object

По умолчанию webpack v4+ предоставляет новые стратегии общих пакетов из коробки для динамически импортированных модулей. Смотрите доступные параметры для настройки этого поведения на странице SplitChunksPlugin.

optimization.usedExports

boolean = true string: 'global'

Указывает webpack определить используемые экспорты для каждого модуля. Это зависит от optimization.providedExports. Информация, собранная optimization.usedExports, используется другими оптимизациями или генерацией кода, т.е. экспорты не генерируются для неиспользуемых экспортов, имена экспортов изменяются на идентификаторы из одного символа, когда все используемые соответствуют. Удаление неиспользуемого кода в минимизаторах будет извлечь пользу из этого и может удалить неиспользуемые экспорты.

webpack.config.js

module.exports = {
  //...
  optimization: {
    usedExports: false,
  },
};

Чтобы отказаться от анализа используемых экспортов по runtime:

module.exports = {
  //...
  optimization: {
    usedExports: 'global',
  },
};

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/optimization