React パフォーマンス: Tree Shaking でブースト

ツリーシェイキング は、最新の JavaScript 開発、特に React のようなライブラリにとって不可欠なテクニックです。これにより、最終バンドルから未使用のコードが削除され、ファイル サイズが小さくなり、アプリケーションのパフォーマンスが向上します。

または MDN の言うとおり

ツリーシェイキング は、JavaScript コンテキスト内でデッドコードの削除を説明するために一般的に使用される用語です。

ツリーシェイクとは何ですか?

ツリー シェイキングは、JavaScript バンドラー (Webpack や Rollup など) で、最終的な JavaScript バンドルから未使用のコードを削除するプロセスを説明するために使用される用語です。これは、コードベース内のインポート/エクスポート ステートメントを分析し、コードのどの部分が実際に使用されているかを把握し、それ以外をすべて削除することによって機能します。

「ツリーシェイク」という名前は、木を揺すると未使用の枝 (コード) が落ち、最終的なビルドに必要な部分だけが残るというたとえから来ています。

なぜ React 開発者はツリーの揺れを気にする必要があるのでしょうか?

React 開発者として、JavaScript バンドルのサイズを削減すると、アプリケーションのパフォーマンスに大きな影響を与える可能性があります。バンドルが大きいと、特にモバイル ネットワーク上で読み込み時間が遅くなり、ユーザー エクスペリエンスが低下します。ツリーシェイキングにより、実際に使用するコードのみが最終ビルドに含まれるようになり、パフォーマンスが大幅に向上します。

React での Tree Shaking はどのように機能しますか?

木の揺れは ES モジュール (ESM) に大きく依存しています。 ESM 構文を使用してモジュールをインポートおよびエクスポートすると、Webpack や Rollup などのバンドラーがコードを分析し、未使用のエクスポートを削除できます。

たとえば、大規模なユーティリティ ライブラリを使用しているが、必要な関数は 1 つだけであるとします。

// Bad practice: importing everything
import * as lodash from 'lodash';

この場合、関数を 1 つだけ使用している場合でも、lodash ライブラリ全体がバンドルされます。これは非効率的であり、アプリのサイズが増加します。

代わりに、名前付きインポート:
を使用できます。

// Good practice: importing only what you need
import { debounce } from 'lodash';

この方法では、デバウンス関数のみがバンドルに含まれ、残りの lodash コードは除外され、アプリが大幅に小さくなります。

React でツリーシェイクを有効にするためのベストプラクティス:

1. ES モジュール (ESM) を使用します。

ツリー シェイキングは、使用するコードとライブラリが ESM で記述されている場合に最適に機能します。 CommonJS はツリーシェイクをサポートしていないため、可能であれば避けてください。

2. 必要なものだけをインポートします:

上に示したように、ライブラリ全体ではなく、常に名前付きインポートを使用するか、特定の関数をインポートしてください。

3. 副作用を排除します。

ツリーの揺れは、モジュールのインポートに副作用がないという前提に基づいています。 「副作用」とは、グローバル状態を変更したり、変数を変更したり、モジュール自体の外部でコードを実行したりするあらゆるものを指します。ツリーシェイキングの動作を妨げる可能性のある意図しない副作用がモジュールに存在しないことを確認してください。

4. バンドラーを構成します。

バンドラー (Webpack や Rollup など) がツリーシェイキング用に適切に設定されていることを確認してください。これには、多くの場合、最適化を有効にするための実稼働モードの有効化が含まれます。

5. package.json の「sideEffects」フィールドを活用します。

ライブラリや独自のプロジェクトを使用している場合は、package.json 内で副作用のあるファイルを必ずマークしてください。これは、バンドラーが安全にツリーシェイクできるものを理解するのに役立ちます。

例:

// Bad practice: importing everything
import * as lodash from 'lodash';

ツリーの揺れを分析およびテストするためのツール:

• Webpack Bundle Analyzer: このツールは、バンドルの内容を視覚化し、未使用のコードがまだ含まれているかどうかを確認するのに役立ちます。
• ソース マップ: ソース マップを使用して、最終バンドルに含まれる内容を追跡します。

考慮すべき考え:

ツリー シェイキングは、効率的で高速なアプリケーションを構築したい React 開発者 (だけではありません) にとって不可欠な最適化テクニックです。 ES モジュールの使用、必要なコードのみインポート、モジュールに副作用がないことの確認などのベスト プラクティスに従うことで、ツリー シェイキングを最大限に活用し、React アプリのパフォーマンスを大幅に向上させることができます。

アプリのパフォーマンスを向上させたい場合は、ツリーシェイクの実装から始めるのが最適です!

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