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

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

performance

object

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

performance.assetFilter

function(assetFilename) => boolean

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

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

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

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

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

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',
  },
};

Будет отображена ошибка, уведомляющая вас о большом активе. Рекомендуется использовать этот подход во время сборки на производстве, чтобы избежать развертывания производственных пакетов, которые слишком велики и влияют на производительность веб-страницы.

performance.maxAssetSize

number = 250000

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

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

performance.maxEntrypointSize

number = 250000

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

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