d7d636adf5
### 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> |
||
---|---|---|
.. | ||
app | ||
components | ||
pages | ||
app-edge.test.ts |