chore(runtime-vapor): add benchmark build flag

diff --git a/benchmark/client/App.vue b/benchmark/client/App.vue
index 0e7cbc82fbd5a7eb05e21b15f6e3f40fcd7bc318..8c2d9a3b33d45d7db68d9a31b4b043d0c41f9eae 100644 (file)
--- a/benchmark/client/App.vue
+++ b/benchmark/client/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts" vapor>
 import {
-  ref,
   shallowRef,
   triggerRef,
   type ShallowRef,
@@ -11,7 +10,7 @@ import { defer, wrap } from './profiling'
 
 const isVapor = !!import.meta.env.IS_VAPOR
 
-const selected = ref<number>()
+const selected = shallowRef<number>()
 const rows = shallowRef<
   {
     id: number
@@ -79,10 +78,32 @@ async function bench() {
 }
 
 const isSelected = createSelector(selected)
+
+const globalThis = window
 </script>
 
 <template>
   <h1>Vue.js ({{ isVapor ? 'Vapor' : 'Virtual DOM' }}) Benchmark</h1>
+
+  <div style="display: flex; gap: 4px; margin-bottom: 4px">
+    <label>
+      <input
+        type="checkbox"
+        :value="globalThis.doProfile"
+        @change="globalThis.doProfile = $event.target.checked"
+      />
+      Profiling
+    </label>
+    <label>
+      <input
+        type="checkbox"
+        :value="globalThis.reactivity"
+        @change="globalThis.reactivity = $event.target.checked"
+      />
+      Reactivity Cost
+    </label>
+  </div>
+
   <div
     id="control"
     style="display: flex; flex-direction: column; width: fit-content; gap: 6px"

diff --git a/benchmark/client/profiling.ts b/benchmark/client/profiling.ts
index d4de3f517bdd62a2370893fa9a7387cf7058d0bc..2269e5ef9beb1174353416503fd7255d45b62d2a 100644 (file)
--- a/benchmark/client/profiling.ts
+++ b/benchmark/client/profiling.ts
@@ -2,14 +2,16 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-restricted-globals */
 
-declare module globalThis {
+declare namespace globalThis {
   let doProfile: boolean
+  let reactivity: boolean
   let recordTime: boolean
   let times: Record<string, number[]>
 }
 
 globalThis.recordTime = true
 globalThis.doProfile = false
+globalThis.reactivity = false
 
 export const defer = () => new Promise(r => requestIdleCallback(r))
 
@@ -34,7 +36,18 @@ export function wrap(
     fn(...args)
 
     await defer()
-    const time = performance.now() - start
+    let time: number
+    if (globalThis.reactivity) {
+      time = performance.measure(
+        'flushJobs-measure',
+        'flushJobs-start',
+        'flushJobs-end',
+      ).duration
+      performance.clearMarks()
+      performance.clearMeasures()
+    } else {
+      time = performance.now() - start
+    }
     const prevTimes = times[id] || (times[id] = [])
     prevTimes.push(time)
 

diff --git a/benchmark/index.js b/benchmark/index.js
index 7ea24ec1f66c76f4ab35fbb74f4efb36f443cd7a..2332761ec6b9771c72ca1abd90895d1ac9386b31 100644 (file)
--- a/benchmark/index.js
+++ b/benchmark/index.js
@@ -88,9 +88,11 @@ if (!skipBench) {
 async function buildLib() {
   console.info(colors.blue('Building lib...'))
 
+  /** @type {import('node:child_process').SpawnOptions} */
   const options = {
     cwd: path.resolve(import.meta.dirname, '..'),
     stdio: 'inherit',
+    env: { ...process.env, BENCHMARK: 'true' },
   }
   const buildOptions = devBuild ? '-df' : '-pf'
   const [{ ok }, { ok: ok2 }, { ok: ok3 }, { ok: ok4 }] = await Promise.all([
@@ -130,7 +132,7 @@ async function buildApp(isVapor) {
     colors.blue(`\nBuilding ${isVapor ? 'Vapor' : 'Virtual DOM'} app...\n`),
   )
 
-  process.env.NODE_ENV = 'production'
+  if (!devBuild) process.env.NODE_ENV = 'production'
   const CompilerSFC = await import(
     '../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
   )

diff --git a/packages/global.d.ts b/packages/global.d.ts
index 8b627d2e556215791bc00065ff7257ecdad31577..e6acf0d1be876e4d85fdbea04fb4a9d80329fac7 100644 (file)
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -9,6 +9,7 @@ declare var __CJS__: boolean
 declare var __SSR__: boolean
 declare var __VERSION__: string
 declare var __COMPAT__: boolean
+declare var __BENCHMARK__: boolean
 
 // Feature flags
 declare var __FEATURE_OPTIONS_API__: boolean

diff --git a/packages/runtime-vapor/src/scheduler.ts b/packages/runtime-vapor/src/scheduler.ts
index 5b3a1e93ad6e70af0c305f62e89853c71bd0b6da..cfdfd13499de4ee09a29df3cc5f2c26d91e516bd 100644 (file)
--- a/packages/runtime-vapor/src/scheduler.ts
+++ b/packages/runtime-vapor/src/scheduler.ts
@@ -139,6 +139,7 @@ export function flushPostFlushCbs(): void {
 
 // TODO: dev mode and checkRecursiveUpdates
 function flushJobs() {
+  if (__BENCHMARK__) performance.mark('flushJobs-start')
   isFlushPending = false
   isFlushing = true
 
@@ -169,6 +170,7 @@ function flushJobs() {
     if (queue.length || pendingPostFlushCbs.length) {
       flushJobs()
     }
+    if (__BENCHMARK__) performance.mark('flushJobs-end')
   }
 }
 

diff --git a/playground/setup/dev.js b/playground/setup/dev.js
index a6ba15274db6250aaf9aca2f24fafb05594774fa..8f24be757517357fbf0b62382b250f6b9b6cebb0 100644 (file)
--- a/playground/setup/dev.js
+++ b/playground/setup/dev.js
@@ -51,6 +51,7 @@ export function DevPlugin({ browser = false } = {}) {
           __NODE_JS__: String(false),
           // need SSR-specific branches?
           __SSR__: String(false),
+          __BENCHMARK__: 'false',
 
           // 2.x compat build
           __COMPAT__: String(false),

diff --git a/rollup.config.js b/rollup.config.js
index 0efe1326a5fe0b12774978eba8b90387171b0caa..2ed8bb09fe81772c513f6cdef3ab94c618ad0dd2 100644 (file)
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -218,6 +218,7 @@ function createConfig(format, output, plugins = []) {
       __CJS__: String(isCJSBuild),
       // need SSR-specific branches?
       __SSR__: String(!isGlobalBuild),
+      __BENCHMARK__: process.env.BENCHMARK || 'false',
 
       // 2.x compat build
       __COMPAT__: String(isCompatBuild),

diff --git a/scripts/dev.js b/scripts/dev.js
index fb4d3873e8b90f5fd0401ded9cb4702bd3f09f92..a43d1142ae26e98f19281eb8cd1c591de1518fb8 100644 (file)
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -151,6 +151,7 @@ for (const target of targets) {
         __ESM_BROWSER__: String(format.includes('esm-browser')),
         __CJS__: String(format === 'cjs'),
         __SSR__: String(format !== 'global'),
+        __BENCHMARK__: process.env.BENCHMARK || 'false',
         __COMPAT__: String(target === 'vue-compat'),
         __FEATURE_SUSPENSE__: `true`,
         __FEATURE_OPTIONS_API__: `true`,

diff --git a/vitest.config.ts b/vitest.config.ts
index fb67562fca57c36a632a865aa4c312506992e8b1..4d7285f7616573f2489e9115dbe7ac110a89fb2c 100644 (file)
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
     __ESM_BROWSER__: false,
     __CJS__: true,
     __SSR__: true,
+    __BENCHMARK__: false,
     __FEATURE_OPTIONS_API__: true,
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,