rsnext/test/production
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-dir Tree shake the unused exports in direct relative imported client component module (#62238) 2024-02-20 17:07:25 +01:00
app-dir-edge-runtime-with-wasm chore: remove experimental appDir: true from tests (#52291) 2023-07-05 19:17:29 -07:00
app-dir-hide-suppressed-error-during-next-export Remove experimental config from create-next-app (#49241) 2023-05-05 00:22:28 -07:00
app-dir-prefetch-non-iso-url Remove experimental config from create-next-app (#49241) 2023-05-05 00:22:28 -07:00
app-dir-prevent-304-caching Prevent caching page with 304 status (#57737) 2023-10-31 17:48:03 -07:00
bfcache-routing fix bfcache restoration behavior (#54198) 2023-08-18 00:05:26 +02:00
build-spinners Use consistent name for App Router tests (#56352) 2023-10-06 11:06:06 +02:00
ci-missing-typescript-deps Add types as a default dependency into tests (#44140) 2022-12-19 19:05:53 +01:00
custom-error-500 Fix handling with custom _error and pages/500 (#40110) 2022-08-30 18:14:12 -05:00
custom-server server: bundle vendored react (#55362) 2023-09-15 19:49:39 +00:00
dependencies-can-use-env-vars-in-middlewares Remove static analysis of process.env (#50260) 2023-05-24 08:19:02 -07:00
deployment-id-handling Fix deploy id env handling when disabled (#57374) 2023-10-25 14:41:56 -07:00
disable-fallback-polyfills Update flakey polyfills and acceptance tests (#45313) 2023-01-26 10:25:47 -08:00
edge-config-validations Rename allowDynamic to unstable_allowDynamic (#40496) 2022-09-12 15:32:18 -07:00
edge-runtime-is-addressable Upgrade edge-runtime + make EdgeRuntime value overridable with an env var on compilation (#38331) 2022-07-12 15:18:59 +00:00
edge-safe-dynamic-code Skip build-time dynamic code checks for specific polyfills in the Edge runtime (#52009) 2023-07-04 14:18:02 +00:00
emit-decorator-metadata Ensure next.url is used instead of next.appPort (#44163) 2022-12-19 13:29:50 -08:00
enoent-during-require Ensure ENOENT error is not ignored when loading pages (#37486) 2022-06-06 14:35:26 -04:00
error-hydration Skip client-side data-fetching after ssr error (#51377) 2024-02-07 17:24:26 -08:00
escheck-output chore(test): switch a few tests from yarn to pnpm (#61793) 2024-02-09 15:11:52 +01:00
eslint-plugin-deps Remove setPnpmResolutionMode as default is highest (#57828) 2023-11-04 21:19:51 +01:00
export chore: update ESLint and plugins to latest (#61544) 2024-02-01 20:06:02 -05:00
exported-runtimes-value-validation Revert "refactor(analysis): rust based page-static-info, deprecate js parse interface in next-swc" (#61021) 2024-01-23 12:00:36 +01:00
fallback-export-error chore(export)!: remove next export in favor of output: export in next.config.js (#57085) 2023-10-23 18:03:58 +00:00
fatal-render-errror Ensure default _app is used when falling back to default _error (#39467) 2022-08-10 11:36:22 -05:00
generate-middleware-source-maps feat: enables 'edge' as a possible runtime for API routes (#44045) 2022-12-15 10:08:03 +01:00
graceful-shutdown graceful shutdown (#60059) 2024-01-16 18:25:49 +01:00
handle-already-sent-response Redesign nextjs logging (#54713) 2023-09-05 11:40:00 +00:00
ipc-forbidden-headers add "expect" to list of forbidden IPC headers (#53947) 2023-08-12 19:38:38 +00:00
jest chore(test): switch a few tests from yarn to pnpm (#61793) 2024-02-09 15:11:52 +01:00
middleware-typescript fix(ts): match MiddlewareConfig with documentation (#61718) 2024-02-07 23:32:03 +00:00
next-font Add next/font import (#45891) 2023-02-16 15:33:39 +01:00
pages-dir/production refactor(tests): make chain more "correct" (#51728) 2024-02-14 20:14:24 +01:00
pnpm-support Remove installCommand on typescript-auto-install and pnpm-support (#58039) 2023-11-05 18:32:10 +01:00
postcss-plugin-config-as-string allow to provide postcss plugin options as a string (#35173) 2022-04-08 16:58:50 +00:00
prerender-prefetch Tweak flakey prefetch test handling (#53391) 2023-07-31 16:20:43 +00:00
reading-request-body-in-middleware fix(stream): Allows body larger than 16 KiB with middleware (#41270) 2022-10-17 15:26:16 -07:00
sharp-basic Fix recursive ignoring case in build traces (#60740) 2024-01-16 14:11:17 -08:00
standalone-mode chore(test): switch a few tests from yarn to pnpm (#61793) 2024-02-09 15:11:52 +01:00
supports-module-resolution-nodenext Fix failing TS test from new release (#54523) 2023-08-24 11:36:38 -07:00
terser-class-static-blocks chore: Update terser to v5.27.0 (#61068) 2024-01-24 08:42:08 +01:00
transpile-packages transpilePackages should override default settings for external packages (#59385) 2023-12-13 19:04:57 +01:00
typescript-basic Fix next/dynamic types for resolving named export module (#43923) 2022-12-10 17:35:13 +00:00