ツリーシェイキング

ツリーシェイキングとは

ツリーシェイキング (Tree Shaking) は、バンドラー (esbuild, webpack, Rollup) がビルド時に未使用のコード (デッドコード) を除去し、出力サイズを削減する最適化手法である。ES Modules の静的構造を利用して、使われていない export を検出する。

仕組み

バンドラーが ES Modules の import / export を静的解析し、どこからも参照されていないエクスポートをバンドルから除外する。使われていないコードが「枯れ枝」のように振り落とされるため、ツリーシェイキングと呼ばれる。

export function add(a: number, b: number) { return a + b; }
export function multiply(a: number, b: number) { return a * b; }

// main.ts
import { add } from './utils';
console.log(add(1, 2));

// バンドル結果: multiply は含まれない (ツリーシェイキング)

ESM vs CommonJS

ESM と CommonJS の違いを以下にまとめる。

モジュール	ツリーシェイキング	理由
ESM (import/export)	効く	インポートとエクスポートを静的に解析できる
CommonJS (require)	効かない	読み込みが動的で、使う範囲を解析できない

// ✅ ESM: ツリーシェイキング可能
import { DynamoDBClient } from '@aws-sdk/client-dynamodb';

// ❌ CommonJS: ツリーシェイキング不可
const AWS = require('aws-sdk'); // SDK v2 全体がバンドルされる

AWS SDK v3 とツリーシェイキング

AWS SDK v3 とツリーシェイキングのコード例を示す。

// ✅ SDK v3: サービスごとにインポート (ツリーシェイキング対応)
import { DynamoDBClient, GetItemCommand } from '@aws-sdk/client-dynamodb';
// → DynamoDB のクライアントのみバンドル

// ❌ SDK v2: 全サービスがバンドルされる
import AWS from 'aws-sdk';
// → S3, EC2, Lambda... 全サービスのコードが含まれる

Lambda でのバンドルサイズ

Lambda でのバンドルサイズの例を示す。

Metadata:
  BuildMethod: esbuild
  BuildProperties:
    Minify: true
    Target: es2022
    External: ['@aws-sdk/*']  # Lambda ランタイムに含まれる SDK は除外

esbuild でバンドルすると、ツリーシェイキング + ミニファイで Lambda のデプロイサイズを大幅に削減できる。

ツリーシェイキングが効かないケース

ツリーシェイキングが効かないケースを以下に示す。

ケース	理由
副作用のあるモジュール	import するだけで実行されるコード
CommonJS	動的で静的解析不能
eval()	動的なコード実行
barrel ファイル	export * from で全てを再エクスポート

sideEffects フラグ

sideEffects フラグの例を示す。

{
  "name": "my-library",
  "sideEffects": false
}

package.json の sideEffects: false は、バンドラーに「このパッケージは副作用がない」と伝え、ツリーシェイキングを積極的に行わせる。

全体像を把握するには関連書籍も有用。