rsnext/test/e2e/app-dir/app-edge
Jiachi Liu d7d636adf5
Tree shake the unused exports in direct relative imported client component module (#62238)
### 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](https://nextjs.org/docs/app/api-reference/next-config-js/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: https://github.com/adobe/react-spectrum/issues/5639
Closes NEXT-2527
phase 1 of NEXT-1799

---------

Co-authored-by: Shu Ding <g@shud.in>
2024-02-20 17:07:25 +01:00
..
app Tree shake the unused exports in direct relative imported client component module (#62238) 2024-02-20 17:07:25 +01:00
components fix: next dev with edge runtime on windows (#56502) 2023-10-10 14:03:03 +00:00
pages Add export runtime test for pages and fully remove experimental.runtime (#48630) 2023-04-20 22:37:38 +00:00
app-edge.test.ts fix: next dev with edge runtime on windows (#56502) 2023-10-10 14:03:03 +00:00