Vite vs. Next + turbopack HMR Benchmark

This repository measures how fast two popular web development tools can update your code in the browser while you're working. When you edit a file and save it, these tools use a feature called "hot module replacement" (HMR) to instantly show your changes without reloading the page. The faster this happens, the better your development experience.

The benchmark compares Vite, a lightweight build tool, against Next.js running with turbopack, which is Vercel's newer, faster JavaScript compiler. The test creates two realistic scenarios: editing a large root component (the main file that imports lots of other files) and editing a small leaf component (a standalone file with no dependencies). By measuring the exact time from when you save the file to when the updated code appears in your browser, the benchmark shows how snappy each tool feels in practice.

The results show that for large root components, Vite and Next with turbopack perform almost identically—both taking around 330-340 milliseconds. However, for small leaf components, Next with turbopack is noticeably faster, completing updates in about 84 milliseconds versus Vite's 142 milliseconds. This is a meaningful difference you'd feel as a developer, though not as dramatic as turbopack's marketing has sometimes suggested. The repository also includes a comparison of Next's server-side rendering approach, which is considerably slower (around 836 milliseconds), demonstrating why client-side rendering matters for HMR performance.

This project is useful for developers deciding between build tools, or for anyone curious about real-world performance comparisons between competing technologies. Rather than relying on vendor claims, it provides transparent methodology and raw data so you can make an informed choice based on your specific needs.