パフォーマンス

これらのオプションを使用すると、特定のファイルサイズ制限を超えるアセットおよびエントリポイントについて、webpackがどのように通知するかを制御できます。この機能は、webpackパフォーマンス予算のアイデアに触発されました。

`performance`

object

パフォーマンスヒントの表示方法を設定します。たとえば、250kbを超えるアセットがある場合、webpackはこれを通知する警告を発行します。

function(assetFilename) => boolean

このプロパティを使用すると、webpackはパフォーマンスヒントの計算に使用するファイルを制御できます。デフォルトの関数は次のとおりです。

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

独自の関数を渡すことで、このプロパティをオーバーライドできます。

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

上記の例では、.jsファイルに基づいてのみパフォーマンスヒントが表示されます。

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

ヒントのオン/オフを切り替えます。さらに、ヒントが見つかったときに、エラーまたは警告のどちらをスローするかをwebpackに指示します。

250kbを超えるアセットが作成されたと仮定します。

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

ヒントの警告やエラーは表示されません。

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

大きなアセットを通知する警告が表示されます。開発環境ではこのような設定をお勧めします。

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

大きなアセットを通知するエラーが表示されます。ウェブページのパフォーマンスに影響を与える、大きすぎる本番バンドルをデプロイしないようにするために、本番ビルド中にhints: "error"を使用することをお勧めします。

number = 250000

アセットとは、webpackから出力されたすべてのファイルです。このオプションは、webpackが個々のアセットサイズ（バイト単位）に基づいてパフォーマンスヒントを発行するタイミングを制御します。

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

number = 250000

エントリポイントは、特定のエントリの初期ロード時間中に利用されるすべてのアセットを表します。このオプションは、webpackが最大エントリポイントサイズ（バイト単位）に基づいてパフォーマンスヒントを発行するタイミングを制御します。

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

« 前へ