chore: benchmark reference

2025-02-10 10:04:22 +08:00 · 2025-02-10 10:04:22 +08:00 · 6df8c01cd0
parent c317a06043
commit 6df8c01cd0
5 changed files with 77 additions and 83 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,3 +11,4 @@ TODOs.md
 dts-build/packages
 *.tsbuildinfo
 *.tgz
+packages-private/benchmark/reference
--- a/packages-private/benchmark/client/App.vue
+++ b/packages-private/benchmark/client/App.vue
@ -1,22 +1,10 @@
-<script setup lang="ts">
-import {
-  shallowRef,
-  triggerRef,
-  type ShallowRef,
-  // createSelector,
-} from 'vue'
+<script setup>
+import { shallowRef, triggerRef } from 'vue'
 import { buildData } from './data'
 import { defer, wrap } from './profiling'

-const isVapor = !!import.meta.env.IS_VAPOR
-
-const selected = shallowRef<number>()
-const rows = shallowRef<
-  {
-    id: number
-    label: ShallowRef<string>
-  }[]
->([])
+const selected = shallowRef()
+const rows = shallowRef([])

 // Bench Add: https://jsbench.me/45lzxprzmu/1
 const add = wrap('add', () => {
@ -24,7 +12,7 @@ const add = wrap('add', () => {
  triggerRef(rows)
 })

-const remove = wrap('remove', (id: number) => {
+const remove = wrap('remove', id => {
  rows.value.splice(
    rows.value.findIndex(d => d.id === id),
    1,
@ -32,7 +20,7 @@ const remove = wrap('remove', (id: number) => {
  triggerRef(rows)
 })

-const select = wrap('select', (id: number) => {
+const select = wrap('select', id => {
  selected.value = id
 })

@ -77,13 +65,11 @@ async function bench() {
  }
 }

-// const isSelected = createSelector(selected)
-
 const globalThis = window
 </script>

 <template>
-  <h1>Vue.js ({{ isVapor ? 'Vapor' : 'Virtual DOM' }}) Benchmark</h1>
+  <h1>Vue.js (VDOM) Benchmark</h1>

  <div style="display: flex; gap: 4px; margin-bottom: 4px">
    <label>
@ -110,31 +96,37 @@ const globalThis = window
  >
    <button @click="bench">Benchmark mounting</button>
    <button id="run" @click="run">Create 1,000 rows</button>
-    <button id="runLots" @click="runLots">Create 10,000 rows</button>
+    <button id="runlots" @click="runLots">Create 10,000 rows</button>
    <button id="add" @click="add">Append 1,000 rows</button>
    <button id="update" @click="update">Update every 10th row</button>
    <button id="clear" @click="clear">Clear</button>
    <button id="swaprows" @click="swapRows">Swap Rows</button>
  </div>
  <div id="time"></div>
-  <table>
+  <table class="table table-hover table-striped test-data">
    <tbody>
      <tr
        v-for="row of rows"
        :key="row.id"
-        :class="{ danger: selected === row.id }"
+        :class="selected === row.id ? 'danger' : ''"
      >
-        <td>{{ row.id }}</td>
-        <td>
+        <td class="col-md-1">{{ row.id }}</td>
+        <td class="col-md-4">
          <a @click="select(row.id)">{{ row.label.value }}</a>
        </td>
-        <td>
-          <button @click="remove(row.id)">x</button>
+        <td class="col-md-1">
+          <a @click="remove(row.id)">
+            <span class="glyphicon glyphicon-remove" aria-hidden="true">x</span>
+          </a>
        </td>
        <td class="col-md-6"></td>
      </tr>
    </tbody>
  </table>
+  <span
+    class="preloadicon glyphicon glyphicon-remove"
+    aria-hidden="true"
+  ></span>
 </template>

 <style>
--- a/packages-private/benchmark/client/AppVapor.vue
+++ b/packages-private/benchmark/client/AppVapor.vue
@ -1,22 +1,10 @@
-<script setup vapor lang="ts">
-import {
-  shallowRef,
-  triggerRef,
-  type ShallowRef,
-  // createSelector,
-} from 'vue'
+<script setup vapor>
+import { shallowRef, triggerRef } from 'vue'
 import { buildData } from './data'
 import { defer, wrap } from './profiling'

-const isVapor = !!import.meta.env.IS_VAPOR
-
-const selected = shallowRef<number>()
-const rows = shallowRef<
-  {
-    id: number
-    label: ShallowRef<string>
-  }[]
->([])
+const selected = shallowRef()
+const rows = shallowRef([])

 // Bench Add: https://jsbench.me/45lzxprzmu/1
 const add = wrap('add', () => {
@ -24,7 +12,7 @@ const add = wrap('add', () => {
  triggerRef(rows)
 })

-const remove = wrap('remove', (id: number) => {
+const remove = wrap('remove', id => {
  rows.value.splice(
    rows.value.findIndex(d => d.id === id),
    1,
@ -32,7 +20,7 @@ const remove = wrap('remove', (id: number) => {
  triggerRef(rows)
 })

-const select = wrap('select', (id: number) => {
+const select = wrap('select', id => {
  selected.value = id
 })

@ -77,13 +65,11 @@ async function bench() {
  }
 }

-// const isSelected = createSelector(selected)
-
 const globalThis = window
 </script>

 <template>
-  <h1>Vue.js ({{ isVapor ? 'Vapor' : 'Virtual DOM' }}) Benchmark</h1>
+  <h1>Vue.js (Vapor) Benchmark</h1>

  <div style="display: flex; gap: 4px; margin-bottom: 4px">
    <label>
@ -110,31 +96,37 @@ const globalThis = window
  >
    <button @click="bench">Benchmark mounting</button>
    <button id="run" @click="run">Create 1,000 rows</button>
-    <button id="runLots" @click="runLots">Create 10,000 rows</button>
+    <button id="runlots" @click="runLots">Create 10,000 rows</button>
    <button id="add" @click="add">Append 1,000 rows</button>
    <button id="update" @click="update">Update every 10th row</button>
    <button id="clear" @click="clear">Clear</button>
    <button id="swaprows" @click="swapRows">Swap Rows</button>
  </div>
  <div id="time"></div>
-  <table>
+  <table class="table table-hover table-striped test-data">
    <tbody>
      <tr
        v-for="row of rows"
        :key="row.id"
-        :class="{ danger: selected === row.id }"
+        :class="selected === row.id ? 'danger' : ''"
      >
-        <td>{{ row.id }}</td>
-        <td>
+        <td class="col-md-1">{{ row.id }}</td>
+        <td class="col-md-4">
          <a @click="select(row.id)">{{ row.label.value }}</a>
        </td>
-        <td>
-          <button @click="remove(row.id)">x</button>
+        <td class="col-md-1">
+          <a @click="remove(row.id)">
+            <span class="glyphicon glyphicon-remove" aria-hidden="true">x</span>
+          </a>
        </td>
        <td class="col-md-6"></td>
      </tr>
    </tbody>
  </table>
+  <span
+    class="preloadicon glyphicon glyphicon-remove"
+    aria-hidden="true"
+  ></span>
 </template>

 <style>
--- a/packages-private/benchmark/index.js
+++ b/packages-private/benchmark/index.js
@ -24,7 +24,8 @@ const {
    count: countStr,
    warmupCount: warmupCountStr,
    noHeadless,
-    devBuild,
+    noMinify,
+    reference,
  },
 } = parseArgs({
  allowNegative: true,
@ -67,9 +68,12 @@ const {
    noHeadless: {
      type: 'boolean',
    },
-    devBuild: {
+    noMinify: {
      type: 'boolean',
-      short: 'd',
+    },
+    reference: {
+      type: 'boolean',
+      short: 'r',
    },
  },
 })
@ -79,10 +83,10 @@ const count = +(/** @type {string}*/ (countStr))
 const warmupCount = +(/** @type {string}*/ (warmupCountStr))
 const sha = await getSha(true)

-if (!skipLib) {
+if (!skipLib && !reference) {
  await buildLib()
 }
-if (!skipApp) {
+if (!skipApp && !reference) {
  await rm('client/dist', { recursive: true }).catch(() => {})
  vdom && (await buildApp(false))
  !noVapor && (await buildApp(true))
@ -103,13 +107,10 @@ async function buildLib() {
    stdio: 'inherit',
    env: { ...process.env, BENCHMARK: 'true' },
  }
-  const buildOptions = devBuild ? '-df' : '-pf'
  const [{ ok }, { ok: ok2 }, { ok: ok3 }] = await Promise.all([
    exec(
      'pnpm',
-      `run --silent build shared compiler-core compiler-dom ${buildOptions} cjs`.split(
-        ' ',
-      ),
+      `run --silent build shared compiler-core compiler-dom -pf cjs`.split(' '),
      options,
    ),
    exec(
@ -121,7 +122,9 @@ async function buildLib() {
    ),
    exec(
      'pnpm',
-      `run --silent build vue ${buildOptions} esm-browser-vapor`.split(' '),
+      `run --silent build shared reactivity runtime-core runtime-dom runtime-vapor vue -f esm-bundler+esm-bundler-runtime`.split(
+        ' ',
+      ),
      options,
    ),
  ])
@ -138,15 +141,15 @@ async function buildApp(isVapor) {
    colors.blue(`\nBuilding ${isVapor ? 'Vapor' : 'Virtual DOM'} app...\n`),
  )

-  if (!devBuild) process.env.NODE_ENV = 'production'
+  process.env.NODE_ENV = 'production'
+
  const CompilerSFC = await import(
    '../../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
  )
-  const prodSuffix = devBuild ? '.js' : '.prod.js'

  const runtimePath = path.resolve(
    import.meta.dirname,
-    '../../packages/vue/dist/vue.runtime-with-vapor.esm-browser' + prodSuffix,
+    '../../packages/vue/dist/vue.runtime.esm-bundler.js',
  )

  const mode = isVapor ? 'vapor' : 'vdom'
@ -157,7 +160,7 @@ async function buildApp(isVapor) {
      'import.meta.env.IS_VAPOR': String(isVapor),
    },
    build: {
-      minify: !devBuild,
+      minify: !noMinify,
      outDir: path.resolve('./client/dist', mode),
      rollupOptions: {
        onwarn(log, handler) {
@ -181,8 +184,10 @@ async function buildApp(isVapor) {
 }

 function startServer() {
-  const server = connect().use(sirv('./client/dist')).listen(port)
-  printPort(port)
+  const server = connect()
+    .use(sirv(reference ? './reference' : './client/dist', { dev: true }))
+    .listen(port)
+  printPort()
  process.on('SIGTERM', () => server.close())
  return server
 }
@ -203,18 +208,25 @@ async function benchmark() {
  await browser.close()
 }

+/**
+ *  @param {boolean} isVapor
+ */
+function getURL(isVapor) {
+  return `http://localhost:${port}/${reference ? '' : isVapor ? 'vapor' : 'vdom'}/`
+}
+
 /**
 *
 * @param {import('puppeteer').Browser} browser
 * @param {boolean} isVapor
 */
 async function doBench(browser, isVapor) {
-  const mode = isVapor ? 'vapor' : 'vdom'
+  const mode = reference ? `reference` : isVapor ? 'vapor' : 'vdom'
  console.info('\n\nmode:', mode)

  const page = await browser.newPage()
  page.emulateCPUThrottling(4)
-  await page.goto(`http://localhost:${port}/${mode}`, {
+  await page.goto(getURL(isVapor), {
    waitUntil: 'networkidle0',
  })

@ -256,7 +268,7 @@ async function doBench(browser, isVapor) {
    await clickButton('add') // append rows to large table

    await withoutRecord(() => clickButton('clear'))
-    await clickButton('runLots') // create many rows
+    await clickButton('runlots') // create many rows
    await withoutRecord(() => clickButton('clear'))

    // TODO replace all rows
@ -293,7 +305,7 @@ async function doBench(browser, isVapor) {
    for (let i = 1; i <= 10; i++) {
      await page.click(`tbody > tr:nth-child(2) > td:nth-child(2) > a`)
      await page.waitForSelector(`tbody > tr:nth-child(2).danger`)
-      await page.click(`tbody > tr:nth-child(2) > td:nth-child(3) > button`)
+      await page.click(`tbody > tr:nth-child(2) > td:nth-child(3) > a`)
      await wait()
    }
  }
@ -372,13 +384,10 @@ function round(n) {
  return +n.toFixed(2)
 }

-/** @param {number} port */
-function printPort(port) {
+function printPort() {
  const vaporLink = !noVapor
-    ? `\nVapor: ${colors.blue(`http://localhost:${port}/vapor`)}`
-    : ''
-  const vdomLink = vdom
-    ? `\nvDom:  ${colors.blue(`http://localhost:${port}/vdom`)}`
+    ? `\n${reference ? `Reference` : `Vapor`}: ${colors.blue(getURL(true))}`
    : ''
+  const vdomLink = vdom ? `\nvDom:  ${colors.blue(getURL(false))}` : ''
  console.info(`\n\nServer started at`, vaporLink, vdomLink)
 }
--- a/packages-private/benchmark/package.json
+++ b/packages-private/benchmark/package.json
@ -5,7 +5,7 @@
  "license": "MIT",
  "type": "module",
  "scripts": {
-    "dev": "pnpm start --devBuild --skipBench --vdom",
+    "dev": "pnpm start --noMinify --skipBench --vdom",
    "start": "node index.js"
  },
  "dependencies": {