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.
- Bootstrap monorepo -
yarn bootstrap
- Build everything -
yarn build
- Open the
client/dist/report.html
if fails to open by itself - Make sure to check the show concatenated modules checkbox