Tree Shaking

アプリケーション内のどこでも使用されていないコードをバンドルに追加してしまうことがあります。このデッドコードを削除することで、バンドルのサイズを削減し、不要なデータの読み込みを防ぐことができます！バンドルに追加する前にデッドコードを削除するプロセスは、tree shaking と呼ばれています。

使用時機

• バンドルにインポートされたモジュールからの未使用コードが含まれている場合に使用します
• JavaScript バンドルをコンパクトに保ち、ロードパフォーマンスを向上させるのに役立ちます

使用方法

• ES2015 の import/export 構文を使用します — ES modules のみが tree-shaken できます
• モジュール全体をインポートする代わりに、名前付きインポートを使用して効果的な tree shaking を実現します
• 必要に応じて package.json でパッケージをサイドエフェクトフリーとしてマークします
• サイドエフェクトを持つモジュールは安全に tree-shaken できないことに注意してください

詳細

概念

Tree shaking は、最終的な JavaScript バンドルから使用されることのないコードを削除することを目的としています。正しく実行すれば、JavaScript バンドルのサイズを削減し、ダウンロード、解析、および（場合によっては）実行時間を短縮できます。モジュールバンドラー (webpack や Rollup など) を使用するほとんどの最新 JavaScript アプリケーションでは、バンドラーがデッドコードを自動的に削除することが期待されます。

あなたのアプリケーションとその依存関係を抽象構文木として考えます (構文木を「揺らして」最適化したいのです)。木内の各ノードは、アプリに機能を提供する依存関係です。Tree shaking では、入力ファイルはグラフとして扱われます。グラフ内の各ノードは、コード内で「部分」と呼ばれるトップレベルのステートメントです。Tree shaking はグラフトラバーサルであり、エントリーポイントから開始して、トラバースされたすべてのパスをインクルード用にマークします。

すべてのコンポーネントはシンボルを宣言したり、シンボルを参照したり、他のファイルに依存したりできます。「部分」でさえ、サイドエフェクトがあるかないかがマークされます。例えば、ステートメント let firstName = 'Jane' はサイドエフェクトがありません。なぜなら、何も firstName を必要としなければ、ステートメントを削除しても観察された違いがないからです。しかし、ステートメント let firstName = getName() はサイドエフェクトを持っています。なぜなら、getName() の呼び出しは何も firstName を必要としなくても、コードの意味を変えずに削除することはできないからです。

インポート

ES2015 モジュール構文 (import および export) で定義されたモジュールのみが tree-shaken できます。モジュールをインポートする方法は、そのモジュールが tree-shaken 可能かどうかを指定します。

Tree shaking は、エントリーポイントファイルのサイドエフェクトを持つすべての部分をビジットすることから開始し、グラフのエッジをトラバースして新しいセクションに到達するまで進みます。トラバーサルが完了すると、JavaScript バンドルはトラバーサル中に到達した部分のみを含みます。他の部分は除外されます。

次の utilities.js ファイルを定義していると仮定します:

export function read(props) {
  return props.book
}

export function nap(props) {
  return props.winks
}

次に、以下の index.js ファイルがあります:

import { read } from 'utilities';

eventHandler = (e) => {
  read({ book: e.target.value })
}

この例では、nap() は必要でないため、バンドルに含まれません。

サイドエフェクト

ES6 モジュールをインポートするとき、このモジュールは即座に実行されます。コード内のどこでもモジュールのエクスポートを参照していなくても、モジュール自体が実行中にグローバルスコープに影響を与える可能性があります (例えば、ポリフィルやグローバルスタイルシート)。これはサイドエフェクトと呼ばれます。モジュール自体のエクスポートを参照していなくても、_もし_モジュールがそもそもエクスポート値を持っている場合、インポート時の特別な動作のため、モジュールは tree-shaken できません！

Webpack ドキュメントは、tree-shaking に関する明確な説明と、それを破らないようにする方法を提供しています。

ソース

• patterns.dev/vanilla/tree-shaking