perf(router): use .concat instead of spread syntax

[EdamAme-x]

The author should do the following, if applicable

• Add tests
• Run tests
• bun run format:fix && bun run lint:fix to format the code
• Add TSDoc/JSDoc to document the code

[EdamAme-x]

.concat is more than 10x faster than the spread syntax (browser)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.72%. Comparing base (3164326) to head (a15a5b2).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3584   +/-   ##
=======================================
  Coverage   94.72%   94.72%           
=======================================
  Files         158      158           
  Lines        9553     9555    +2     
  Branches     2815     2815           
=======================================
+ Hits         9049     9051    +2     
  Misses        504      504           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[usualoma]

@EdamAme-x Thank you!

[EdamAme-x]

★ 20k!!

[yusukebe]

Hey @EdamAme-x

I've benchmarked the "spread syntax" vs .concat.

The script:

import { bench, group, run } from 'mitata'

const ARRAY_SIZE = 10000

const array1: number[] = []
const array2: number[] = []

for (let i = 0; i < ARRAY_SIZE; ++i) {
  array1.push(i)
  array2.push(i)
}

bench('noop', async () => {})

group(() => {
  bench('spread syntax', async () => {
    ;[...array1, ...array2]
  })
  bench('concat', async () => {
    array1.concat(array2)
  })
})

run()

Node.js

ARRAY_SIZE = 10000

-------------------------------------- -------------------------------
spread syntax            53.69 µs/iter  47.92 µs █
                (43.96 µs … 581.21 µs) 293.21 µs █▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
concat                   26.42 µs/iter  26.40 µs     █   █
                 (25.72 µs … 27.55 µs)  27.31 µs █▁▁██████▁▁▁▁▁▁▁▁▁▁█▁

ARRAY_SIZE = 100

-------------------------------------- -------------------------------
spread syntax           427.78 ns/iter 434.72 ns   ▂ █
               (407.11 ns … 497.25 ns) 477.58 ns ▃▄█▆███▃▃▄▅▃▃▃▂▁▁▁▁▁▁
concat                  174.39 ns/iter 185.43 ns  ▆ ▅█      ▃▇
               (156.11 ns … 236.78 ns) 207.66 ns ▆████▇▃▁▄█████▃▂▂▁▁▁▁

Bun

ARRAY_SIZE = 10000

-------------------------------------- -------------------------------
spread syntax             7.97 µs/iter   7.99 µs ██          █
                   (7.90 µs … 8.07 µs)   8.04 µs ██▁█▁▁██▁▁████▁▁██▁▁▁
concat                    4.89 µs/iter   4.91 µs             ▂█▆
                   (4.71 µs … 5.04 µs)   4.98 µs ▃▃▁▃▁▁▁▁▁▃▁▃███▅▁▃▃▃▁

ARRAY_SIZE = 100

-------------------------------------- -------------------------------
spread syntax           159.37 ns/iter 155.81 ns █
               (145.30 ns … 272.05 ns) 234.85 ns █▆█▃▁▁▁▁▁▁▁▂▂▂▂▁▁▁▁▁▁
concat                  157.40 ns/iter 189.04 ns  █
               (138.39 ns … 244.21 ns) 206.90 ns ██▃▄▁▁▁▁▁▁▁▁▁▁▁█▃▃▂▁▁

---

As you said, concat is faster than the spread syntax! Thanks.

[yusukebe]

@EdamAme-x

If you're interested in performance improvement, it's great to measure performance with benchmarks like the script above using metata on both Node.js and Bun (and Deno).