[React 18] Optimized React Server Components's webpack bundling

[michenly]

In a chat between Facebook and Shopify about React Server Component, @sebmarkbage had mentioned the need to improve React Server Component's bundling strategy in webpack.

The main thing is that by default you end up with way too many small chunks. You could use a telemetry based heuristic to inform bundling but without it, we think the best guidance is to analyze the server component's graph to group client components together by which server components use them.
We expect that the server will need to be built too, as a separate graph since best perf is gained when you prebuild the server anyway.
So it might be that the best API is building the server first and then using the data from that as input to building the client.

Looking at RSC demo app, there are a total of 8 *.client.js files, and 5 of them ended up as separate bundles using the current webpack plugin.

This issue’s main goal would be to investigate the current webpack plugin implementation and figure out any optimization that can be applied while keeping in mind React core team’s guidance of “building the server first and then using the data from that as input to building the client.” as an initial starting point.

[michenly]

The very first step of the optimization = updating the existing RSC webpack 4 plugin to webpack 5 had had been merged and is being use in RSC demo now.