Redux +ウェブパックバンドルの理解度を理解する

Question

バンドルサイズを小さくすることに関しては、thisのような様々な答えを読んでいます。まず、私の13MBバンドルで何が起こっているのか理解したかったので、Webpack Bundle Size Analyzerをインストールしました。これは、この出力を生成：

私は理解していないいくつかのことがあります。

1. なぜ2つの異なるサイズで二回表示されて反応しているの？
2. どのようにして最大13MBに達しませんか？ （これは約4.75MBです）
3. これは自分のコードがわずか4KBであることを意味しますか？ （最後の行）
4. このツリーからKBの保存方法を理解することはできますか？私は、例えば、ロダシュの一部だけを使う方法があるのか​​、それともリアクトに全体として必要なのかということですか？

更新： は、＃1のための答えを見つけました。 React-colorにはReactCSSが必要です。これには反応とロダッシュの異なるバージョンが必要です。 React-colorがなければ私のバンドルは13MBから8MBに落ちました。私は反応とロダッシュを再利用する方法を見つけようとします。

Answer 1

1）時には他の依存関係が再びロダッシュや反応する必要があるため、これらの依存関係はwebpackによって複数回取り込まれます（バージョンが異なると通常は発生します）。ここではDedupePluginが役立ちます。最終的なバンドルのサイズは、webpackのdevtoolエントリにも依存します。開発では、おそらくソースマップが有効になっていてビルドが最適化されていないため、通常は大きくなります。あなたの実際のwebpackの設定なしで伝えるのは難しいです。

2）webpackはすでに削除されている可能性がありますか？

3）最後の行は、あなたは間違いなくいくつかのKBSを保存することができます400キロバイト

4）と言います。良い方法は、lodash-webpack-pluginをbabel-plugin-lodashとすることです。これは、完全なライブラリではなく実際に使用しているlodashメソッドだけをインポートします。 this answerに概略が示されているように、必要なビットをmaterial-uiから要求することもできます。 私は最近webpack configにwebpack-dashboardを追加したので、バンドルサイズを構成する出力とパーセンテージをすぐに見ることができます。本当に必要ない場合は、巨大な依存関係を追加することについて2度考えるかもしれません。

Answer 2

あなたのwebpack設定ファイルにはeval-source-map devtoolオプションがあるようです。そのため、そのような巨大なバンドルサイズが得られています。このようにして、ソースマップはバンドルjsファイルの中に入れられます。

ソースマップを個別に構築する場合は、このオプションをsource-mapに変更してください。

// webpack.config.js 
{ 
    devtool: 'source-map', 
    // ... other options 
}