Tree shake the unused exports in direct relative imported client component module

[huozhi]

What & Why

This PR helps fixes a long time tree-shaking issue that if you're import some identifiers from client components, the whole client component is being included in the client chunk. Because we're using import eager mode in webpack to include all the client component modules that make sure they're present in SSR entry and browser entry when they're transformed to client reference on RSC layer.

But the way we collect client components is a bit "aggressive" where contains some spaces to optimize.

How

We change the collected client components from simpliy collecting it resolved module request, into collecting both the imported identifiers (by server components) and the module request. And when we inserted the used client components imports into the SSR and Client entry, leverage webpack magic comments "webpackExports" to only contain the used exports in the bundle. Thank you webpack for this nice feature : )

Along the way we also fixed an issue that when you only used default export, the default export itself should also be proxied when the bundle is in ESM.

Notice

There's a limitation yet that it can't work with barrel file, if you have a shared component index.js to re-export the changes several client components there and you only partially import few from index.js it won't work. For the cases that the node_modules package contain a barrel file importing multiple client components, please use optimizePackageImports config for now. We'll have follow up optimizations

Testing Result

If we compare the react-aria-components the reproduction from #60246, you'll see the result being optimized a lot:

After vs Before

134KB being tree-shaked out 🤯

Route (app)                              Size     First Load JS
┌ ○ /                                    324 B           127 kB
├ ○ /_not-found                          872 B          86.5 kB
└ ○ /other-page                          174 B           127 kB

Route (app)                              Size     First Load JS
┌ ○ /                                    325 B           261 kB
├ ○ /_not-found                          870 B          86.5 kB
└ ○ /other-page                          176 B           261 kB

Fixes #60246
Related report: adobe/react-spectrum#5639
Closes NEXT-2527
phase 1 of NEXT-1799

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js client-components-opt	Change
buildDuration	14.4s	14.4s	N/A
buildDurationCached	7.9s	8.1s	⚠️ +172ms
nodeModulesSize	197 MB	197 MB	⚠️ +17.4 kB
nextStartRea..uration (ms)	421ms	419ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js client-components-opt	Change
1068-HASH.js gzip	30.3 kB	30.3 kB	N/A
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
4944-HASH.js gzip	5.04 kB	5.03 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32.1 kB	32.1 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	47.1 kB	47.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js client-components-opt	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js client-components-opt	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js client-components-opt	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js client-components-opt	Change
index.html gzip	528 B	528 B	✓
link.html gzip	540 B	540 B	✓
withRouter.html gzip	523 B	522 B	N/A
Overall change	1.07 kB	1.07 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js client-components-opt	Change
edge-ssr.js gzip	2.29 kB	2.29 kB	N/A
page.js gzip	2.98 kB	2.98 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js client-components-opt	Change
middleware-b..fest.js gzip	624 B	625 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	466 B	465 B	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	990 B	990 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js client-components-opt	Change
app-page-exp...dev.js gzip	166 kB	166 kB	✓
app-page-exp..prod.js gzip	95.9 kB	95.9 kB	✓
app-page-tur..prod.js gzip	97.6 kB	97.6 kB	✓
app-page-tur..prod.js gzip	92 kB	92 kB	✓
app-page.run...dev.js gzip	136 kB	136 kB	✓
app-page.run..prod.js gzip	90.6 kB	90.6 kB	✓
app-route-ex...dev.js gzip	22 kB	22 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.6 kB	14.6 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.6 kB	14.6 kB	✓
pages-api-tu..prod.js gzip	9.47 kB	9.47 kB	✓
pages-api.ru...dev.js gzip	9.74 kB	9.74 kB	✓
pages-api.ru..prod.js gzip	9.47 kB	9.47 kB	✓
pages-turbo...prod.js gzip	22.1 kB	22.1 kB	✓
pages.runtim...dev.js gzip	22.8 kB	22.8 kB	✓
pages.runtim..prod.js gzip	22.1 kB	22.1 kB	✓
server.runti..prod.js gzip	50.2 kB	50.2 kB	✓
Overall change	927 kB	927 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js client-components-opt	Change
0.pack gzip	1.49 MB	1.49 MB	N/A
index.pack gzip	104 kB	104 kB	⚠️ +228 B
Overall change	104 kB	104 kB	⚠️ +228 B

Diff details

Diff for main-HASH.js

Diff too large to display

Commit: 6b13387

[ijjk]

Tests Passed