Add support for preload meta tags about loadable-components HOT 11 CLOSED

Hi @mrlundis,

First thank you for the compliment.

Yes I considered to add support for this, I think it's a very good feature. The philosophy of this library is to be as simple as possible for the user. We have to get Webpack stats, yes. But the biggest problem to solve is linking a component to a webpack chunk, and it's not easy.

I don't want to couple this library to Webpack. If you have an idea to do it without adding complexity it could be interesting. I am thinking about it but I didn't find a good solution yet.

from loadable-components.

I have just given another look, to clarify, server-side we do not have any idea of the corresponding Webpack chunk. The key to achieve it is to be able to know server-side the chunk id corresponding to the import. I don't know the best way to do it.

from loadable-components.

Maybe we can solve this by adding a companion webpack plugin? I don't think this package would need any significant changes, maybe just an option to output the preload tags given a manifest.

I know that Vue projects has prefetch tags working out-of-the-box. Their webpack setup is documented here:
https://github.com/vuejs/vue-ssr-docs/blob/master/en/build-config.md and their plugin source is available here: https://github.com/vuejs/vue/tree/dev/src/server/webpack-plugin

from loadable-components.

@mrlundis a Webpack plugin is not sufficient because we have to know it server-side, and server-side Webpack is not present. Do not hesitate to try it, if it is OK I will merge it!

from loadable-components.

What I meant was that a companion webpack plugin could be used to generate a manifest mapping the module ids to the correct bundles/chunks. That manifest could then be used by the server to generate the correct preload tags.

Will send a PR as soon as I get around to implementing this, will probably take some time though. Have a few other big tasks to tackle first.

from loadable-components.

Hey there. I have another problem, but related. So I did prerendering, and I have code splitting and I have <link rel="preload"> to speed up download. But the problem is that async component loading triggers redraw of pre-rendered content. Do you have solution for this?

P.S. Full code here https://github.com/stereobooster/an-almost-static-stack, I use react-loadable, not loadable-components, but I suppose it will be the same for any "loadable" solution.

from loadable-components.

@stereobooster no I am sorry loadable-components does not support preloading yet.

from loadable-components.

I poked a bit more. You are actually doing excellent work with getLoadableState. This is not a solution for my case because I do snapshots, not a SSR, but anyway this is totally brilliant.

from loadable-components.

@stereobooster thank you! This is inspired from Apollo server-side rendering, I found the idea brillant and I copied it 🤗.

from loadable-components.

This feature requires a strong dependency with Webpack and increase the setup complexity. It is actually possible to prefetch in JavaScript. Until a simplification in the Webpack ecosystem I don't plan to support preload meta tags.

from loadable-components.

I think preloading not so important if:

1. You are using manifest chunk and preload it
2. You are using vendors (biggest) chunk and preload it
3. Setup correct chunk size with https://webpack.js.org/plugins/min-chunk-size-plugin/
4. And also limit their amount with https://webpack.js.org/plugins/limit-chunk-count-plugin/

from loadable-components.