search

tmeasday / storybook-skeleton

3 stars 1 forks source link

Bundling in the background #17

Open tmeasday opened 3 years ago

tmeasday commented 3 years ago

When compiling lazily and using the FS cache, bundle build times can be very low :+1:

However, when there have been changes to components, or on first run, we still need to compile some bundles.

  1. Assuming we have a mechanism to recommend which bundles are likely to be accessed next (a client-side LRU cache perhaps), is it possible to trigger WP to prebuild those bundles during idle periods? What is the best way to do this?

  2. In the case that the majority of bundles have been cached, but some are not in cache because they have been modified since last startup (say we just switched branches), is there a way for webpack to tell us which bundles need to be recompiled and even to recompile them itself automatically in the background?

tmeasday commented 3 years ago

We discussed the possibility of triggering lazy compilation via a fetch() request.

It doesn't look to me as if it works that way, what I see in the network tab (when loading a lazy import like import('./src/template/Header.stories.js')):

  1. HTTP request for lazy compilation proxy
  2. Event source opened to 'Header.stories.js'
  3. Hot update occurs
  4. Hot update triggers real HTTP request for the bundle

See:

image

Note that the final bundle URL (http://localhost:5000/src_template_Header_stories_jsx.bundle.js in this) can be fetch after all of this but not before.

bebraw commented 3 years ago

Ok, let me ask Tobias about this one. Hopefully there's a clear way.

I wonder what's the difference between manual navigation and fetch() in this case.

tmeasday commented 3 years ago

I don't think there is a manual navigation going on (if you load the bundle's URL in the browser it 404s before compilation too).

I think it's when you call import('./src/template/Header.stories.js') that it triggers. Which we could do if we are prefetching from the preview (we could also possibly use the various webpack hints to do so).

It would be great if there was some way to trigger it with a fetch however, it would make it much easier to test things! (and also open up the possibility of triggering background bundling from node, although there may also be some programmatic way to do that?)

bebraw commented 3 years ago

I see what you are saying. One option would be to expose a global that lets us trigger the import. This would have to accept name as a parameter and it should leverage import() underneath while passing the parameter to it.

tmeasday commented 3 years ago

Yes, and for testing we could drive that via puppeteer. Definitely an option but would prefer just to use fetch ;)