ci(benchmark/react): add LoadScript to benchmark

benchmark/react/cases/001-fib/index.ts

@@ -2,61 +2,62 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import '@lynx-js/react';
 import { Bench } from 'tinybench';
 
 import { withCodspeed } from '../../src/withCodspeed.js';
 
-if (__MAIN_THREAD__) {
-  function fib(n: number): number {
-    if (n <= 1) return n;
-    return fib(n - 1) + fib(n - 2);
-  }
-
-  function fib2(n: number): number {
-    const memo: number[] = Array.from({ length: n + 1 });
-    const dp = (n: number): number => {
+runAfterLoadScript(() => {
+  if (__MAIN_THREAD__) {
+    function fib(n: number): number {
       if (n <= 1) return n;
-      if (memo[n]) return memo[n];
-      memo[n] = dp(n - 1) + dp(n - 2);
-      return memo[n];
-    };
-    return dp(n);
-  }
+      return fib(n - 1) + fib(n - 2);
+    }
 
-  function fib3(n: number): number {
-    if (n === 0) return 0;
-    if (n === 1) return 1;
-    let prev = 0, curr = 1;
-    for (let i = 2; i <= n; i++) {
-      const next = prev + curr;
-      prev = curr;
-      curr = next;
+    function fib2(n: number): number {
+      const memo: number[] = Array.from({ length: n + 1 });
+      const dp = (n: number): number => {
+        if (n <= 1) return n;
+        if (memo[n]) return memo[n];
+        memo[n] = dp(n - 1) + dp(n - 2);
+        return memo[n];
+      };
+      return dp(n);
+    }
+
+    function fib3(n: number): number {
+      if (n === 0) return 0;
+      if (n === 1) return 1;
+      let prev = 0, curr = 1;
+      for (let i = 2; i <= n; i++) {
+        const next = prev + curr;
+        prev = curr;
+        curr = next;
+      }
+      return curr;
     }
-    return curr;
-  }
 
-  const bench = withCodspeed(
-    new Bench({
-      name: 'simple benchmark',
-      time: 5,
-      iterations: 20,
-    }),
-  );
-
-  bench
-    .add(`${__REPO_FILEPATH__}::more faster fib(20)`, () => {
-      fib3(20);
-    })
-    .add(`${__REPO_FILEPATH__}::faster fib(20)`, () => {
-      fib2(20);
-    })
-    .add(`${__REPO_FILEPATH__}::slower fib(20)`, () => {
-      fib(20);
-    });
-
-  bench.runSync();
-
-  console.log(bench.name);
-  console.log(JSON.stringify(bench.table(), undefined, 2));
-}
+    const bench = withCodspeed(
+      new Bench({
+        name: 'simple benchmark',
+        time: 5,
+        iterations: 20,
+      }),
+    );
+
+    bench
+      .add(`${__REPO_FILEPATH__}::more faster fib(20)`, () => {
+        fib3(20);
+      })
+      .add(`${__REPO_FILEPATH__}::faster fib(20)`, () => {
+        fib2(20);
+      })
+      .add(`${__REPO_FILEPATH__}::slower fib(20)`, () => {
+        fib(20);
+      });
+
+    bench.runSync();
+
+    console.log(bench.name);
+    console.log(JSON.stringify(bench.table(), undefined, 2));
+  }
+});

benchmark/react/cases/002-hello-reactLynx/index.tsx

@@ -7,9 +7,11 @@ import { root } from '@lynx-js/react';
 import RecursiveText from './RecursiveText.js';
 import { RunBenchmarkUntilHydrate } from '../../src/RunBenchmarkUntil.js';
 
-root.render(
-  <>
-    <RecursiveText text='Hello, ReactLynx 🎉!' />
-    <RunBenchmarkUntilHydrate />
-  </>,
-);
+runAfterLoadScript(() => {
+  root.render(
+    <>
+      <RecursiveText text='Hello, ReactLynx 🎉!' />
+      <RunBenchmarkUntilHydrate />
+    </>,
+  );
+});

benchmark/react/cases/003-hello-list/index.tsx

@@ -68,6 +68,8 @@ function BenchmarkList() {
   );
 }
 
-root.render(
-  <BenchmarkList />,
-);
+runAfterLoadScript(() => {
+  root.render(
+    <BenchmarkList />,
+  );
+});

benchmark/react/cases/004-various-update/index.tsx

@@ -227,6 +227,8 @@ function F() {
   );
 }
 
-root.render(
-  <F />,
-);
+runAfterLoadScript(() => {
+  root.render(
+    <F />,
+  );
+});

benchmark/react/cases/005-load-script/index.tsx

@@ -0,0 +1,12 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react';
+import '@lynx-js/react/experimental/lazy/import';
+
+runAfterLoadScript(() => {
+  root.render(
+    <></>,
+  );
+});

benchmark/react/lynx.config.js

@@ -7,9 +7,11 @@ import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
 import { defineConfig } from '@lynx-js/rspeedy';
 
 import { pluginRepoFilePath } from './plugins/pluginRepoFilePath.mjs';
+import { pluginScriptLoad } from './plugins/pluginScriptLoad.mjs';
 
 export default defineConfig({
   output: {
+    filenameHash: false,
     minify: {
       js: true,
       jsOptions: {
@@ -25,7 +27,7 @@ export default defineConfig({
     entry: {
       '001-fib': [
         'event-target-polyfill',
-        './src/dummyRoot.jsx',
+        './src/dummyRoot.tsx',
         './cases/001-fib/index.ts',
       ],
       '002-hello-reactLynx': [
@@ -40,6 +42,9 @@ export default defineConfig({
       '004-various-update': [
         './cases/004-various-update/index.tsx',
       ],
+      '005-load-script': [
+        './cases/005-load-script/index.tsx',
+      ],
     },
   },
   plugins: [
@@ -49,6 +54,7 @@ export default defineConfig({
       pipelineSchedulerConfig: 0,
       debugInfoOutside: false,
     }),
+    pluginScriptLoad(),
     pluginQRCode({}),
   ],
   performance: {

benchmark/react/package.json

@@ -9,13 +9,15 @@
     "bench:002-hello-reactLynx": "benchx_cli run dist/002-hello-reactLynx.lynx.bundle --wait-for-id=stop-benchmark-true",
     "bench:003-hello-list": "benchx_cli run dist/003-hello-list.lynx.bundle --wait-for-id=stop-benchmark-true",
     "bench:004-various-update": "benchx_cli run dist/004-various-update.lynx.bundle --wait-for-id=stop-benchmark-true",
+    "bench:005-load-script": "benchx_cli run dist/005-load-script.lynx.bundle",
     "build": "rspeedy build",
     "dev": "rspeedy dev",
     "perfetto": "pnpm run --sequential --stream --aggregate-output '/^perfetto:.*/'",
     "perfetto:001-fib": "benchx_cli -o dist/001-fib.ptrace run dist/001-fib.lynx.bundle",
     "perfetto:002-hello-reactLynx": "benchx_cli -o dist/002-hello-reactLynx.ptrace run dist/002-hello-reactLynx.lynx.bundle --wait-for-id=stop-benchmark-true",
     "perfetto:003-hello-list": "benchx_cli -o dist/003-hello-list.ptrace run dist/003-hello-list.lynx.bundle --wait-for-id=stop-benchmark-true",
     "perfetto:004-various-update": "benchx_cli -o dist/004-various-update.ptrace run dist/004-various-update.lynx.bundle --wait-for-id=stop-benchmark-true",
+    "perfetto:005-load-script": "benchx_cli -o dist/005-load-script.ptrace run dist/005-load-script.lynx.bundle",
     "test": "echo 'No tests specified'"
   },
   "dependencies": {

benchmark/react/plugins/pluginScriptLoad.mjs

@@ -0,0 +1,52 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+/**
+ * @returns {import("@lynx-js/rspeedy").RsbuildPlugin}
+ */
+export const pluginScriptLoad = () => ({
+  name: 'pluginScriptLoad',
+  /**
+   * @param {import("@lynx-js/rspeedy").RsbuildPluginAPI} api
+   */
+  setup(api) {
+    api.modifyRspackConfig((_config, { rspack, appendPlugins }) => {
+      appendPlugins(
+        new rspack.BannerPlugin({
+          stage: rspack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+          raw: true,
+          banner: () => {
+            return `\
+const runAfterLoadScript = (() => {
+  const q = [];
+  const r = (cb) => { q.push(cb); };
+  r.flush = () => { for (const cb of q) { cb(); } };
+  return r;
+})();
+Codspeed.startBenchmark();
+`;
+          },
+        }),
+      );
+      appendPlugins(
+        new rspack.BannerPlugin({
+          stage: rspack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+          footer: true,
+          raw: true,
+          banner: ({ filename }) => {
+            // TODO(hzy): avoid hardcoded case dir
+            const caseDir = `benchmark/react`;
+            const chunkName = filename.replace(/^\.rspeedy\//, '');
+            // dprint-ignore
+            return `\
+Codspeed.stopBenchmark();
+Codspeed.setExecutedBenchmark(\`${caseDir}::\${${JSON.stringify(chunkName)}}_LoadScript\`);
+runAfterLoadScript.flush();
+`;
+          },
+        }),
+      );
+    });
+  },
+});

benchmark/react/rspeedy-env.d.ts

@@ -11,4 +11,13 @@ declare const Codspeed: {
   zeroStats(): void;
 };
 
+/**
+ * This function will be called after the script is loaded and executed.
+ * Codspeed don't allow stacked benchmark, but sadly we have some cases
+ * benchmark is executed while loading script, we need to move those cases
+ * to after script load using this API.
+ * @param cb The callback to run after script loaded.
+ */
+declare function runAfterLoadScript(cb: () => void): void;
+
 declare const __REPO_FILEPATH__: string;

benchmark/react/src/dummyRoot.jsx → benchmark/react/src/dummyRoot.tsx

@@ -4,4 +4,6 @@
 
 import { root } from '@lynx-js/react';
 
-root.render(<></>);
+runAfterLoadScript(() => {
+  root.render(<></>);
+});