Vite 8 came out this week. Great!
I have a single page app (the admin app for this blog) that is built on Vite, Mantine, TypeScript, and react-router. I tried upgrading to vite@8.0.0-beta.0 to see if it's any faster. tl;dr; it's 5 times faster. From 3.8 seconds to build, down to 0.8 seconds.
The app is just a one-man small side project but it uses some pretty heavy dependencies such as Mantine, @tanstack/react-query, prism-react-editor, react-router to name a few.
When you run vite build, it generates a dist/ directory whose dist/assets/ directory 11Mb in total and consists of over 300 different .js files. The reason it's so many is because the app uses a lot of code splitting.
Vite 7
Vite 8
HMR
I don't know how to measure HMR.
Even when I'm using Vite 7, it's so fast between pressing Cmd-S in the IDE to the change appearing directly in the local dev server.
Reminder; Vite 7 used to be esbuild for compilation during development, and Rollup for optimized production builds. With Vite 8, it's the new Rust powered Rolldown instead. For both things.
Conclusion
It's admittedly "rare" that I build. Usually, when working on this side project I type just dev which is a shortcut for vite which then starts a local server with HMR. Then I work on a bunch of changes, for minutes or for hours, and when I'm happy and done, I type just build to double check before creating a pull request and letting the automated tests on GitHub Actions run tsc -b && vite build one time.
But, there are times when you want to test the fully built version and you find yourself running vite build over and over. Not having to wait 4 seconds each time is a huge upgrade in my book.
Bonus: side of node_modules
I'm using Bun for this project but it still uses node_modules for the installed dependencies.
Running, rm -fr node_modules && bun install && du -sh node_modules produces:
- Before: 477MB
- After: 490MB
Pretty negligible difference. Before, esbuild (9.4 MiB) plus rollup (2.7 MiB). After, @rolldown (17.1 MiB).
Comments