chore(runtime-vapor): add benchmark build flag

Author: sxzz

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"

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)
 

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'
   )

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

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')
   }
 }
 

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),

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),

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`,

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,