Incrementally run esinstall at request time

[remorses]

Now the node_modules dependencies code is bundled in browser_modules files by esinstall all at once before running snowpack dev

For big projects with many dependencies this is not ideal because you have to wait for all the dependencies to be bundled even if you won't use them right away

It would be cool to run esinstall at request time:

• browser requests a file
• snowpack checks if this file is already bundled in web_modules/file.js
• if file has not been bundled yet call esinstall to bundle the dependency in a single file
• serve the dependency

This way in a large project that makes use of code splitting via dynamic import you only bundle the dependencies you need, making the start up time smaller

This may be related to #1052

[remorses]

I can try open a new PR for this,
I will make a new run esinstall at request time, using the import-map.json file to know when new packages needs to be built and pass the previous importMap to skip already processed imports

[FredKSchott]

it's a bit tricky, esinstall assumes that the entire dependency graph is known ahead of time. This lets it bundle common JS (shared sub-deps) together into fewer requested files.

You're really close to describing what we're thinking about for a Skypack CDN integration. Basically: any time you import a dependency, fetch it directly from our ESM CDN. You can see a wip branch here: https://github.com/pikapkg/snowpack/tree/wip-remote

Would love your feedback on that branch if you get a chance to check it out! And if it's something that you're interested in working on together, let me know 👍

[remorses]

Indeed I tried to make a proof of concept and i get invalid hook call in react because common modules get duplicated.

How would you solve the duplicate modules problem with Skypack? Do you make all packages external and build every depndency?

[FredKSchott]

yup, every package on Skypackk is bundled/served individually