Webpackアーティファクトで何度も依存関係が繰り返されるのはなぜですか？

Question

私はマルチエントリーポイントwebpackビルドを持っています。私は生産用のアーティファクトサイズの最適化に取り組んでいます。 webpack-bundle-analyzerは、以下の画像を生成：

それはAtlasKit依存関係が総アーティファクトサイズの巨大な塊を作ることは明らかです。具体的には、私はstyled-components.es.jsが何度も繰り返されるのを見る。さらに、同じ依存関係が他のすべてのパッケージ間で共有されているvendor.jsにも存在します。

styled-components.es.jsが何度も繰り返され、なぜそれがvendor.jsの単一依存関係で共有できないのか説明できますか？重複を取り除くためにできることはありますか？vendor.jsの単一のstyled-components.es.js依存にのみ依存していますか？

AtlasKitの依存関係には、パッケージに含まれているnode_modulesフォルダがネストされていることが少し奇妙なことがわかりました。 distが十分でないのはなぜですか？それはstyled-components.es.jsをvendor.jsで共有できない理由の一部ですか？

私はWebPACKののIgnorePlugin（moment.jsロケールに類似）を介して手動で依存関係を除外しようとしましたが、そうするために、これまでできませんでした。

洞察力があれば幸いです。ありがとう！

Answer 1

複数のチャンクから共通のチャンクへの依存関係を統合したいように思えます。このためには、webpack.CommonsChunkPluginを調べることをおすすめします。特に興味深いの

あなたはプラグインに渡すことができますminChunksプロパティです：

minChunks：数は|インフィニティ|機能（モジュール、カウント） - >ブール、必要チャンクの //最小数コモンズチャンクに移動する前にモジュールを格納すること。 //番号は2以上で、チャンクの数以下でなければなりません。 // Infinityを渡すと、commonsチャンクが作成されますが、モジュールはその中に移動されません。 // functionを指定することで、カスタムロジックを追加できます。 （チャンクの数にデフォルト設定）

は、私はあなたのWebPACKの設定には、このプラグインを追加しようと助言：

new webpack.optimize.CommonsChunkPlugin({ 
    children: true, 
    async: true, 
    minChunks: 3 
}) 

この用法は"Extra async commons chunk"にさらに記載されています。

チャンク間で共有されるコードの量を調べたい場合は、Webpackにもsamccone/bundle-buddyを試してみることを検討してください。

既にCommonsChunkPluginを使用している場合は、詳しい情報を提供するためにWebpack設定を確認する必要があります。