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

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

performance

object

Настройте отображение подсказок производительности. Например, если у вас есть актив, превышающий 250 КБ, webpack выведет предупреждение, уведомляя вас об этом.

performance.hints

string = 'warning': 'error' | 'warning' boolean: false

Включает/отключает подсказки. Кроме того, сообщает webpack, выводить ошибку или предупреждение при обнаружении подсказок.

Предположим, создан актив, превышающий 250 КБ:

module.exports = {
  //...
  performance: {
    hints: false
  }
};

Подсказки-предупреждения или ошибки не отображаются.

module.exports = {
  //...
  performance: {
    hints: 'warning'
  }
};

Будет отображено предупреждение, информирующее вас о большом активе. Мы рекомендуем такой подход для сред разработки.

module.exports = {
  //...
  performance: {
    hints: 'error'
  }
};

Будет отображена ошибка, уведомляющая вас о большом активе. Мы рекомендуем использовать hints: "error" во время сборки в производстве для предотвращения развертывания производственных пакетов, которые слишком велики и влияют на производительность веб-страницы.

performance.maxEntrypointSize

number = 250000

Точка входа представляет все активы, которые будут использоваться во время первоначальной загрузки для определённой точки входа. Этот параметр управляет тем, когда webpack должен выводить подсказки производительности на основе максимального размера точки входа в байтах.

module.exports = {
  //...
  performance: {
    maxEntrypointSize: 400000
  }
};

performance.maxAssetSize

number = 250000

Актив — любой файл, выпущенный webpack. Этот параметр управляет тем, когда webpack выводит подсказку производительности, основываясь на размере отдельного актива в байтах.

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000
  }
};

performance.assetFilter

function(assetFilename) => boolean

Этот параметр позволяет webpack управлять файлами, используемыми для расчёта подсказок производительности. По умолчанию функция:

function assetFilter(assetFilename) {
  return !(/\.map$/.test(assetFilename));
}

Вы можете переопределить этот параметр, передав свою собственную функцию:

module.exports = {
  //...
  performance: {
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.js');
    }
  }
};

В приведённом примере подсказки производительности будут основаны только на файлах .js.