Why is dependency repeated many times in Webpack artifact?

Question

I have a multi-entry point webpack build and I am working on optimizing artifact size for production. webpack-bundle-analyzer produced the following picture:

It's obvious that the AtlasKit dependencies make up a huge chunk of the total artifact size. Specifically, I see that styled-components.es.js is repeated many times. More so, this same dependency is is also present in vendor.js which itself is shared among all other packages.

Can anyone explain why styled-components.es.js is repeated all over and why it cannot be shared via single dependency in vendor.js? Is there anything I can do to remove duplicates and only depend on the single styled-components.es.js dependency in vendor.js?

I found it a bit strange that AtlasKit dependencies have a nested node_modules folder that is included in the package. Why is dist not enough? Maybe that's part of the reason why styled-components.es.js cannot be shared via vendor.js?

I tried to exclude the dependency manually via webpack's IgnorePlugin (similar to moment.js locales) but failed so far to do so.

Any insights would be greatly appreciated. Thanks!

Answer 1

While I don't know exactly what fixed the issue, I just noticed that the latest release of Atlaskit now works with tree-shaking. I now get minimal artifacts with everything shared from Atlaskit in a big vendor.js.