Vite 4.3 performance

vite-4.3-perf.md

Terms

• 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 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@81e8bd2bb1192566ff18f284fd78691d2d417c0d.

  • Startup time with plugin-react: 3.5x(cold) / 1.3x(hot)
  • Startup time with plugin-react-swc: 4.4x(cold) / 1.6x(hot)
  • Comparison with other tools
    • Vite(plugin-react)'s startup time is only 0.2s slower than turbopack (cold start)
    • Vite(plugin-react)'s startup time is 0.2s faster than turbopack (warm start)
    • Vite(plugin-react-swc)'s startup time is 1.5s faster than turbopack (cold start)
    • Vite(plugin-react-swc)'s startup time is 1.8s 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 10x time for HMR

• Using sun0day/vite-2.7-slow@d687d59cc66e572d1474773864d3b3ffc501121d

  • time to FCP: 11x - 21x

Details

A test case with 1000 react components

Using sapphi-red/performance-compare@81e8bd2bb1192566ff18f284fd78691d2d417c0d.

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 time	Root HMR time	Leaf HMR time
true	Vite	17010.5ms (including server start up time: 500.4ms)	47.4ms	29.1ms
true	Vite (swc)	13488.3ms (including server start up time: 258.7ms)	30.2ms	17.2ms
false	Vite	5825.7ms (including server start up time: 479.5ms)	39.4ms	18.4ms
false	Vite (swc)	4449.4ms (including server start up time: 240.6ms)	36.0ms	14.2ms

Vite 4.3.0-beta.2 + plugin-react 4.0.0-beta.0 / plugin-react-swc main¹

cold start	name	startup time	Root HMR time	Leaf HMR time
true	Vite	4834.7ms (including server start up time: 558.8ms)	27.3ms	12.8ms
true	Vite (swc)	3044.4ms (including server start up time: 253.4ms)	23.8ms	10.2ms
false	Vite	4349.8ms (including server start up time: 531.6ms)	32.2ms	12.6ms
false	Vite (swc)	2702.5ms (including server start up time: 239.2ms)	27.8ms	10.1ms

others (cold start)

name	startup time	Root HMR time	Leaf HMR time
Rspack	2182.2ms (including server start up time: 521.5ms)	297.5ms	287.8ms
Turbopack	4563.1ms (including server start up time: 11.4ms)	21.0ms	20.3ms
Webpack (babel)	9510.3ms (including server start up time: 7206.2ms)	244.7ms	182.8ms
Webpack (swc)	5197.6ms (including server start up time: 2820.2ms)	244.2ms	210.6ms
Farm	2309.7ms (including server start up time: 529.7ms)	9.8ms	7.4ms
Parcel	5310.5ms	101.7ms	95.1ms

A test case with a large dependency

Using sun0day/vite-2.7-slow@d687d59cc66e572d1474773864d3b3ffc501121d

Average of running 10 times by changing this line. I added test.setTimeout(1000 * 100) to increase the timeout.

Vite 4.2.1 + plugin-react 3.1.0

FCP max: 70334
FCP min: 33901
FCP avg: 38031

Vite 4.3.0-beta.2 + plugin-react 4.0.0-beta.0

FCP max: 3348
FCP min: 2970
FCP avg: 3083

Machine Spec and additional informations

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

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

Footnotes

1. 0ed5b22281876fc5dbf1df1ec0cc817535b9100b ↩