Skip to content

Instantly share code, notes, and snippets.

@sapphi-red
Last active February 12, 2024 13:33
Show Gist options
  • Save sapphi-red/25be97327ee64a3c1dce793444afdf6e to your computer and use it in GitHub Desktop.
Save sapphi-red/25be97327ee64a3c1dce793444afdf6e to your computer and use it in GitHub Desktop.
Vite 4.3 performance (2)

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
    • 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment