This is available in Rollup (and webpack 5? 6?), and the new generation tools like Snowpack / Vite benefit from native imports, no bundling needed to start with.
Re:JavaScript Minification Benchmarks
by cromwellian on Saturday February 06, 2021 @11:28PM
(#26052645)
How do they implement it? Closure has two passes: Cross Module Method Motion, and Cross Module Code Motion. Cross Module Method Motion can move prototype methods, it leaves behind a stub, and a late-load overwrites the stub. Cross Module Code Motion can move top level global scope stuff (e.g. functions) The latter in particular is sensitive to declaration order effects, so movement is tricky and requires global analysis.
Rollup’s tree shaking should have the same result - the way I understand it, it puts all module exports in the same scope, renaming variables to avoid conflicts, and removing duplicates. Then while “shaking” the dependency tree, a function that is only used by another imported module will end up in one of the dynamically loaded parts, i.e. not the main bundle. Where exactly it was first imported is irrelevant for its location in the output files.
For snowpack, it’s just a natural consequence of runtime imports.
So if you split your code into modules, some of which are loaded later, the compiler can figure out which code in the initial download is used, but not yet and move it into the late loaded modules, whereas ordinarily this code gets retained in the initial load, because it looks like it is referenced.
A long time ago Malte Ubl demonstrated this with the Splittable add on for Babel.
https://medium.com/@cramforce/introducing-splittable-1c882ba...