JavaScript/Tree Shaking

Tree Shaking は、JavaScript のモジュールバンドルツール（例: Webpack、Rollup）において、未使用のコード（デッドコード）を削除し、最適化を図る技術です。この機能は主に ECMAScript Module（ESM）の静的構造を活用しています。

以下では、Tree Shaking の基本原理、動作の仕組み、注意点、実際の手法について包括的に解説します。

Tree Shaking の基本原理

Tree Shaking の基本的な考え方は、プログラム全体を解析し、実際に使用されていないコードを除外することです。これにより、最終的なバンドルサイズを縮小し、ロード時間を短縮します。

Tree Shaking を可能にするポイント:

ESM の使用
Tree Shaking は ESM の import と export を利用して動作します。CommonJS（require や module.exports）は動的解析が必要なため、Tree Shaking に適しません。
ツールのサポート
Tree Shaking を実行するには、以下のようなモジュールバンドラが必要です:
- Rollup: ESM をネイティブにサポートし、Tree Shaking に特化。
- Webpack: バージョン 2 以降で Tree Shaking をサポート。
コードが副作用を持たない
副作用のあるコードは安全に削除できないため、削除の対象外になります。これを指定するには、package.json の sideEffects フィールドを設定します。

コードを Tree Shaking に対応させるには、適切にモジュールを設計する必要があります。未使用のコードを明示的に区別するために、モジュールごとに分割します。

math.js

exportconstadd=(a,b)=>a+b;exportconstmultiply=(a,b)=>a*b;

app.js

import{add}from'./math.js';console.log(add(2,3));// multiply は使われていないので削除される

デフォルトエクスポートでは、使用していない部分の特定が難しくなります。

// BAD: 削除できない可能性があるexportdefault{add:(a,b)=>a+b,multiply:(a,b)=>a*b};

Rollup は Tree Shaking に最適化されたツールです。

rollup.config.js

exportdefault{input:'src/main.js',output:{file:'dist/bundle.js',format:'es'},treeshake:true};

Webpack では mode を production に設定するだけで Tree Shaking が有効になります。

webpack.config.js

module.exports={mode:'production',entry:'./src/main.js',output:{filename:'bundle.js'},optimization:{usedExports:true}};

副作用のあるコードは削除されないため、モジュールが副作用を持たないことを明示します。

package.json の sideEffects フィールドを設定します。

package.json

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

{"sideEffects":["*.css"]}

Dynamic Import（動的インポート） 動的インポート（import()）は依存関係を動的に解析するため、Tree Shaking には向きません。
デッドコードの明確化 未使用のコードが副作用を持つ場合、削除が難しくなります。そのため、関数やモジュールを小さな単位に分割することが重要です。
ライブラリの対応状況 ライブラリが sideEffects フィールドを正しく設定していない場合、Tree Shaking の恩恵を受けられない可能性があります。

Tree Shaking は、コードの最適化において非常に強力な技術です。未使用のコードを削除することで、バンドルサイズを削減し、アプリケーションのパフォーマンスを向上させます。

効果的に Tree Shaking を活用するには、以下を心がけましょう:

これらの手法を組み合わせることで、モダンな JavaScript 開発における効率的なコード管理が可能になります。