Help us understand the problem. What is going on with this article?

Webpack2のTree Shakingを試す

More than 3 years have 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系のパッケージだと結構効果高そうな予感がします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away