Why is the dependency repeated many times in the Webpack artifact?

Question

I have an assembly of web packages with multiple inputs, and I'm working on optimizing the size of the artifact for production. webpack-bundle-analyzerThe following picture appeared:

Obviously, AtlasKit dependencies make up a huge chunk of overall artifact size. In particular, I see that styled-components.es.jsrepeated many times. Moreover, the same dependency is also present in vendor.js, which in itself is used for all other packages.

- , styled-components.es.js vendor.js? -, , styled-components.es.js vendor.js?

, AtlasKit node_modules, . dist ? , , styled-components.es.js vendor.js?

webpack IgnorePlugin ( moment.js), .

. !

Answer 1

, : webpack.CommonsChunkPlugin.

minChunks, :

minChunks: number | Infinity | function (module, count) → boolean,   // , , .   // 2 .   // Infinity commons, .   // function, . ( )

Webpack:

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

.

, , , samccone/bundle-buddy Webpack.

CommonsChunkPlugin, Webpack, .