perf: shrink classic production browser output (#117)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: ScriptedAlchemy

.changeset/classic-production-output-size.md

@@ -0,0 +1,14 @@
+---
+'rsbuild-plugin-react-router': patch
+---
+
+Shrink classic-mode production browser output. Production builds now mangle
+export names (`optimization.mangleExports: 'size'`), drop exports nothing
+imports across the whole graph (`optimization.usedExports: 'global'`), and name
+async chunks `static/js/async/[id]-[contenthash:16].js`. Classic mode resolves
+route modules through the browser manifest by chunk, so export names are not
+part of its runtime contract. RSC builds are unchanged and keep every export
+name because Flight resolves client references by name. Development builds are
+unchanged. To keep readable export names in a classic production build, set
+`optimization.mangleExports` and `optimization.usedExports` back in the
+function form of `tools.rspack`, which runs after plugin defaults are merged.

src/mode-plan.ts

@@ -345,10 +345,20 @@ const createClassicModePlan = async ({
       wasmLoading: 'fetch',
       library: { type: 'module' },
       module: true,
+      // Async chunks are addressed by id at runtime, so the chunk name only
+      // adds bytes to the filename and to every place that references it.
+      ...(isBuild
+        ? { chunkFilename: 'static/js/async/[id]-[contenthash:16].js' }
+        : {}),
     },
     webOptimization: {
       avoidEntryIife: true,
       runtimeChunk: 'single',
+      // Classic mode resolves route modules through the browser manifest by
+      // chunk, not by export name, so production builds can mangle export
+      // names and drop exports nothing imports across the whole graph. RSC
+      // mode must keep every export name; see createRscModePlan.
+      ...(isBuild ? { mangleExports: 'size', usedExports: 'global' } : {}),
     },
     nodeExternals: Array.from(
       new Set(['express', ...getSsrExternals(process.cwd())])

tests/index.test.ts

@@ -445,6 +445,43 @@ describe('pluginReactRouter', () => {
     ).toBeUndefined();
   });
 
+  it('shrinks classic production browser output', async () => {
+    const rsbuild = await createStubRsbuild({
+      action: 'build',
+      rsbuildConfig: {},
+    });
+
+    rsbuild.addPlugins([pluginReactRouter()]);
+    const config = await rsbuild.unwrapConfig();
+
+    expect(config.environments.web.tools.rspack.optimization).toMatchObject({
+      mangleExports: 'size',
+      usedExports: 'global',
+    });
+    expect(config.environments.web.tools.rspack.output.chunkFilename).toBe(
+      'static/js/async/[id]-[contenthash:16].js'
+    );
+  });
+
+  it('keeps classic development export names and chunk names', async () => {
+    const rsbuild = await createStubRsbuild({
+      rsbuildConfig: {},
+    });
+
+    rsbuild.addPlugins([pluginReactRouter()]);
+    const config = await rsbuild.unwrapConfig();
+
+    expect(
+      config.environments.web.tools.rspack.optimization.mangleExports
+    ).toBeUndefined();
+    expect(
+      config.environments.web.tools.rspack.optimization.usedExports
+    ).toBeUndefined();
+    expect(
+      config.environments.web.tools.rspack.output.chunkFilename
+    ).toBeUndefined();
+  });
+
   it('preserves production export names for RSC builds', async () => {
     const rsbuild = await createStubRsbuild({
       action: 'build',