Zenn
🟨

Tree Shaking とは？

に公開
JavaScript
tech

Tree Shaking は、JavaScript のバンドルサイズを削減するための技術です。具体的には、使用されないコードを静的に解析して除去することで、バンドルサイズを小さくします。

Tree Shaking は、以下の条件を満たすコードに対してのみ適用されます。

  • ES2015 (ES6) の import 文と export 文を使用している
  • モジュールバンドラーでバンドルしている

Tree Shaking は、モジュールバンドラーが以下の処理を行うことで実現されます。

  • エントリーポイントとなるモジュールから開始し、依存関係を辿ってすべてのモジュールを読み込む
  • 各モジュールで使用されている関数を分析し、使用されていない関数を特定する
  • 使用されていない関数を削除する

Tree Shaking によって、以下のようなメリットを得ることができます。

  • バンドルサイズを削減
  • ページの読み込み速度を向上
  • パフォーマンスを向上

Tree Shaking を有効にするには、モジュールバンドラーの設定を変更する必要があります。具体的な方法は、モジュールバンドラーによって異なります。

Tree Shaking の例

// モジュールA.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

// モジュールB.js
import { add } from "./A";

const result = add(1, 2);

console.log(result); // 3

上記のコードの場合、モジュールBは add 関数のみを使用しているため、subtract 関数は Tree Shaking によって削除されます。

Tree Shaking の注意点

Tree Shaking は、以下の点に注意する必要があります。

  • デフォルトでエクスポートされた関数のみが対象となる
  • 使用されない変数やクラスは削除されない
  • サイドエフェクトを持つ関数は削除できない

サイドエフェクトを持つ関数とは？

https://zenn.dev/btc/articles/240403_side_effect_function

まとめ

Tree Shaking は、JavaScript のバンドルサイズを削減するための効果的な技術です。モジュールバンドラーを使用している場合は、Tree Shaking を有効にして、バンドルサイズとパフォーマンスを向上させることをおすすめします。

関連記事

ECMAScript Modules (ESM) と CommonJS

https://zenn.dev/btc/articles/240403_esm_commonjs

Discussion