Tree Shakingは、未使用のコードを削除することによりJavaScript構造を最適化する手法です。 ESモジュールの靜的構造に依存しているため、Webpackなどのツールがリファレンスされていないエクスポートコンテンツを分析および除外し、パッケージのボリュームを削減し、パフォーマンスを向上させます。作業(yè)手順は次のとおりです。1。ES6のインポート/エクスポートを使用してモジュラーコードを書き込みます。 2。WebPackは、インポート関係に基づいて依存関係グラフを構築します。 3.最適化段階で未使用のエクスポートを「死んだコード」としてマークします。 4.最終生成されたパッケージからこれらの死んだコードを削除します。木の揺れ効果を改善するには、ESモジュールの使用、不必要な副作用を避け、ツリーの揺れをサポートするライブラリを選択し、生産モードを有効にすることを主張する必要があります。一般的な問題には、CommonJS構文の使用、完全なモジュールのインポート、動的インポート、またはサードパーティライブラリなどが含まれます。要するに、木の揺れはJavaScriptパッケージを合理化する効果的な手段ですが、その成功はコード構造と依存関係管理に依存します。

Tree Shakingは、最終ビルドから未使用のコードを削除するために、Webpackのような最新のJavaScriptバンドラーで使用される手法です。アイデアは簡単です。コードが使用されていない場合、ブラウザに送信されたバンドルに含めるべきではありません。

これにより、ファイルサイズを削減し、パフォーマンスが向上します。特に、ライブラリ全體をインポートする可能性のある大規(guī)模なアプリケーションでは、それらのごく一部のみを使用します。

Webpackで木の揺れがどのように機能するか

WebPackは靜的分析を使用して、実行時に実際に使用されるコードのどの部分を検出します。これは、本質的に靜的なimportおよびexportステートメント（ESモジュール）を分析することで行います。関數(shù)または変數(shù)がエクスポートされているが、どこにもインポートまたは使用されていない場合、Webpackは出力バンドルから安全に削除できます。

段階的に機能する方法は次のとおりです。

• ES6 import / exportを使用してモジュラーコードを書き込みます。
• Webpackは、これらのインポートに基づいて依存関係グラフを構築します。
• 最適化段階では、未使用のエクスポートは「死んだコード」としてマークされます。
• その後、その死んだコードは最終的なバンドルで剝がされます。

木の揺れがESモジュールでのみ確実に機能することに注意することが重要です。 commonjs（ require() ）を使用すると同じレベルの靜的分析が許可されていないため、Webpackはこれらのモジュールを効果的に振ることができません。

木の揺れがうまくいくのを助けるもの

木を最大限に活用するには、留意すべきことがいくつかあります。

• ESモジュールを一貫して使用します
  可能な限りimportおよびexportに固執(zhí)します。これにより、Webpackが使用されているものの最も明確な畫像を提供します。

• 必要でない限り副作用を避けてください
  一部のモジュールには副作用がある場合があります。つまり、特定の関數(shù)呼び出しがなくても、インポート時に何かを行うことを意味します。 Webpackは、 package.jsonでサイドエフェクトフリーとして明示的にマークしない限り、そのようなコードを削除しません。

• よく構成されたライブラリを使用します
  Tree Shakingを念頭に置いて構築されたライブラリ（LodashのESMバージョンやReactなど）は、機能性をより小さなモジュールに分割し、バンドラーが未使用の部品を除外しやすくなります。

• 生産モードを有効にします
  Webpackでは、 mode: 'production'縮小やより積極的な木の揺れなどの最適化を自動的に可能にします。

一般的な落とし穴と、なぜ木の揺れが機能しないのか

コードが削除されると予想される場合もありますが、それでもバンドルになります。ここにいくつかの一般的な理由があります：

• CommonJS構文を使用します
  前述のように、 require()により、Webpackがモジュールのエクスポートが使用されているかどうかを判斷することが難しくなります。

• モジュール全體を不必要にインポートします
  例えば：

   './utils'からのユーザーとして *インポート;

  utilsから1つの関數(shù)のみを使用している場合でも、すべてをインポートすると、木の揺れが適切に機能するのが防止される場合があります。

• 動的なインポートまたは條件
  ランタイムロジックに基づいてモジュールを條件付きでインポートする場合、Webpackは事前に必要なものを知ることができないため、すべての可能性が含まれます。

• 木の揺れに最適化されていないサードパーティライブラリ
  一部のパッケージはすべてをバンドルするため、必要な部品だけを抽出することができません。

最終的な考え

ツリーシェーキングは、ユーザーに到達する前に死んだコードを削除することにより、JavaScriptバンドルを除く強力な方法です。ただし、コードベースと依存関係がESモジュールと最小限の副作用で構成されている場合にのみ適切に機能します。

最新のツールを使用しており、ベストプラクティスに従う場合、Webpackは舞臺裏のほとんどの作業(yè)を処理することができます。それでも、それがどのように動作するかを理解することで、より効率的なコードを作成し、最終的なビルドサイズの驚きを避けることができます。

基本的にそれだけです。

以上がwebpackで揺れる木は何ですかの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。