Webpack でパフォーマンス バジェットを設定する

Webpack は警告だけでなく、バンドルのサイズを縮小する方法についての推奨事項も提供します。推奨される手法については、ウェブの基礎をご覧ください。

カスタム パフォーマンス バジェットの設定

適切なパフォーマンス バジェットは、プロジェクトの性質によって異なります。常に独自に調査することをおすすめします。経験則として、圧縮/圧縮されたクリティカル パス リソースは 170 KB 未満に抑えることをおすすめします。

このシンプルなデモでは、予算をさらに慎重に設定して 100 KB（97.7 KiB）に設定してみます。webpack.config.js に以下を追加します。

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

新しいパフォーマンス バジェットはバイト単位で設定されます。

• 個々のアセットに 100,000 バイト（maxAssetSize）
• エントリ ポイントに 100,000 バイト（maxEntrypointSize）

この場合、エントリ ポイントとして機能するバンドルは 1 つだけです。

ヒントに指定できる値は次のとおりです。

1. warning（デフォルト）: 黄色の警告メッセージが表示されますが、ビルドは成功します。これは開発環境で使用することをおすすめします。
2. error: 赤色のエラー メッセージが表示されますが、ビルドは成功しています。この設定は、本番環境のビルドに推奨されています。
3. false: 警告やエラーは表示されません。

最適化

パフォーマンス バジェットの目的は、パフォーマンスの問題の修正が難しくなる前に警告することです。アプリをビルドする方法は常に複数あり、読み込み時間を短縮する手法もあります。（これらの多くは、JavaScript の最適化のこちらのドキュメントに記載されています）。🤓)

フレームワークとライブラリは開発者の作業を容易にしますが、エンドユーザーはアプリがどのように構築されるかは気にしていません。重要なのは、機能的で高速であることだけです。パフォーマンス バジェットを超過している場合は、可能な最適化について検討する必要があります。

現実世界では、クライアントサイドの大規模なフレームワークは通常、入れ替えが難しいため、適切に使用することが重要です。少し調査すると、一般的なライブラリのより小さな代替手段が見つかることがよくあります（date-fns は moment.js の代わりとして適しています）。パフォーマンスに大きな影響を与える場合は、フレームワークまたはライブラリをまったく使用しないほうがよい場合もあります。

未使用のコードを削除することは、大規模なサードパーティ ライブラリを含むアプリを最適化するのに適しています。このプロセスの詳細については、使用されていないコードを削除するをご覧ください。ここでは、moment.js を使用せずにカウントダウン コードを書き換える簡単な方法を紹介します。

app/components/Countdown.jsx で、以下を削除します。

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

次の行を削除します。

const moment = require('moment');

少々計算が必要ですが、同じカウントダウンを vanilla JavaScript で実装できます。

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

次に、package.json から moment.js を削除し、コンソールでもう一度 webpack を実行して、最適化されたバンドルをビルドします。

完了223 KiB（230 KB）が削減され、アプリは予算内に収まりました。🎉?

モニタリング

webpack のパフォーマンス バジェットは、わずか数行のコードで設定できます。また、大きな依存関係を（誤って）追加すると、警告が表示されます。「視界に入らなくなってしまいます」と言われていますが、webpack を使用すれば、パフォーマンスへの影響を常に認識できます。