JavaScript での木揺れとは何ですか?

ツリーシェイキングとは何ですか?

経験豊富な JavaScript 開発者であれば、Tree Shaking について聞いたことがあるかもしれません。アプリケーションから未使用のコードを削除するのは一般的な手法であり、未使用のインポートもアプリケーションから削除されます。ここでは、ツリーを揺動させ、コードの不要な分岐を削除し、必要なコードを最終パッケージに残すことにより、「ツリー シェイク」という用語が導入されました。

基本的に、ツリー ディザリングは、無効なコードまたは未使用のコードを排除するために使用されます。

なぜツリーシェイキングが必要なのでしょうか?

チュートリアルの上記の部分で見たように、ツリー シェークは、アプリケーション パッケージから未使用のコードを削除するために使用されます。 Tree Shaking を使用する主な理由は、ユーザーのブラウザに配信する JavaScript バンドルのサイズを削減することです。パッケージのサイズが小さい場合、ブラウザーでの読み込みが速くなります。さらに、Web ブラウザーでバンドルをダウンロードするために必要なデータが少なくなり、アプリケーションのパフォーマンスが向上します。

特に、Web 開発において、大規模な動的データに依存する Web サイトを開発する場合、ツリーシェイキング技術は非常に重要です。 Web アプリケーションが非常に大きくても静的 Web ページが含まれている場合は、ツリー シェークは必要ありません。ただし、アプリケーションが小さく、大量の動的データを読み込む場合でも、余分なコードを削除するためにツリー シェークが必要になります。

ツリーシェイキングはどのように機能しますか?

このセクションでは、リアルタイム開発で Tree Shaking がどのように機能するかを学びます。

基本的な例でツリーシェイキングを理解しましょう。

ここでは 3 つの異なるファイルを作成し、ファイル名に従って異なる JavaScript 関数をファイルに追加しました。

ファイル名 – sum.js

リーリー

ファイル名 – Factorial.js

リーリー

ファイル名-multiply.js

リーリー

ファイル名 –index.js

リーリー

上記の例では、合計、階乗、および乗算関数を別のファイルからエクスポートしました。その後、3 つの関数すべてをindex.js ファイルにインポートしました。ここでは、sum() 関数のみを使用し、Factorial() 関数や multiply() 関数は使用しませんでした。したがって、index.js ファイルに未使用のインポートが存在するため、それを削除する必要があります。

ES5 では、「require()」を使用して、他の JavaScript ファイルから関数またはモジュールをインポートします。したがって、以下に示すように、条件付きでモジュールをインポートできます。

リーリー

ここでは、条件に基づいて、要件に従ってロードされるようにモジュールをインポートします。

ただし、ES6 では、以下に示すように条件付きでモジュールをインポートできません。

リーリー

上記の条件付きインポート コードは機能しません。したがって、JavaScript バンドラーを使用する必要があります。

ツリーシェイキングにバンドラーを使用するにはどうすればよいですか?

上のセクションで見たように、ES6 では条件付きインポートを使用できません。したがって、webpack、Rollup、parcel などのパッケージャーを使用する必要があります。

まず、ツリーシェイキング用にバンドラーを設定する必要があります。これには、モードを「実稼働」に設定し、ツリーシェイキングを有効にする最適化設定を追加することが含まれます。

たとえば、webpack では次のコードを使用できます。

リーリー

その後、ユーザーは ES6 形式に従ってモジュールをインポートする必要があり、インポートに「require()」メソッドが使用されていないことを確認する必要があります。

このように、開発者はバンドラーを使用して JavaScript でツリー シェイキングを有効にすることができます。これにより、Web ブラウザーの読み込み時間が短縮され、アプリケーションのパフォーマンスが向上します。

以上がJavaScript での木揺れとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。