chore(rsc): custom client chunk example

package.json

@@ -26,12 +26,13 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-server-dom-webpack": "^19.1.0",
+    "rollup": "^4.41.1",
     "tsdown": "0.7.3",
     "tsup": "^8.3.6",
     "tsx": "^4.19.3",
     "typescript": "^5.8.3",
     "unplugin-isolated-decl": "^0.13.5",
-    "vite": "^6.3.2",
+    "vite": "^6.3.5",
     "vite-plugin-inspect": "^11.0.1",
     "vitest": "^3.1.1",
     "wrangler": "^4.13.0"
@@ -42,6 +43,7 @@
   },
   "pnpm": {
     "overrides": {
+      "rollup": "$rollup",
       "vite": "$vite",
       "react": "$react",
       "react-dom": "$react-dom",

packages/rsc/examples/basic/e2e/basic.test.ts

@@ -569,3 +569,10 @@ async function testActionBindAction(page: Page) {
     .getByRole("button", { name: "test-server-action-bind-reset" })
     .click();
 }
+
+test("merged client reference chunks", async ({ page }) => {
+  await page.goto("./");
+  await expect(page.getByTestId("test-client-chunk")).toHaveText(
+    "test-chunk1|test-chunk-conflict1|test-chunk2|test-chunk3|test-chunk-conflict3",
+  );
+});

packages/rsc/examples/basic/src/routes/chunks/client1.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export function TestClientChunk1() {
+  return <span>test-chunk1</span>;
+}
+
+export function TestClientChunkConflict() {
+  return <span>test-chunk-conflict1</span>;
+}

packages/rsc/examples/basic/src/routes/chunks/client2.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export function TestClientChunk2() {
+  return <span>test-chunk2</span>;
+}

packages/rsc/examples/basic/src/routes/chunks/client3.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export function TestClientChunk3() {
+  return <span>test-chunk3</span>;
+}
+
+export function TestClientChunkConflict() {
+  return <span>test-chunk-conflict3</span>;
+}

packages/rsc/examples/basic/src/routes/chunks/server.tsx

@@ -0,0 +1,21 @@
+import {
+  TestClientChunk1,
+  TestClientChunkConflict as TestClientChunkConflict1,
+} from "./client1";
+import { TestClientChunk2 } from "./client2";
+import {
+  TestClientChunk3,
+  TestClientChunkConflict as TestClientChunkConflict3,
+} from "./client3";
+
+export function TestClientChunkServer() {
+  return (
+    <div data-testid="test-client-chunk">
+      <TestClientChunk1 />|
+      <TestClientChunkConflict1 />|
+      <TestClientChunk2 />|
+      <TestClientChunk3 />|
+      <TestClientChunkConflict3 />
+    </div>
+  );
+}

packages/rsc/examples/basic/src/routes/root.tsx

@@ -25,6 +25,7 @@ import {
   TestServerActionBindReset,
   TestServerActionBindSimple,
 } from "./action-bind/server";
+import { TestClientChunkServer } from "./chunks/server";
 import styles from "./server.module.css";
 
 export function Root(props: { url: URL }) {
@@ -78,6 +79,7 @@ export function Root(props: { url: URL }) {
         <TestServerActionBindSimple />
         <TestServerActionBindClient />
         <TestServerActionBindAction />
+        <TestClientChunkServer />
       </body>
     </html>
   );

packages/rsc/examples/basic/vite.config.ts

@@ -1,8 +1,9 @@
-import assert from "node:assert";
+import assert from "node:assert/strict";
+import { fileURLToPath } from "node:url";
 import rsc from "@hiogawa/vite-rsc/plugin";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { type Rollup, defineConfig, normalizePath } from "vite";
 import Inspect from "vite-plugin-inspect";
 
 export default defineConfig({
@@ -100,6 +101,85 @@ export default { fetch: handler };
         }
       },
     },
+    {
+      name: "optimize-chunks",
+      apply: "build",
+      config() {
+        const resolvePackageSource = (source: string) =>
+          normalizePath(fileURLToPath(import.meta.resolve(source)));
+
+        const pkgBrowserPath = resolvePackageSource(
+          "@hiogawa/vite-rsc/browser",
+        );
+
+        // Non-functional form cannot handle commonjs plugin module
+        // e.g. `(id)?commonjs-es-import`
+        // manualChunks: {
+        //   "lib-react": [
+        //     "react",
+        //     "react/jsx-runtime",
+        //     "react-dom/client",
+        //     "react-server-dom-webpack/client.browser",
+        //   ],
+        // }
+
+        const manualChunksFn: Rollup.ManualChunksOption = (id, meta) => {
+          // users can merge client reference chunks by own heuristics
+          if (id.startsWith("\0virtual:vite-rsc/build-client-reference/")) {
+            const info = meta.getModuleInfo(id)!;
+            const originalId = info.importedIds[0]!;
+            // e.g. group by directory
+            if (originalId.includes("/src/routes/chunks/")) {
+              return "rsc-custom";
+            }
+          }
+
+          // similar to
+          // https://github.com/web-infra-dev/rsbuild/blob/main/packages/plugin-react/src/splitChunks.ts
+          if (
+            id.includes("node_modules/react/") ||
+            id.includes("node_modules/react/") ||
+            id.includes("node_modules/react-dom/") ||
+            id.includes("node_modules/react-server-dom-webpack/")
+          ) {
+            return "lib-react";
+          }
+
+          if (
+            id === "\0virtual:vite-rsc/entry-browser" ||
+            id === pkgBrowserPath
+          ) {
+            return "rsc-entry";
+          }
+        };
+
+        return {
+          environments: {
+            client: {
+              build: {
+                manifest: true,
+                rollupOptions: {
+                  output: {
+                    manualChunks: manualChunksFn,
+                  },
+                },
+              },
+            },
+          },
+        };
+      },
+      // verify merged chunks
+      writeBundle(_options, bundle) {
+        if (this.environment.name === "client") {
+          const chunks = Object.values(bundle).filter(
+            (chunk) =>
+              chunk.type === "chunk" &&
+              chunk.exports.some((e) => e.startsWith("TestClientChunk")),
+          );
+          assert.equal(chunks.length, 2);
+        }
+      },
+    },
   ],
   build: {
     minify: false,

packages/rsc/src/plugin.ts

@@ -407,6 +407,14 @@ export default function vitePluginRsc({
               idToDeps[id] = { chunk, deps };
             }
           }
+          // prioritize `facadeModuleId` as moduleId since `chunk.moduleIds` becomes empty
+          // when `manualChunks` merged multiple client references
+          // TODO: is it correct?
+          for (const [chunk, deps] of chunkToDeps.entries()) {
+            if (chunk.type === "chunk" && chunk.facadeModuleId) {
+              idToDeps[chunk.facadeModuleId] = { chunk, deps };
+            }
+          }
           for (const [id, meta] of Object.entries(clientReferenceMetaMap)) {
             const moduleId =
               "\0virtual:vite-rsc/build-client-reference/" + meta.referenceKey;