JavaScript
webpack

Webpack2のTree Shakingを試す

More than 1 year has passed since last update.

社内勉強用資料。


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モジュールの書き換えを無効化します。


.babelrc

{

"presets": [["es2015", {"modules": false}]]
}


webpack.config.jsをwebpack2用に書き換える

module.loadersmodule.rulesに変更されていたりと、ちょっと書き換えが必要になります。下記記事を参考にしてください。(自分のプロジェクトはmodule.loadersの書き換えくらいで済みました)

Migrating to Webpack 2


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くらい増えてるw webpack1と比較してたのがよくなかった

  • エントリーが2つあって、bundleされたファイルが2つ出来るプロジェクト

  • Tree Shakingなし:449KBと353KB

  • Tree Shaking有り: 442KB349KB

  • それなりに削減された!


  • reactreact-domはexternalsオプションを使ってbundleしたファイルの外にあるので効果うすそう

reactstrapなどのReact Component系のパッケージだと結構効果高そうな予感がします。