Webpack 2で木の揺れが働いているかどうかを確認する方法は？

Question

リアクションアプリのwebpack 1からwebpack 2へのアップデートが完了しました。しかし、バンドルのサイズは〜30Kb増加しました。私は束のサイズが減少することを望んでいた、どのように私は木の揺れが働いたことを確認することができます。なぜそれが増えるのでしょうか？

Answer 1

あなたが取ることができるいくつかのステップがあります：

は縮小/ uglify
1. をオフに
2. あなたが知っている機能の一部にコメントを挿入
3. 使用されていないそれらのコメントがあるかどうかを確認するために出力をチェックまた、

各インポートモジュール/パッケージのサイズを表示することもできます。例えば、仕事場では、使用しているライブラリの1つにそれぞれが必要なため、ロダッシュとアンダースコアの両方を含むバンドルがあります。 WebPACKのは明らかに、各パッケージが追加されますどのように多くのキロバイト数を示しています。あなたはサイズの増加がどこから来ているこのことから見ることができるはずです

。

Answer 2

TL; DR：バージョン2.3以降、webpackにはツリーが揺れることはありません。 UglifyJSを使用して未使用のコードを削除するだけです。

---

最初に、何がツリーシェーピングであるかを定義する必要があります。

• Stackoverflowは「最新のjavascriptのデッドコード消去アルゴリズム」と定義しています。

• ウェブパックは、ES2015モジュールのインポート/エクスポートがモジュールシステムの静的構造に依存していることを明確にしています。

• ロールアップ（もともとは用語を一般化しています）も同様の説明があります。

したがって、未使用のESモジュールのエクスポートを静的に除外するという特定の定義を推論できます。

それでは、各モジュールは通常有する変換の段階を見てみましょう：

• バベルローダは、いくつかのモジュール形式のジャバスクリプトファイルであるエントリポイントを供給されます。バベルはあるとしてそれを残すの別のモジュール形式に変換することができますいずれか（module: false）
• のWebPACKは、静的に（正規表現のいくつかの並べ替えを使用して）ファイルを解析し、インポートしたモジュールが見つかります
• バベル場合のWebPACKは（モジュール形式を変換しますか
• インポートされたモジュールがエントリポイントになり、すべてのモジュールがロードされ、変換された後に、バベルローダー
• に移動した後、uglifyは結果バーンルを処理して削除します（訳注：未使用コード（unused: true）

uglifyは未使用のエクスポートを削除できますが、実際にはESモジュールの構文に依存していないことがわかりました。これは単なる一般的なデッドコードの除去であるため、「ツリーシェイキング」として定義することはできません。

ウェブパックにツリーが揺れているかどうかを確認するにはどうすればよいですか？

• まず、すべてのコードはESモジュール形式でなければなりません。
• すでに別の回答で言及されているように、Uglifyを無効にする必要があります。
• モジュールがそのフェーズで使用されているかどうかわからないので、ベルベルのモジュール変換も無効にする必要があります。

そしてWebPACKのは、実際にアルゴリズムを振ってツリーを実装している場合、今、私たちは、このエントリポイントのバンドルサイズを見て、それを確認することができます：WebPACKのは数十あるべき結果を振ってツリーを持っていない場合は

import { keyBy } from 'lodash-es'; // lodash is in ES module format 

console.log(keyBy([{ key: 'value' }], 'key')); 

キロバイト。そうでない場合は、半メガバイト以上になります。