Skip to content

Conversation

hi-ogawa
Copy link
Contributor

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

Description

todo

idea

Example:

Use clientChunks to specify custom grouping custom-a = mod1, mod2 and custom-b = mod3

plugins: [
  rsc({
    clientChunks: (id) => {
      if (id === 'mod1' || id === 'mod2') return 'custom-a'
      if (id === 'mod3') return 'custom-b'
    }
  })
]

Internally virtual modules will look like following:

// virtual:vite-rsc/client-references
// (the shape of this virtual is same as before)
export default {
  mod1: async () => {
    const m = await import("virtual:vite-rsc/client-reference/group/custom-a");
    return m.export_mod1;
  },
  mod2: () => {
    const m = await import("virtual:vite-rsc/client-reference/group/custom-a");
    return m.export_mod2;     
  },
  mod3: () => {
    const m = await import("virtual:vite-rsc/client-reference/group/custom-b");
    return m.export_mod3; 
  }
}

// virtual:vite-rsc/client-reference/group/custom-a
import * as import_mod1 from "(mod1)";
import * as import_mod2 from "(mod2)";
export const export_mod1 = { 
  // filter by `renderedExports` to tree shake unued client components
  // (this is a same logic as before)
  Counter: import_mod1.Counter,
  ...
}
export const export_mod2 = { ... import_mod2 ... }

// virtual:vite-rsc/client-reference/group/custom-b
import * as import_mod3 from "(mod3)";
export const export_mod3 = { ... import_mod3 ... }

@hi-ogawa hi-ogawa force-pushed the 08-23-feat_rsc_ability_to_merge_client_reference_chunks branch from 444d758 to 85eb39a Compare August 23, 2025 16:00
@hi-ogawa hi-ogawa marked this pull request as ready for review August 24, 2025 04:31
@hi-ogawa hi-ogawa requested a review from Copilot August 24, 2025 04:33
@hi-ogawa
Copy link
Contributor Author

Actually it might be no-brainer to just go with #767 as a default behavior.

@hi-ogawa hi-ogawa marked this pull request as ready for review August 24, 2025 05:20
@hi-ogawa
Copy link
Contributor Author

We should do so at some point, but for now let's merge this.

@hi-ogawa hi-ogawa merged commit c40234e into main Aug 24, 2025
21 checks passed
@hi-ogawa hi-ogawa deleted the 08-23-feat_rsc_ability_to_merge_client_reference_chunks branch August 24, 2025 05:22
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

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support merging client reference chunks

1 participant