【つりーしぇいきんぐ】

Tree Shaking とは？

最終更新: 2026年10月4日

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

バンドルを作るとき、使われていないコードのうち安全に除去できるものを省く最適化。JavaScriptではES Modulesの静的なimport/exportを手がかりにする。

📌 このページのポイント

使う関数と必要な副作用を残す模式例。ES Modulesなどを解析し、安全に除去できる範囲はバンドラーと設定による。

ひよこ

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

ペンギン先生

例えば足し算と掛け算をexportするファイルから足し算だけを使うなら、使わない掛け算を省けることがあるよ。削減量は元のコードや配布形式、設定によるので、特定のライブラリが必ず何KBになるとはいえないんだ

ひよこ

なぜES Modulesだと解析しやすいの？

ペンギン先生

import/exportの対応を、コードを実行する前に調べやすいからだよ。ただしCommonJSでは絶対にできないわけではない。webpack 5は、一部のexportsの代入やrequireの使い方も解析する。動的な処理は判断が難しく、除去範囲には限界があるんだ

ひよこ

名前付きインポートを使えば必ず小さくなる？

ペンギン先生

使うものを明示できるけれど、それだけでは決まらないよ。デフォルトexportや再exportでも解析できる場合がある。ビルド時にES Modulesを保ち、ライブラリの形式や副作用の情報、出力されたバンドルを確認しよう

ひよこ

sideEffectsって何？

ペンギン先生

読み込むだけでグローバルな設定を変えたりCSSを適用したりする影響のことだよ。webpackのpackage.jsonでsideEffects: falseと宣言するのは、対象ファイルを副作用なしと扱える場合だけ。必要なCSSなどはsideEffectsの配列に含め、誤って落とさないようにするんだ

ひよこ

コード分割とは違うの？

ペンギン先生

Tree Shakingは不要なコードを省くこと。コード分割は読み込むファイルを分けることだよ。必要なコードを遅れて読み込むだけでは、未使用コードを除去したことにはならない。両方を組み合わせる場合もあるんだ

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

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

📖 おまけ：英語の意味

「Tree Shaking」＝木を揺する

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

参考資料