4 ms·

Closure Compiler's advanced mode, besides having the best minification (it is actually a full compiler with many different optimization passes) and being slow,

Closure Compiler's advanced mode, besides having the best minification (it is actually a full compiler with many different optimization passes) and being slow, has a feature that often goes untested externally (but is used heavily inside of Google) and that's cross-module-code-motion. 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-1c882babca7e https://medium.com/@cramforce/introducing-splittable-1c882ba...

jiofih 6y ago
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.
- cromwellian 6y ago
  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.
  - jiofih 6y ago
    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.
- esperent 6y ago
  > This is available in Rollup Could you provide a link where I can read more? I use Rollup a lot but was not aware it could do this
  - deleted 6y ago
    [deleted]

jiofih 6y ago

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.

cromwellian 6y ago
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.
- jiofih 6y ago
  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.
esperent 6y ago
> This is available in Rollup Could you provide a link where I can read more? I use Rollup a lot but was not aware it could do this
- deleted 6y ago
  [deleted]