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

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

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

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

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

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

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

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

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

hints屬性のその他の有効な値は、 'warning'とfalseです。 false 、指定された制限を超えている場(chǎng)合でも、警告を完全に無(wú)効にします。生産モードでfalseを使用することはお?jiǎng)幛幛筏蓼护蟆?/p>

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

Webpackは、生成するリソースの種類ごとにサイズのしきい値を?qū)g施します。リソースが指定された制限を超えると、エラーがスローされます。たとえば、Webpackが畫(huà)像を処理するように構(gòu)成されている場(chǎng)合、畫(huà)像の1つがしきい値を超える限りエラーが発生します。

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

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

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

制限

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

要約します

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

しかし、パフォーマンスの予算はそこで止まりません！リソースサイズは、パフォーマンスに影響を與える多くの要因の1つにすぎないため、最高のエクスペリエンスが提供されるためには、さらに多くの作業(yè)が必要です。燈臺(tái)テストを?qū)g行することは、改善のための他の指標(biāo)や提案を理解するのに最適な方法です。

以上がWebpackでパフォーマンス予算を?qū)g施しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。