Tree Shakingとは
Tree Shakingは、JavaScriptバンドラーであるWebpackが提供する機能で、使用されないコード（デッドコード）を効率的に除去する仕組みです。この技術により、最終的なビルドサイズを小さく抑えることが可能です。
一般的にデッドコードとみなされるパターンは以下の通りです：
- 実行されないコード（到達不能なコード）
- 実行結果が使われないコード
- 読み込まれない変数にのみ影響を与えるコード（書き込みのみで読み込みがない）
Tree Shakingを有効にする条件
Tree Shakingが正しく機能するにはいくつかの条件があります。
- ES6のimport / export構文を使用すること
ES6モジュールは静的に解析可能であり、依存関係が実行時ではなくビルド時に決定されるため、静的解析が可能になります。 - Webpackの設定で適切に最適化オプションを指定すること
特にmode: 'production'を指定することで、最適化が自動的に有効化されます。
CommonJSとES6モジュールの違い
Tree Shakingを使うにはES6モジュールの構文が必要です。これはCommonJSとの仕組みの違いによります。
- CommonJS
- 動的インポートが可能
- モジュール全体を値のコピーとして出力
- 実行時に依存関係が解決される - ES6 Modules
- 静的解析が可能
- 各関数や変数を個別にエクスポート可能
- 参照が渡されるため、値の変更が反映される
動作検証
プロジェクトの準備
まず、プロジェクトを初期化します。
npm init -y必要なWebpackパッケージをインストールします。
npm install webpack webpack-cli --save-devファイル構成
以下のファイルを準備します：
index.html- メインのHTMLファイルindex.js- エントリーポイントtest.js- 使用する関数を定義vue.js- Vue風オブジェクトwebpack.config.js- Webpackの設定ファイル
index.html
<html>
<head>
<meta charset="utf-8" />
<title>Tree Shakingの確認</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>index.js
import vue from './vue';
import test from './test';
vue.methods.fnA();
test.funcB();test.js
export function funcA() {
console.log('func A');
}
export function funcB() {
console.log('func B');
}vue.js
export default {
data() {
return {};
},
methods: {
fnA() {
console.log(11);
},
fnB() {
console.log(222);
}
}
};webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};ビルド結果
Webpackでビルドした結果、test.jsのfuncAは使われていないため、出力ファイルには含まれません。
(() => {
"use strict";
var e = {};
(e => {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" });
Object.defineProperty(e, "__esModule", { value: true });
})(e);
({
data() {},
methods: {
fnA() { console.log(11); },
fnB() { console.log(222); }
}
}).methods.fnA(), e.default.funcB();
})();このようにして、Tree Shakingによって不要なコードが削除されていることが確認できます。