Requested in a thread about adding rollup's preserveModules configuration to TSDX.

This is a minimal example of how using the preserveModules option in rollup allows webpack to properly tree-shake unused modules, which it can otherwise not do.

There are two packages with the same configuration, except for one using preserveModules while the other doesn't.

These packages both export ONE and TWO, which are two similarly sized lorem ipsum strings (30kb~ raw, 8kb~ gzip), to simulate code in the packages.

The client application then imports ONE from both packages, and logs them.

The following screenshot is of the webpack bundle report (see Reproduction for how to generate your own).

It shows that the entire 60.15kb concatenated package was bundled, while only the one.esm.js file was included from the other package.

From our testing, the preserved package would also be possible to split into chunks if the application has lazy-loaded parts, while the concatenated package would just be dumped into the vendors chunk.

This is better since it would only include the used parts where they're needed.

e.g. Page 1 needs isNil from a utils. Instead of every page having to load the entire utils library in the vendors chunk, it would put only isNil into the Page 1 chunk.

1. Bootstrap monorepo - yarn bootstrap
2. Build everything - yarn build
3. Open the client/dist/report.html if fails to open by itself
4. Make sure to check the show concatenated modules checkbox