[翻訳]のWebPACK 4 - 神秘SplitChunkscプラグ

オリジナルリンク：WebPACKの4 -神秘SplitChunksプラグイン

WebPACKの4の正式リリース、以前commonChunkPluginを放棄し、このプラグインのために、そのオプションはオプション、「非同期」、「すべての」三つの値「初期」であり、SplitChunksPluginを増加させました。私はほとんどちょうどそれが何を意味し、4人が同様にこれらの値の差を理解されていない最後の各オプションの値をWebPACKのを学習し、この記事では、私たちのために、これらの値の差の詳細な説明だと思います。

これは、あなたが理解し、一般的な例を経由してSplitChunksPluginオプションを使用するには、私のラフな試みの一つです。

初期の愛好家として、私は魔法の背後にあるコード分割（コード-Spliting）を理解しようとしました。文書は、「すべて」、splitChucnksは「初期」、「非同期」を受け入れると言います。私は少し混乱しています、そしてより多くの私の好奇心を向上させることができます。

歴史とWebpackOptions Githubの要約文書の私の深い研究して、それを見つけ、

“There are 3 values possible ”initial”, ”async” and ”all”. When configured the optimization only selects initial chunks, on-demand chunks or all chunks.” — Github History

“Select chunks for determining shared modules (defaults to “async”, “initial” and “all” requires adding these chunks to the HTML) ”

— WebpackOptions Schema

ここでの考え方は、二つの入り口のa.jsとb.jsファイルを持っているし、同じnode_modulesを参照することです。いくつかの動的モジュールは、コード（CODE-Spliting）挙動をチェック分割するために、導入されます。

私たちは、使用WebPACKのバンドルアナライザプラグインを私たちは私たちのnode_modules分割方法を理解するのに役立ちます。

a.js：

ダイナミックlodashの唯一の導入

b.js：

私はこの設定を選んだ主な理由は、WebPACKの設定があるかを示す、公共図書館がある場合に理解することです

ファイルエントリの動的な導入は、他ではありません - リアクト
lodash - 動的なファイルは二つの入口で導入されています
二つの入口で導入されていない動的なファイル - jqueryの

私たちは無傷でこれらのファイルを保持し、値のWebPACKのチャンクで構成を変更します。

1.チャンク：「非同期」 - 非同期モジュールの上に最適化

チャンク： '非同期' TELLのWebPACK

「ねえ、WebPACKの！私は動的なインポートモジュールの最適化にのみ興味があります。あなたは非動的モジュールを残すことができます」

それでは、ステップバイステップで、何が起こるか見てみましょう

b.jsからWebPACKの抽出物が反応して、新しいファイルに移動しますが、保持a.js動きには反応しません。これは、動的最適化モジュールに適用されますが、インポート（「REACT」）ステートメントは、別のファイルを生成します、インポート「REACT」ではありません
WebPACKのa.js lodashから抽出し、新しいファイルに移動し、ファイルもb.jsを参照され
ここではありませんjQueryの a.jsとb.jsが引用されているが、最適化を

2.チャンク：「初期」 - 同期モジュールの上に最適化

チャンク： '最初の' TELLのWebPACK

「ねえ、WebPACKの！私はあなたが個別に各モジュールのファイルを作成することができ、動的モジュールの導入を気にしないでください。彼らはまた、他の非動的な導入を導入する必要があるものの、私は、バンドルの導入上のすべての非動的モジュールことを願っています木で、私は「他のファイルを共有し、自分の非を動的モジュールをインポート阻止する準備ができています

それでは、ステップバイステップで、何が起こるか見てみましょう

a.jsが反応するように移動さ〜a.bundle.jsをnode_vendorsを、b.jsが反応するように移動され0.bundle.jsを
a.js b.jsとlodashはに移動され1.bundle.js。なぜ？このモジュールは、導入された動的です
jQueryの共通モジュールが非動的に導入され、node_vendorsに~~のb.bundle.jsを移動し、b.js a.js共有されています

3.チャンク：「すべて」 - 非同期および同期モジュールの上に最適化

チャンク：「すべて」を伝えるためのWebPACK

「ねえ、WebPACKの！私はこのモジュールを気にしないが、導入動的または非動的である。彼らは、最適化されることになる。しかし、あなたがこれを行うには十分にスマートであることを確認してください......」

それでは、ステップバイステップで、何が起こるか見てみましょう

a.jsが導入される動的b.jsに導入された非動的モジュールに反応します。したがって、それは両方によって参照される、単一のファイル0.bundle.jsに行きます。
2つのファイルにlodashが動的に導入され、単一のファイル取得することは明らかである1.bundle.jsを
jqueryのは、非動的な導入、それは~~のb.bundle.jsパブリック共有モジュールのnode_vendorsになり、両方が参照します。

話し合います

最初の翻訳は、多くの場所がある場所ではありませんが、私を修正してください。住所https://github.com/liuhanqu/blog/issues/3