Webpackでパフォーマンス予算を実施します

最新のWebアプリケーションは、単一の巨大なJavaScriptパッケージに依存しなくなりました。調査によると、パッケージが大きくなると、特に低およびミッドエンドのモバイルデバイスでは、メモリの使用量とCPU負荷が増加しています。 WebPackは、パッケージのサイズを削減し、リソースの読み込みの優先順位を制御するための複数の機能を提供します。その中で最も重要なのは、コードセグメンテーションとパフォーマンスのヒントです。コードセグメンテーションは、コードを複数のパッケージに分割し、オンデマンドまたは並行してロードします。パフォーマンスのヒント不要なコードを最適化または削除するために、構築時にパッケージサイズが指定されたしきい値を超えるかどうかを検出します。

webpackデフォルトでは、リソースサイズまたはエントリポイントが250kb（244kib）を超えると警告が発行されますが、パフォーマンスプロンプトの方法とサイズのしきい値は、 webpack.config.jsファイルのperformanceオブジェクトを介して表示される方法とサイズのしきい値を構成できます。この記事では、この機能を最初の防衛線として使用する方法について説明して、パフォーマンスの劣化を防ぎます。

予算をカスタマイズします

デフォルトのリソースとエントリポイントサイズのしきい値は、必ずしもニーズと一致するわけではありませんが、構成できます。たとえば、小さなブログの予算は50kb（48.8kib）のリソースとエントリポイントをそれぞれ持っている場合があります。 webpack.config.jsの関連する設定は次のとおりです。

 module.exports = {
  パフォーマンス： {
    maxassetsize：50000、
    maxentrypointsize：50000、
  }
};

maxAssetSizeとmaxEntrypointSizeプロパティは、リソースとエントリポイントのしきい値サイズ（バイト単位）をそれぞれ制御します。 maxEntrypointSize 、 entryオブジェクトにリストされているファイル（通常はJavaScriptまたはSASSファイル）から作成されたパッケージが指定されたしきい値を超えないことを保証します。 maxAssetSize 、Webpack（画像、フォントなどなど）によって生成された他のリソースに対して同じ制限を強制します。

しきい値を超えるとエラーが表示されます

Webpackは、デフォルトで予算のしきい値を超えた場合に警告を発行します。これは開発環境には十分ですが、生産環境では十分ではありません。 hintsプロパティをperformanceオブジェクトに追加して'error'に設定することにより、エラーをトリガーできます。

 module.exports = {
  パフォーマンス： {
    maxassetsize：50000、
    maxentrypointsize：50000、
    ヒント：「エラー」、
  }
};

hints属性のその他の有効な値は、 'warning'とfalseです。 false 、指定された制限を超えている場合でも、警告を完全に無効にします。生産モードでfalseを使用することはお勧めしません。

特定のリソースを除外します

Webpackは、生成するリソースの種類ごとにサイズのしきい値を実施します。リソースが指定された制限を超えると、エラーがスローされます。たとえば、Webpackが画像を処理するように構成されている場合、画像の1つがしきい値を超える限りエラーが発生します。

assetFilterプロパティを使用して、パフォーマンスプロンプトを計算するために使用されるファイルを制御できます。

 module.exports = {
  パフォーマンス： {
    maxassetsize：50000、
    maxentrypointsize：50000、
    ヒント：「エラー」、
    assetfilter：function（assetfilename）{
      return！assetfilename.endswith（'。jpg '）;
    }、
  }
};

これにより、Webpackは、パフォーマンスプロンプト計算を実行するときに.jpgで終了するファイルを除外するように指示されます。より複雑なロジックを使用して、さまざまな環境、ファイルタイプ、その他のリソースの条件を満たすことができます。

制限

現在の制限の1つは、すべてのリソースとエントリポイントに同じ予算のしきい値が適用されることです。言い換えれば、JavaScript、CSS、および画像ファイルのさまざまな制限を設定するなど、複数の予算は必要に応じてまだ設定されていません。ただし、この制限を削除するはずのオープンプルリクエストがすでにあります。

要約します

プロジェクトの開始時にパフォーマンス予算をセットアップおよび実施すると便利です。依存関係の大きさに注意を払うことを思い出させ、予算を避けるためのより軽い代替品を見つけることを奨励します。

しかし、パフォーマンスの予算はそこで止まりません！リソースサイズは、パフォーマンスに影響を与える多くの要因の1つにすぎないため、最高のエクスペリエンスが提供されるためには、さらに多くの作業が必要です。灯台テストを実行することは、改善のための他の指標や提案を理解するのに最適な方法です。

以上がWebpackでパフォーマンス予算を実施しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。