Tree Shaking Seems to be not Working

[dazlious]

🐛 Bug Report

When using loadable components route-based code-splitting seems to be working fine, but Webpack's tree shaking functionality seems to be broken. A named export should not force a bundle to have all the exported code in it.

In this case we have an component (./lib/index.jsx) that has two sub components called module1 (./lib/module1/module1.jsx) and module2 (./lib/module1/module2.jsx). Module1 exports a constant called FOO_BAR that is then imported by Module2 as a named import.

When looking at the build output, you'll find Module2 containing Module1 completely and not only the string that is needed.

(window.__LOADABLE_LOADED_CHUNKS__=window.__LOADABLE_LOADED_CHUNKS__||[]).push([[2,1],[,,,function(n,t,u){"use strict";u.r(t),u.d(t,"default",(function(){return i})),u.d(t,"FOO_BAR",(function(){return _}));var e=u(0),r=u.n(e),_="foo",i=function(){return r.a.createElement("div",null,"module1")}},function(n,t,u){"use strict";u.r(t),u.d(t,"default",(function(){return i}));var e=u(0),r=u.n(e),_=u(3),i=function(){return r.a.createElement("div",null,_.FOO_BAR)}}]]);

To Reproduce

Steps to reproduce the behavior:

  yarn install
  yarn build
  open ./dist/analyze.html

Expected behavior

The Output of Module2 should not include the complete Module1-file, but instead the Variable named FOO_BAR.

Link to repl or repo (highly encouraged)

https://github.com/dazlious/treeshaking-dynamic-imports

## System:
 - OS: macOS 10.15.2
 - CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
 - Memory: 403.89 MB / 16.00 GB
 - Shell: 5.7.1 - /usr/local/bin/zsh
## Binaries:
 - Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
 - Yarn: 1.21.1 - ~/.yarn/bin/yarn
 - npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
## npmPackages:
 - @loadable/babel-plugin: ^5.12.0 => 5.12.0
 - @loadable/component: ^5.12.0 => 5.12.0
 - @loadable/webpack-plugin: ^5.12.0 => 5.12.0

[open-collective-bot]

Hey @dazlious 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[gregberge]

Hello @dazlious, I think it is not related to Loadable Components but I think it is related to webpack and the way dynamic imports work.

[dazlious]

Hello @gregberge and thank you for your quick response. You're indeed right, thank you.
Do you have any more insights/hints for me as I want to understand why it is not 'treeshakable'?
I renamed the repo and removed all "loadable component" context from it. Further discussion can take place on Stackoverflow: https://stackoverflow.com/questions/60038996/webpack-tree-shaking-dynamic-imports-seems-not-to-be-working

[theKashey]

When looking at the build output, you'll find Module2 containing Module1 completely and not only the string that is needed.

Because the "module" is a singleton. If it is used in two places - it would be bundled in the "maximum" required form.
This is why tree-shaking is not a good thing - as you application grow, you will eventually consume all the features from one module, and it would be included just as is.
See webpack/webpack#7782 for details.