Оптимизация

С версии 4 webpack выполняет оптимизации за вас в зависимости от выбранного mode, но все оптимизации доступны для ручного конфигурирования и переопределения.

`optimization.minimize`

boolean

Укажите webpack, чтобы сжимать бандл с помощью TerserPlugin.

Это включено по умолчанию в режиме production.

webpack.config.js

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

Узнайте, как работает режим.

`optimization.minimizer`

[Plugin] и/или [function (compiler)]

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

webpack.config.js

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

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        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);
      }
    ],
  }
};

`optimization.splitChunks`

object

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

`optimization.runtimeChunk`

object string boolean

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

webpack.config.js

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

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

webpack.config.js

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

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

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

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

webpack.config.js

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

`optimization.noEmitOnErrors`

boolean

Используйте optimization.noEmitOnErrors для пропуска фазы вывода при наличии ошибок во время компиляции. Это гарантирует, что не будут выводиться проблемные ресурсы. Флаг emitted в статистике false для всех ресурсов.

webpack.config.js

module.exports = {
  //...
  optimization: {
    noEmitOnErrors: true
  }
};

Если вы используете webpack CLI, процесс webpack не будет завершаться с кодом ошибки, когда этот плагин включен. Если вы хотите, чтобы webpack «выдавал ошибку» при использовании CLI, ознакомьтесь с опцией bail.

`optimization.namedModules`

boolean = false

Указывает webpack использовать читаемые идентификаторы модулей для лучшей отладки. Когда optimization.namedModules не задано в конфигурации webpack, webpack включит его по умолчанию для режима development и отключит для режима production.

webpack.config.js

module.exports = {
  //...
  optimization: {
    namedModules: true
  }
};

`optimization.namedChunks`

boolean = false

Указывает webpack использовать читаемые идентификаторы блоков для лучшей отладки. Этот параметр включен по умолчанию для режима development и отключен для режима production, если не указано в конфигурации webpack.

webpack.config.js

module.exports = {
  //...
  optimization: {
    namedChunks: true
  }
};

`optimization.moduleIds`

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

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

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

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

webpack.config.js

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

`optimization.chunkIds`

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

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

если optimization.occurrenceOrder включено, optimization.chunkIds устанавливается в 'total-size'
Если предыдущее условие не выполняется, и если optimization.namedChunks включено, optimization.chunkIds устанавливается в 'named'
Если ни одно из вышеперечисленных условий не выполняется, optimization.chunkIds будет установлено по умолчанию в 'natural'

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

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

webpack.config.js

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

`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.mangleWasmImports`

boolean = false

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

webpack.config.js

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

`optimization.removeAvailableModules`

boolean = false

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

webpack.config.js

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

optimization.removeAvailableModules снижает производительность webpack и будет отключена в режиме production по умолчанию в следующей основной версии. Отключите её в режиме production , если вам нужна дополнительная производительность сборки.

`optimization.removeEmptyChunks`

boolean = true

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

webpack.config.js

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

`optimization.mergeDuplicateChunks`

boolean = true

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

webpack.config.js

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

`optimization.flagIncludedChunks`

boolean

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

webpack.config.js

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

`optimization.occurrenceOrder`

boolean

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    occurrenceOrder: false
  }
};

`optimization.providedExports`

boolean

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

webpack.config.js

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

`optimization.usedExports`

boolean

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

webpack.config.js

module.exports = {
  //...
  optimization: {
    usedExports: true
  }
};

`optimization.concatenateModules`

boolean

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

webpack.config.js

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

`optimization.sideEffects`

boolean

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

package.json

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

Обратите внимание, что sideEffects должен находиться в файле npm модуля package.json и не означает, что вам нужно установить sideEffects в false в собственном проекте package.json, что требует большого модуля.

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

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

webpack.config.js

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

`optimization.portableRecords`

boolean

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

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

webpack.config.js

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

Дополнительные материалы

webpack 4: Разделение кода, граф чанков и оптимизация splitChunks

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