Tree Shakingとは何ですか？

JavaScriptのバンドル時に使われていない（未参照の）コードを自動で除去する最適化手法。

Tree Shakingのポイントは？

ES Modules（import/export）の静的構造を解析して不要コードを特定。webpack、Vite、Rollupがサポートするバンドル最適化機能。lodashなどの大きなライブラリで効果が顕著。CommonJS（require）形式ではTree Shakingが効かない

【つりーしぇいきんぐ】

Tree Shaking とは？

💡 「使わない枝」を振り落とす

📌 このページのポイント

ES Modules（import/export）の静的構造を解析して不要コードを特定
webpack、Vite、Rollupがサポートするバンドル最適化機能
lodashなどの大きなライブラリで効果が顕著
CommonJS（require）形式ではTree Shakingが効かない

ツリーシェイキングのイメージ

ひよこ

具体的にどういう効果があるの？

ペンギン先生

例えばlodashライブラリ全体は約70KBだけど、_.uniqと_.groupByしか使っていないなら、Tree Shakingで使っている関数だけが残って数KBに削減される。date-fnsやMaterial UIなど、大きなライブラリほど効果が大きいよ

ひよこ

なぜES Modulesじゃないと効かないの？

ペンギン先生

ES Modules（import/export）は静的に解析できる。つまりコードを実行しなくても「何がインポートされているか」がわかる。CommonJS（require）は動的で、実行時に条件分岐でrequireする書き方ができるから、ビルド時にどのコードが使われるか判断できないんだよ

ひよこ

Tree Shakingを効かせるコツは？

ペンギン先生

①package.jsonに"sideEffects": falseを設定（副作用のないモジュールと明示）、②名前付きインポートを使う（import { map } from 'lodash-es'）。デフォルトインポートだと効きにくい、③バレルファイル（index.tsで全exportをまとめる）に注意。再エクスポートが多いと効きが悪くなることがあるよ

ひよこ

sideEffectsって何？

ペンギン先生

モジュールをインポートするだけで何か影響がある（グローバル変数を変更する、CSSを読み込むなど）ことを副作用（side effects）という。"sideEffects": falseはバンドラーに「このパッケージのモジュールは副作用がないから、未使用ならバンドルから安全に除去していいよ」と伝える設定。CSSファイルなど副作用があるものは"sideEffects": ["*.css"]と個別指定するよ

まとめ：ざっくりこれだけ覚えればOK！

「Tree Shaking」って出てきたら「使っていないコードをバンドルから除去する最適化」と思えればだいたいOK！

📖 おまけ：英語の意味

「Tree Shaking」＝木を揺する

💬 依存関係のツリー（木）をShake（揺する）と、使われていない枝（コード）が落ちる、というイメージだよ

← 用語集にもどる