chore(rsc): custom client chunks

Author: hi-ogawa

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/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-confclit1</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-confclit3</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>
+      <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 { 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,74 @@ 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,
+                  },
+                },
+              },
+            },
+          },
+        };
+      },
+    },
   ],
   build: {
     minify: false,