Skip to content

Conversation

hi-ogawa
Copy link
Contributor

@hi-ogawa hi-ogawa commented Aug 24, 2025

Description

It should be already possible on user land, but this PR adds pass more metadata to clientChunks option to do it easily.

This means that controlling server chunk is a way to controlling client reference chunks. And it looks like this actually ends up with a same code splitting strategy as Parcel https://devongovett.me/blog/parcel-rsc.html.

One interesting thing you might notice is that "use client" is not an explicit code splitting point like dynamic import().

TODO

@hi-ogawa hi-ogawa changed the base branch from main to 08-23-feat_rsc_ability_to_merge_client_reference_chunks August 24, 2025 04:47
Base automatically changed from 08-23-feat_rsc_ability_to_merge_client_reference_chunks to main August 24, 2025 05:22
@hi-ogawa hi-ogawa force-pushed the 08-24-feat_rsc_merge_client_reference_chunks_based_on_server_chunk_usage branch from d644fd8 to 1dda9a8 Compare August 24, 2025 05:23
@hi-ogawa hi-ogawa changed the title feat(rsc): merge client reference chunks based on server chunk usage feat(rsc): ability to merge client reference chunks based on server chunk usage Aug 24, 2025
@hi-ogawa hi-ogawa added the trigger: preview Trigger pkg.pr.new label Aug 24, 2025
Copy link

pkg-pr-new bot commented Aug 24, 2025

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/plugin-react@767
npm i https://pkg.pr.new/@vitejs/plugin-react-oxc@767
npm i https://pkg.pr.new/@vitejs/plugin-rsc@767
npm i https://pkg.pr.new/@vitejs/plugin-react-swc@767

commit: 60bc27f

@hi-ogawa hi-ogawa marked this pull request as ready for review August 24, 2025 06:38
@hi-ogawa hi-ogawa merged commit c69f0f6 into main Aug 24, 2025
21 of 22 checks passed
@hi-ogawa hi-ogawa deleted the 08-24-feat_rsc_merge_client_reference_chunks_based_on_server_chunk_usage branch August 24, 2025 09:30
dai-shi added a commit to wakujs/waku that referenced this pull request Aug 28, 2025
This PR enables client reference chunk optimization implemented by
vitejs/vite-plugin-react#766 and
vitejs/vite-plugin-react#767. I will likely
enables this by default in next release, but testing on Waku for
starter.

The idea is similar to the one explained in
https://devongovett.me/blog/parcel-rsc.html "Bundling client components"
section.
> One interesting thing you might notice is that "use client" is not an
explicit code splitting point like dynamic import(). If you import more
than one client component from a server component, the client components
will be grouped together into a single bundle instead of split into
separate bundles.

This difference can be seen in `packages/website` where previously each
`"use client"` component file becoming its own chunk e.g.
https://waku.gg/

- `Destination` -> `/assets/destination-xxx.js`
- `Start` -> `/assets/start-xxx.js`
- `Fade` -> `/assets/fade-xxx.js`
- `Menu` -> `/assets/menu-xxx.js`
- `Navigation` -> ...
- `Scroll` -> ...
- etc.

but now, some client component chunks are merged together based on
server-side usage, e.g.

https://waku-git-fork-hi-ogawa-08-24-featoptimi-f784e4-daishis-projects.vercel.app/

- `Destination`, `Start` ->  `/assets/index-xxx.js` (only used in `/`)
- `Fade`, `Menu`, `Navigation`, `Scroll` -> `/assets/fade-xxx.js`
(shared by all pages `/`, `/blog`, ...)
- etc.

---------

Co-authored-by: Daishi Kato <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

trigger: preview Trigger pkg.pr.new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant