rsbuild-plugin-react-router 0.4.0 → 0.5.0

package/dist/performance.d.ts

@@ -12,12 +12,15 @@ export declare const roundMs: (value: number) => number;
 export type ReactRouterPerformanceReport = {
     environment: string;
     compilerLifecycleMs?: number;
+    partial?: boolean;
+    workerId?: string;
     operations: Record<string, OperationTiming>;
 };
+export declare const formatReactRouterPerformanceReport: (report: ReactRouterPerformanceReport) => string;
 export type ReactRouterPerformanceProfiler = {
     record<T>(environment: string | undefined, operation: string, resource: string, callback: () => Promise<T>): Promise<T>;
     recordSync<T>(environment: string | undefined, operation: string, resource: string, callback: () => T): T;
-    flush(environment: string | undefined, details?: Pick<ReactRouterPerformanceReport, 'compilerLifecycleMs'>): void;
+    flush(environment: string | undefined, details?: Pick<ReactRouterPerformanceReport, 'compilerLifecycleMs' | 'partial' | 'workerId'>): void;
 };
 export declare const createReactRouterPerformanceProfiler: ({ enabled, log, }: {
     enabled: boolean;

package/dist/route-module-transform-loader.d.ts

@@ -0,0 +1,14 @@
+import type { LoaderDefinition } from '@rspack/core';
+export type RouteModuleTransformLoaderOptions = {
+    environmentName: string;
+    performanceScopeId: string;
+    logPerformance: boolean;
+    ssr: boolean;
+    isBuild: boolean;
+    isSpaMode: boolean;
+    rootRoutePath: string | null;
+    devHmr: boolean;
+};
+export declare const flushRouteModuleTransformLoaderPerformance: () => void;
+declare const routeModuleTransformLoader: LoaderDefinition<RouteModuleTransformLoaderOptions>;
+export default routeModuleTransformLoader;

package/dist/route-module-transform-loader.js

@@ -0,0 +1,44 @@
+let performanceFlushTimer;
+import { threadId } from "node:worker_threads";
+import remapping from "@jridgewell/remapping";
+import { createReactRouterPerformanceProfiler, executeRouteTransformTask } from "./511.js";
+let performanceWorkerId = `process-${process.pid}:thread-${threadId}`, performanceProfilersByScope = new Map(), flushRouteModuleTransformLoaderPerformance = ()=>{
+    for (let profilers of (performanceFlushTimer && (clearTimeout(performanceFlushTimer), performanceFlushTimer = void 0), performanceProfilersByScope.values()))for (let [environment, profiler] of profilers)profiler.flush('unknown' === environment ? void 0 : environment, {
+        partial: !0,
+        workerId: performanceWorkerId
+    });
+    performanceProfilersByScope.clear();
+};
+process.once('beforeExit', flushRouteModuleTransformLoaderPerformance);
+let route_module_transform_loader_routeModuleTransformLoader = async function(source, inputSourceMap) {
+    let callback = this.async(), options = this.getOptions(), transform = ()=>executeRouteTransformTask({
+            kind: 'routeModule',
+            code: String(source),
+            resource: this.resource,
+            resourcePath: this.resourcePath,
+            environmentName: options.environmentName,
+            sourceMaps: !!this.sourceMap,
+            ssr: options.ssr,
+            isBuild: options.isBuild,
+            isSpaMode: options.isSpaMode,
+            rootRoutePath: options.rootRoutePath,
+            devHmr: options.devHmr
+        });
+    try {
+        var scopeId, environment;
+        let profilers, environmentKey, profiler, generatedMap, result = options.logPerformance ? await (scopeId = options.performanceScopeId, environment = options.environmentName, !(profilers = performanceProfilersByScope.get(scopeId)) && (profilers = new Map(), performanceProfilersByScope.set(scopeId, profilers)), environmentKey = environment ?? 'unknown', !(profiler = profilers.get(environmentKey)) && (profiler = createReactRouterPerformanceProfiler({
+            enabled: !0,
+            log: (message)=>console.info(message)
+        }), profilers.set(environmentKey, profiler)), profiler).record(options.environmentName, 'route:module', this.resource, transform) : await transform(), outputSourceMap = result.map && inputSourceMap ? (generatedMap = result.map, JSON.parse(remapping([
+            generatedMap,
+            inputSourceMap
+        ], ()=>null).toString())) : result.map;
+        callback(null, result.code, outputSourceMap ?? void 0);
+    } catch (error) {
+        callback(error instanceof Error ? error : Error(String(error)));
+    } finally{
+        options.logPerformance && (performanceFlushTimer && clearTimeout(performanceFlushTimer), performanceFlushTimer = setTimeout(flushRouteModuleTransformLoaderPerformance, 50));
+    }
+};
+export default route_module_transform_loader_routeModuleTransformLoader;
+export { flushRouteModuleTransformLoaderPerformance };

package/dist/route-module-transform-rules.d.ts

@@ -0,0 +1,14 @@
+import type { Rspack } from '@rsbuild/core';
+import type { PluginOptions, Route } from './types.js';
+export declare const shouldUseRouteModuleTransformLoader: (parallelRouteTransform: PluginOptions["parallelRouteTransform"]) => boolean;
+export declare const registerRouteModuleTransformRules: (rspackConfig: Rspack.Configuration, { environmentName, ssr, isBuild, isSpaMode, rootRoutePath, devHmr, logPerformance, routeByFilePath, parallelRouteTransform, }: {
+    environmentName: string;
+    ssr: boolean;
+    isBuild: boolean;
+    isSpaMode: boolean;
+    rootRoutePath: string | null;
+    devHmr: boolean;
+    logPerformance: boolean;
+    routeByFilePath: Map<string, Route>;
+    parallelRouteTransform: PluginOptions["parallelRouteTransform"];
+}) => void;

package/dist/route-transform-tasks.d.ts

@@ -46,5 +46,6 @@ export type RouteTransformTask = RouteClientEntryTransformTask | RouteChunkTrans
 export type RouteTransformTaskOptions = {
     routeChunkCache?: RouteChunkCache;
 };
+export type RouteTransformRunner = (task: RouteTransformTask) => Promise<RouteTransformResult>;
 export declare const executeRouteTransformTask: (task: RouteTransformTask, options?: RouteTransformTaskOptions) => Promise<RouteTransformResult>;
 export {};

package/dist/types.d.ts

@@ -49,11 +49,10 @@ export type PluginOptions = {
      */
     logPerformance?: boolean;
     /**
-     * Run route transforms in a worker-thread pool.
-     * Pass `true` to force the default worker count, a positive integer to set
-     * the worker count, or `false` to disable.
-     * @default Automatically enabled for 256+ resolved routes. The automatic
-     * pool uses available CPU cores minus 2.
+     * Run route module transforms with Rspack's parallel loader workers.
+     * Pass `true` to use Rspack's default worker count, a positive integer to set
+     * the maximum worker count, or `false` to disable.
+     * @default false
      */
     parallelRouteTransform?: boolean | number;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsbuild-plugin-react-router",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React Router plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -49,6 +49,7 @@
     "ignoreMissingDts": true
   },
   "dependencies": {
+    "@jridgewell/remapping": "^2.3.5",
     "@react-router/node": "^7.13.0",
     "@remix-run/node-fetch-server": "^0.13.0",
     "@rspack/plugin-react-refresh": "^2.0.2",
@@ -65,13 +66,15 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "@codspeed/vitest-plugin": "^5.7.1",
+    "@jridgewell/trace-mapping": "^0.3.31",
     "@react-router/dev": "^8.0.1",
-    "@rsbuild/core": "2.1.0",
+    "@rsbuild/core": "2.1.5",
     "@rsbuild/plugin-react": "2.1.0",
-    "@rslib/core": "^0.22.1",
-    "@rspack/core": "2.1.0",
-    "@rstest/core": "^0.8.1",
-    "@rstest/coverage-istanbul": "^0.2.0",
+    "@rslib/core": "^0.23.2",
+    "@rspack/core": "2.1.3",
+    "@rstest/core": "^0.11.0",
+    "@rstest/coverage-istanbul": "^0.11.0",
     "@swc/helpers": "^0.5.23",
     "@types/fs-extra": "11.0.4",
     "@types/jsesc": "^3.0.3",
@@ -89,6 +92,7 @@
     "react-router": "^7.13.0",
     "react-router-dom": "^7.13.0",
     "typescript": "^5.9.3",
+    "vitest": "^4.1.10",
     "@rsbuild/config": "1.0.1"
   },
   "peerDependencies": {
@@ -107,14 +111,9 @@
   },
   "scripts": {
     "build": "rslib build",
-    "bench": "node scripts/bench-builds.mts",
-    "bench:ci-report": "node scripts/report-benchmark-ci.mts",
-    "bench:compare": "node scripts/compare-benchmarks.mts",
-    "bench:smoke": "node scripts/bench-builds.mts --profile smoke --iterations 1 --warmup 0 --format both --out .benchmark/results/smoke",
-    "bench:baseline": "node scripts/bench-builds.mts --profile default --iterations 5 --warmup 1 --clean build --format both --out .benchmark/results/baseline",
-    "bench:full": "node scripts/bench-builds.mts --profile full --iterations 5 --warmup 1 --clean build --format both --out .benchmark/results/full",
-    "bench:large": "node scripts/bench-builds.mts --profile large --iterations 1 --warmup 0 --clean cold --format both --out .benchmark/results/large",
-    "bench:synthetic-app": "node scripts/bench-synthetic-app.mjs",
+    "bench": "pnpm build && node benchmarks/run.mts",
+    "bench:smoke": "pnpm build && node benchmarks/run.mts --iterations 1 --warmup 0",
+    "bench:codspeed": "pnpm build && vitest bench --run --config vitest.benchmark.config.mts",
     "e2e": "pnpm build && pnpm test:package-interop && pnpm --filter './examples/{default-template,spa-mode,prerender,custom-node-server,cloudflare,client-only}' test:e2e",
     "dev": "rslib build --watch",
     "test": "rstest run",

package/src/build-output-transforms.ts

@@ -6,10 +6,10 @@ import {
   getReactRouterManifestForDev,
   type ReactRouterManifestStats,
 } from './manifest.js';
-import type { RouteTransformExecutor } from './parallel-route-transforms.js';
 import type { ReactRouterPerformanceProfiler } from './performance.js';
 import { createBundlerRouteExportResolver } from './route-export-resolution.js';
 import type { RouteChunkConfig } from './route-chunks.js';
+import type { RouteTransformRunner } from './route-transform-tasks.js';
 import type { PluginOptions, Route } from './types.js';
 import { isSourceMapEnabled } from './warnings/warn-on-client-source-maps.js';
 
@@ -31,11 +31,12 @@ type RegisterBuildOutputTransformsOptions = {
   appDirectory: string;
   getAssetPrefix: () => string;
   routeChunkOptions: Parameters<typeof getReactRouterManifestForDev>[5];
-  routeTransformExecutor: RouteTransformExecutor;
+  routeTransformRunner: RouteTransformRunner;
   routeByFilePath: Map<string, Route>;
   routeChunkConfig: RouteChunkConfig;
   isBuild: boolean;
   splitRouteModules: boolean;
+  useRouteModuleTransformApi: boolean;
   ssr: boolean;
   isSpaMode: boolean;
   rootRoutePath: string;
@@ -54,11 +55,12 @@ export const registerBuildOutputTransforms = ({
   appDirectory,
   getAssetPrefix,
   routeChunkOptions,
-  routeTransformExecutor,
+  routeTransformRunner,
   routeByFilePath,
   routeChunkConfig,
   isBuild,
   splitRouteModules,
+  useRouteModuleTransformApi,
   ssr,
   isSpaMode,
   rootRoutePath,
@@ -70,7 +72,7 @@ export const registerBuildOutputTransforms = ({
       'route:module',
       args.resource,
       async () =>
-        routeTransformExecutor.run({
+        routeTransformRunner({
           kind: 'routeModule',
           code: args.code,
           resource: args.resource,
@@ -154,7 +156,7 @@ export const registerBuildOutputTransforms = ({
         'route:client-entry',
         args.resource,
         async () =>
-          routeTransformExecutor.run({
+          routeTransformRunner({
             kind: 'routeClientEntry',
             code: args.code,
             resourcePath: args.resourcePath,
@@ -178,7 +180,7 @@ export const registerBuildOutputTransforms = ({
         'route:chunk',
         args.resource,
         async () =>
-          routeTransformExecutor.run({
+          routeTransformRunner({
             kind: 'routeChunk',
             code: args.code,
             resource: args.resource,
@@ -204,7 +206,7 @@ export const registerBuildOutputTransforms = ({
           'route:split-exports',
           args.resource,
           async () =>
-            routeTransformExecutor.run({
+            routeTransformRunner({
               kind: 'splitRouteExports',
               code: args.code,
               resourcePath: args.resourcePath,
@@ -244,7 +246,7 @@ export const registerBuildOutputTransforms = ({
         'module:client-only-stub',
         args.resource,
         async () => {
-          return routeTransformExecutor.run({
+          return routeTransformRunner({
             kind: 'clientOnlyStub',
             code: args.code,
             resourcePath: args.resourcePath,
@@ -257,22 +259,24 @@ export const registerBuildOutputTransforms = ({
       )
   );
 
-  api.transform(
-    {
-      resourceQuery: /\?react-router-route/,
-      order: 'post',
-    },
-    transformRouteModule
-  );
+  if (useRouteModuleTransformApi) {
+    api.transform(
+      {
+        resourceQuery: /\?react-router-route/,
+        order: 'post',
+      },
+      transformRouteModule
+    );
 
-  api.transform(
-    {
-      test: path => routeByFilePath.has(path),
-      resourceQuery: {
-        not: /__react-router-build-client-route|react-router-route|route-chunk=/,
+    api.transform(
+      {
+        test: path => routeByFilePath.has(path),
+        resourceQuery: {
+          not: /__react-router-build-client-route|react-router-route|route-chunk=/,
+        },
+        order: 'post',
       },
-      order: 'post',
-    },
-    transformRouteModule
-  );
+      transformRouteModule
+    );
+  }
 };

package/src/dev-background-resources.ts

@@ -18,7 +18,6 @@ import {
   configRoutesToRouteManifestEntries,
   type ReactRouterManifestForDev,
 } from './manifest.js';
-import type { RouteTransformExecutor } from './parallel-route-transforms.js';
 import {
   createRouteManifestSnapshot,
   createRouteTopologyWatcher,
@@ -31,7 +30,6 @@ type RegisterReactRouterDevBackgroundResourcesOptions = {
   api: RsbuildPluginAPI;
   isBuild: boolean;
   lazyCompilationPrewarm: PluginOptions['unstableLazyCompilationPrewarm'];
-  routeTransformExecutor: RouteTransformExecutor;
   routeRestartMarkerPath: string;
   watchDirectory: string;
   getRouteTopology: () => Promise<Set<string>>;
@@ -135,7 +133,6 @@ export const registerReactRouterDevBackgroundResources = ({
   api,
   isBuild,
   lazyCompilationPrewarm,
-  routeTransformExecutor,
   routeRestartMarkerPath,
   watchDirectory,
   getRouteTopology,
@@ -213,10 +210,6 @@ export const registerReactRouterDevBackgroundResources = ({
       scheduleRouteTopologyWatcher();
       lazyCompilationPrewarmController?.schedule();
     });
-
-    // Spawn transform workers now so thread startup overlaps Rsbuild's own
-    // compiler creation instead of delaying the first route transform.
-    routeTransformExecutor.prewarm();
   }
 
   const closeRouteTopologyWatcher = async (): Promise<void> => {
@@ -232,20 +225,12 @@ export const registerReactRouterDevBackgroundResources = ({
     );
   };
 
-  const closeRouteTransformExecutor = (): Promise<void> =>
-    routeTransformExecutor.close();
-
   api.onCloseDevServer(() =>
     closeAll(
       '[rsbuild-plugin-react-router] Failed to close dev server resources.',
-      [
-        closeRouteTopologyWatcher,
-        closeLazyCompilationPrewarm,
-        closeRouteTransformExecutor,
-      ]
+      [closeRouteTopologyWatcher, closeLazyCompilationPrewarm]
     )
   );
-  api.onCloseBuild(closeRouteTransformExecutor);
 
   return {
     setManifest(manifest) {

package/src/federation.ts

@@ -0,0 +1,38 @@
+import type { Rspack } from '@rsbuild/core';
+
+type ModuleFederationPluginLike = {
+  name?: string;
+  _options?: { experiments?: { asyncStartup?: boolean } };
+  options?: { experiments?: { asyncStartup?: boolean } };
+};
+
+export const ensureFederationAsyncStartup = (
+  rspackConfig: Rspack.Configuration | undefined
+): void => {
+  if (!rspackConfig?.plugins?.length) {
+    return;
+  }
+
+  for (const plugin of rspackConfig.plugins) {
+    if (!plugin || typeof plugin !== 'object') {
+      continue;
+    }
+    const federationPlugin = plugin as ModuleFederationPluginLike;
+    if (
+      federationPlugin.name !== 'ModuleFederationPlugin' &&
+      federationPlugin.name !== 'RspackModuleFederationPlugin'
+    ) {
+      continue;
+    }
+
+    const pluginOptions = federationPlugin._options ?? federationPlugin.options;
+    if (!pluginOptions) {
+      continue;
+    }
+
+    pluginOptions.experiments = {
+      ...pluginOptions.experiments,
+      asyncStartup: true,
+    };
+  }
+};

package/src/index.ts

@@ -18,6 +18,7 @@ import {
   PLUGIN_NAME,
 } from './constants.js';
 import { guardReactRouterLazyCompilation } from './lazy-compilation.js';
+import { ensureFederationAsyncStartup } from './federation.js';
 import { createReactRouterDevServerSetup } from './dev-server.js';
 import {
   generateWithProps,
@@ -52,9 +53,13 @@ import {
   type RouteChunkConfig,
 } from './route-chunks.js';
 import {
-  createRouteTransformExecutor,
-  shouldParallelizeRouteTransforms,
-} from './parallel-route-transforms.js';
+  registerRouteModuleTransformRules,
+  shouldUseRouteModuleTransformLoader,
+} from './route-module-transform-rules.js';
+import {
+  executeRouteTransformTask,
+  type RouteTransformRunner,
+} from './route-transform-tasks.js';
 import { getRouteRestartMarkerPath, mergeWatchFiles } from './route-watch.js';
 import { validateRouteConfig } from './route-config.js';
 import {
@@ -106,42 +111,6 @@ export const shouldParallelizeEnvironmentBuilds = ({
 }): boolean =>
   !isBuild && spareCoreCount >= MIN_PARALLEL_ENVIRONMENT_BUILD_SPARE_CORES;
 
-type ModuleFederationPluginLike = {
-  name?: string;
-  _options?: { experiments?: { asyncStartup?: boolean } };
-  options?: { experiments?: { asyncStartup?: boolean } };
-};
-
-const ensureFederationAsyncStartup = (
-  rspackConfig: Rspack.Configuration | undefined
-): void => {
-  if (!rspackConfig?.plugins?.length) {
-    return;
-  }
-
-  for (const plugin of rspackConfig.plugins) {
-    if (!plugin || typeof plugin !== 'object') {
-      continue;
-    }
-    const pluginName = (plugin as ModuleFederationPluginLike).name;
-    if (pluginName !== 'ModuleFederationPlugin') {
-      continue;
-    }
-
-    const pluginOptions =
-      (plugin as ModuleFederationPluginLike)._options ??
-      (plugin as ModuleFederationPluginLike).options;
-    if (!pluginOptions) {
-      continue;
-    }
-
-    pluginOptions.experiments = {
-      ...pluginOptions.experiments,
-      asyncStartup: true,
-    };
-  }
-};
-
 const cssUrlAssetExtensions =
   /\.(?:css|less|sass|scss|styl|stylus|pcss|postcss|sss)$/;
 const urlAssetResourceQuery =
@@ -429,14 +398,11 @@ export const pluginReactRouter = (
       rootRouteFile,
     };
     const routeChunkCache: RouteChunkCache = new Map();
-    const routeTransformExecutor = createRouteTransformExecutor({
-      parallelRouteTransform:
-        pluginOptions.parallelRouteTransform ??
-        shouldParallelizeRouteTransforms(routeCount),
-      routeChunkCache,
-      splitRouteModules: Boolean(splitRouteModules),
-      isBuild,
-    });
+    const useRouteModuleTransformLoader = shouldUseRouteModuleTransformLoader(
+      pluginOptions.parallelRouteTransform
+    );
+    const routeTransformRunner: RouteTransformRunner = task =>
+      executeRouteTransformTask(task, { routeChunkCache });
     const routeChunkOptions = {
       splitRouteModules,
       rootRouteFile,
@@ -457,7 +423,6 @@ export const pluginReactRouter = (
       api,
       isBuild,
       lazyCompilationPrewarm: pluginOptions.unstableLazyCompilationPrewarm,
-      routeTransformExecutor,
       routeRestartMarkerPath,
       watchDirectory,
       getRouteTopology: routeTopology.getRouteTopology,
@@ -783,7 +748,6 @@ export const pluginReactRouter = (
         routeCount >= 256 &&
         (config.performance?.printFileSize === undefined ||
           config.performance.printFileSize === true);
-
       return mergeRsbuildConfig(config, {
         ...(shouldCompactFileSizeReport
           ? {
@@ -800,7 +764,6 @@ export const pluginReactRouter = (
           assetPrefix: config.output?.assetPrefix || '/',
         },
         dev: {
-          writeToDisk: true,
           ...lazyCompilation,
           watchFiles: mergeWatchFiles(config.dev?.watchFiles, routeWatchFiles),
         },
@@ -944,17 +907,34 @@ export const pluginReactRouter = (
         return mergeEnvironmentConfig(config, {
           tools: {
             rspack: rspackConfig => {
+              const environmentDevHmrEnabled =
+                name === 'web' &&
+                !isBuild &&
+                devHmrRefreshRuntimePath !== undefined &&
+                config.mode === 'development' &&
+                config.dev?.hmr !== false &&
+                isRspackSwcReactRefreshEnabled(rspackConfig);
+
+              if (useRouteModuleTransformLoader) {
+                registerRouteModuleTransformRules(rspackConfig, {
+                  environmentName: name,
+                  ssr,
+                  isBuild,
+                  isSpaMode,
+                  rootRoutePath,
+                  devHmr: environmentDevHmrEnabled,
+                  logPerformance,
+                  routeByFilePath,
+                  parallelRouteTransform: pluginOptions.parallelRouteTransform,
+                });
+              }
+
               if (pluginOptions.federation) {
                 ensureFederationAsyncStartup(rspackConfig);
               }
 
               if (name === 'web') {
-                devHmrEnabled =
-                  !isBuild &&
-                  devHmrRefreshRuntimePath !== undefined &&
-                  config.mode === 'development' &&
-                  config.dev?.hmr !== false &&
-                  isRspackSwcReactRefreshEnabled(rspackConfig);
+                devHmrEnabled = environmentDevHmrEnabled;
                 if (devHmrEnabled) {
                   devHdrSignal?.ensure();
                 }
@@ -1024,11 +1004,12 @@ export const pluginReactRouter = (
       appDirectory,
       getAssetPrefix: () => assetPrefix,
       routeChunkOptions,
-      routeTransformExecutor,
+      routeTransformRunner,
       routeByFilePath,
       routeChunkConfig,
       isBuild,
       splitRouteModules: Boolean(splitRouteModules),
+      useRouteModuleTransformApi: !useRouteModuleTransformLoader,
       ssr,
       isSpaMode,
       rootRoutePath,

package/src/performance.ts

@@ -54,9 +54,15 @@ export const roundMs = (value: number): number => Math.round(value * 10) / 10;
 export type ReactRouterPerformanceReport = {
   environment: string;
   compilerLifecycleMs?: number;
+  partial?: boolean;
+  workerId?: string;
   operations: Record<string, OperationTiming>;
 };
 
+export const formatReactRouterPerformanceReport = (
+  report: ReactRouterPerformanceReport
+): string => `[react-router:performance] ${JSON.stringify(report)}`;
+
 export type ReactRouterPerformanceProfiler = {
   record<T>(
     environment: string | undefined,
@@ -72,7 +78,10 @@ export type ReactRouterPerformanceProfiler = {
   ): T;
   flush(
     environment: string | undefined,
-    details?: Pick<ReactRouterPerformanceReport, 'compilerLifecycleMs'>
+    details?: Pick<
+      ReactRouterPerformanceReport,
+      'compilerLifecycleMs' | 'partial' | 'workerId'
+    >
   ): void;
 };
 
@@ -247,7 +256,7 @@ export const createReactRouterPerformanceProfiler = ({
         ...details,
         operations,
       };
-      log(`[react-router:performance] ${JSON.stringify(report)}`);
+      log(formatReactRouterPerformanceReport(report));
       timingsByEnvironment.delete(resolvedEnvironment);
     },
   };