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

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

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

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

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

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

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

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

Tree Shaking の例

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

6
export function subtract(x, y) {
7
  return x - y;
8
}
9

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

13
const result = add(1, 2);
14

15
console.log(result); // 3

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