社内勉強用資料。
Tree Shakingとは？
ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。
もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。
webpack2のTree Shakingの仕組み
Tree-shaking with webpack 2 and Babel 6
上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じみたいです。
Tree shakingを試す
webpack2のインストール
下記コマンドでインストールできます。この記事を書いている時点ではwebpack@2.1.0-beta.25がインストールされます。
npm install -D webpack@beta
ESモジュール→commonJS形式の変換を無効にする
仕組みのとこでくっつけてから不要なexport文を排除すると説明しましたが、babel-loaderでbabel-preset-es2015を使っている場合、コードをくっつける前にESモジュールがCommonJS形式に書き換えられてしまいます。
下記のようにbabel-preset-es2015のESモジュールの書き換えを無効化します。
{
"presets": [["es2015", {"modules": false}]]
}
webpack.config.jsをwebpack2用に書き換える
module.loadersがmodule.rulesに変更されていたりと、ちょっと書き換えが必要になります。下記記事を参考にしてください。（自分のプロジェクトはmodule.loadersの書き換えくらいで済みました）
webpackを実行する
あとはWebpackを実行するだけ！
webpack --config webpack.config.js
おまけ：比較
自分の所属するチームでwepbackを使っているプロジェクトでTree Shaking前後の容量を比較してみました。
リッチラボで開発している広告のJavaScriptの場合
- Tree Shaking前後で比較
- A 31.32 kB => 30.48 kB（0.84KB削減）
- B 39.35 kB => 38.27 kB（1.08KB削減）
- C 26.34 kB => 25.88 kB（0.44KB削減）
- D 34.95 kB => 34.06 kB（0.89KB削減）
- E 34.82 kB => 33.58 kB（1.24KB削減）
- F 26.24 kB => 25.78 kB（0.46KB削減）
- G 27.45 kB => 26.86 kB（0.59KB削減）
- H 29.55 kB => 28.79 kB（0.76KB削減）
- I 31.91 kB => 30.91 kB（1KB削減）
- J 38.6 kB => 37.6 kB（1KB削減）
- K 32.48 kB => 31.4 kB（1KB削減）
- L 29.04 kB => 28.47 kB（0.5KB削減）
- M 27.05 kB => 26.46 kB（0.5KB削減）
- N 26.61 kB => 26.1 kB(0.5KB削減）
- O 48.93 kB => 47.23 kB(1.7KB削減）
- 広告は容量にセンシティブなので、基本的には外部のライブラリは使わない。その為、SPAに比べると依存関係は少なく、効果が薄かったのかも。
- それでも平均して 1KB くらい容量が削減されていた
React.jsで作ったSPA案件
-
なぜか30KBくらい増えてるｗwebpack1と比較してたのがよくなかった - エントリーが２つあって、bundleされたファイルが２つ出来るプロジェクト
- Tree Shakingなし:449KBと353KB
- Tree Shaking有り: 442KB と 349KB
- それなりに削減された！
-
reactやreact-domはexternalsオプションを使ってbundleしたファイルの外にあるので効果うすそう
reactstrapなどのReact Component系のパッケージだと結構効果高そうな予感がします。