ci: add continuous reactivity benchmark (#9638)

.github/workflows/ci.yml

@@ -58,6 +58,31 @@ jobs:
       - name: Run ssr unit tests
         run: pnpm run test-unit server-renderer
 
+  benchmarks:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
+    env:
+      PUPPETEER_SKIP_DOWNLOAD: 'true'
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Run benchmarks
+        uses: CodSpeedHQ/action@v1
+        with:
+          run: pnpm vitest bench --run
+          token: ${{ secrets.CODSPEED_TOKEN }}
+
   e2e-test:
     runs-on: ubuntu-latest
     if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository

package.json

@@ -22,6 +22,7 @@
     "test-dts": "run-s build-dts test-dts-only",
     "test-dts-only": "tsc -p ./packages/dts-test/tsconfig.test.json",
     "test-coverage": "vitest -c vitest.unit.config.ts --coverage",
+    "test-bench": "vitest bench",
     "release": "node scripts/release.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
@@ -60,6 +61,7 @@
   "devDependencies": {
     "@babel/parser": "^7.23.5",
     "@babel/types": "^7.23.5",
+    "@codspeed/vitest-plugin": "^2.3.1",
     "@rollup/plugin-alias": "^5.0.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.1",
@@ -69,7 +71,7 @@
     "@types/hash-sum": "^1.0.2",
     "@types/node": "^20.10.3",
     "@typescript-eslint/parser": "^6.13.0",
-    "@vitest/coverage-istanbul": "^0.34.6",
+    "@vitest/coverage-istanbul": "^1.0.2",
     "@vue/consolidate": "0.17.3",
     "conventional-changelog-cli": "^4.1.0",
     "enquirer": "^2.4.1",

packages/reactivity/__tests__/computed.bench.ts

@@ -0,0 +1,126 @@
+import { describe, bench } from 'vitest'
+import { ComputedRef, Ref, computed, ref } from '../src/index'
+
+describe('computed', () => {
+  bench('create computed', () => {
+    computed(() => 100)
+  })
+
+  {
+    let i = 0
+    const o = ref(100)
+    bench('write independent ref dep', () => {
+      o.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    computed(() => v.value * 2)
+    let i = 0
+    bench("write ref, don't read computed (never invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    computed(() => {
+      return v.value * 2
+    })
+    let i = 0
+    bench("write ref, don't read computed (never invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    c.value
+    let i = 0
+    bench("write ref, don't read computed (invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    let i = 0
+    bench('write ref, read computed', () => {
+      v.value = i++
+      c.value
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      computeds.push(c)
+    }
+    let i = 0
+    bench("write ref, don't read 1000 computeds (never invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      c.value
+      computeds.push(c)
+    }
+    let i = 0
+    bench("write ref, don't read 1000 computeds (invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      c.value
+      computeds.push(c)
+    }
+    let i = 0
+    bench('write ref, read 1000 computeds', () => {
+      v.value = i++
+      computeds.forEach(c => c.value)
+    })
+  }
+
+  {
+    const refs: Ref<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      refs.push(ref(i))
+    }
+    const c = computed(() => {
+      let total = 0
+      refs.forEach(ref => (total += ref.value))
+      return total
+    })
+    let i = 0
+    const n = refs.length
+    bench('1000 refs, 1 computed', () => {
+      refs[i++ % n].value++
+      c.value
+    })
+  }
+})

packages/reactivity/__tests__/reactiveArray.bench.ts

@@ -0,0 +1,92 @@
+import { bench } from 'vitest'
+import { computed, reactive, readonly, shallowRef, triggerRef } from '../src'
+
+for (let amount = 1e1; amount < 1e4; amount *= 10) {
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive(rawArray)
+    const c = computed(() => {
+      return r.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *reactive* array, ${amount} elements`, () => {
+      for (let i = 0, n = r.length; i < n; i++) {
+        r[i]++
+      }
+      c.value
+    })
+  }
+
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive(rawArray)
+    const c = computed(() => {
+      return r.reduce((v, a) => a + v, 0)
+    })
+
+    bench(
+      `reduce *reactive* array, ${amount} elements, only change first value`,
+      () => {
+        r[0]++
+        c.value
+      }
+    )
+  }
+
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive({ arr: readonly(rawArray) })
+    const c = computed(() => {
+      return r.arr.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *readonly* array, ${amount} elements`, () => {
+      r.arr = r.arr.map(v => v + 1)
+      c.value
+    })
+  }
+
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = shallowRef(rawArray)
+    const c = computed(() => {
+      return r.value.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *raw* array, copied, ${amount} elements`, () => {
+      r.value = r.value.map(v => v + 1)
+      c.value
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = shallowRef(rawArray)
+    const c = computed(() => {
+      return r.value.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *raw* array, manually triggered, ${amount} elements`, () => {
+      for (let i = 0, n = rawArray.length; i < n; i++) {
+        rawArray[i]++
+      }
+      triggerRef(r)
+      c.value
+    })
+  }
+}