Vite 4.3 performance (2)

vite-4.3-perf.md

Terms

• times
  • start up time: the time from "the command is executed" to the time "load event is triggered in browser".
  • root HMR time: the time from "the root file is changed" to the time "that file is executed in browser".
  • leaf HMR time: the time from "the leaf file is changed" to the time "that file is executed in browser".
• cold/hot start
  • cold start: the dependency optimization cache is deleted before each run
  • hot start: the dependency optimization cache exists by each run

Summary

• Using sapphi-red/performance-compare@808e8f56e6f2e61e46ed5b4bc9fd4cf355019477.
  • Startup time with plugin-react: 3.3x(cold) / 1.3x(hot)
  • Startup time with plugin-react-swc: 3.9x(cold) / 1.6x(hot)
  • Comparison with other tools
    • Vite(plugin-react)'s startup time is 0.16s faster than turbopack (cold start)
    • Vite(plugin-react)'s startup time is 1.2s faster than turbopack (warm start)
    • Vite(plugin-react-swc)'s startup time is 2.2s faster than turbopack (cold start)
    • Vite(plugin-react-swc)'s startup time is 2.9s faster than turbopack (warm start)
    • Vite's leaf HMR time is faster than turbopack
    • Vite's root HMR time is 5-10ms slower than turbopack
    • rspack takes half a time to startup than Vite but takes 1.7-3.3x time for HMR
• Notes about changes from the previous report
  • All startup time is around 100ms slower than the previous one. I don't know why it got slower.
  • Rspack 0.1.8's HMR time is 6 times faster than 0.1.1.
  • It seems turbopack 13.3.0's start up time somehow got 1s slower than 13.2.4. I ran it in the same condition as much as possible but the start up time of 13.2.4 was 4770ms.

Details

A test case with 1000 react components

Using sapphi-red/performance-compare@808e8f56e6f2e61e46ed5b4bc9fd4cf355019477.

Average of running 10 times by -n=10.

Vite 4.2.1 + plugin-react 3.1.0 / plugin-react-swc 3.2.0

cold start	name	startup	Root HMR	Leaf HMR
true	Vite	17236.7ms (including server start up time: 552.2ms)	49.6ms	25.5ms
true	Vite (swc)	13631.5ms (including server start up time: 247.1ms)	31.2ms	16.5ms
false	Vite	6009.4ms (including server start up time: 531.4ms)	39.7ms	19.1ms
false	Vite (swc)	4654.3ms (including server start up time: 232.3ms)	36.0ms	16.7ms

Vite 4.3.0-beta.7 + plugin-react 4.0.0-beta.1 / plugin-react-swc 3.3.0

cold start	name	startup	Root HMR	Leaf HMR
true	Vite	5136.0ms (including server start up time: 542.9ms)	28.0ms	12.7ms
true	Vite (swc)	3190.5ms (including server start up time: 245.1ms)	23.9ms	10.1ms
false	Vite	4517.2ms (including server start up time: 534.0ms)	32.4ms	13.1ms
false	Vite (swc)	2821.7ms (including server start up time: 234.8ms)	28.2ms	9.8ms

others (cold start)

name	startup	Root HMR	Leaf HMR
Rspack	2261.0ms (including server start up time: 512.9ms)	51.7ms	45.6ms
Turbopack	5522.5ms (including server start up time: 6.0ms)	21.2ms	20.1ms
Webpack (babel)	9617.7ms (including server start up time: 7338.0ms)	238.7ms	182.8ms
Webpack (swc)	5374.1ms (including server start up time: 2953.0ms)	258.4ms	211.8ms
Farm	2401.1ms (including server start up time: 554.7ms)	9.3ms	11.9ms
Parcel	5344.0ms	100.3ms	94.4ms

Machine Spec and additional informations

I ran this on the machine below with Node.js 18.16.0.

• CPU: Ryzen 9 5900X
• Memory: DDR4-3600 32GB
• SSD: WD Blue SN550 NVME SSD
• OS: Windows 10 Pro 21H2 19044.2846

Changes from the previous report

Previous report: https://gist.github.com/sapphi-red/db27f9c18ed31894e409224051119e1b

• Update tools
  • Node.js: 18.13.0 -> 18.16.0
  • playwright: 1.32.1 -> 1.32.3
• Update targets
  • Vite: 4.3.0-beta.2 -> 4.3.0-beta.7
    • plugin-react: 4.0.0-beta.0 -> 4.0.0-beta.1
    • plugin-react-swc: main (0ed5b22281876fc5dbf1df1ec0cc817535b9100b) -> 3.3.0
  • Rspack: 0.1.1 -> 0.1.8
  • Turbopack: next 13.2.4 -> next 13.3.0
  • Webpack: 5.77.0 -> 5.79.0
    • html-webpack-plugin: 5.5.0 -> 5.5.1
    • webpack-dev-server: 4.13.1 -> 4.13.3
    • babel: 7.21.3 -> 7.21.4
    • swc: 1.3.44 -> 1.3.51
  • farm: 0.5.2 -> 0.6.3