Following my latest post about Vite ⚡️ let's actually do some tests to demonstrate how fast is against standard bundler-based setups.
These tests are done in a 2016'S MacBook Pro with 2,7 GHz Quad-Core Intel Core i7 and 16GB 2133 MHz RAM
Speed comparison against Vue-cli (webpack)
To get a notion of how fast is Vite against more standard frontend tooling, in the case of vue we're going to compare it with vue-cli that uses webpack.
✋🏻 These tests are based on the basic project available after scaffolding with each tool containing only one (1) view and one (1) component. Results will improve significantly if the same tests are replicated to larger codebases.
Scaffolding
From creating a new vue project via command:
yarn create @vitejs/app <project-name> took only ~5.95s against ~28s of vue create <project-name>.
| vue-cli | vite | 🏆 | |
|---|---|---|---|
| Scaffolding | ~28s | ~5.95s |  |
Dev server
When cold-starting the dev server, Vite was ridiculously fast 😱 with approx ~370ms against 1.64s of vue-cli
| vue-cli | vite | 🏆 | |
|---|---|---|---|
| Dev Server | ~1.64s | ~0.37s | |
Updating a component
I must say testing this in a small project is barely observable, to properly test this scenario bigger and more complex projects should be used to really reflect how Vite Hot Module Replacement (HMR) over native ESM against performs better than bundler-based where the update speed degrades linearly with the size of the app.
If someone reading this article has already a test case with a complex app that would be awesome.
| vue-cli | vite | 🏆 | |
|---|---|---|---|
| Update | ~0.349s | <0.3s | |
Building
What about building for production? Shipping unbundled ESM in production is still inefficient. For the time being Rollup is used in Vite for building, so that it will be a Rollop vs. Webpack kinda thing.
Even tho, Vite smashes the competition by building the sample project in ~2.88s against nearly 11.30s from the webpack based.
| vue-cli | vite | 🏆 | |
|---|---|---|---|
| Build | ~11.27s | ~2.88s | |
Total Results
Our winner is Vite by a landslide 🎉. I hope this comparison helps you decide to start using Vite, if so, let me know in the comments 😄
| vue-cli | vite | 🏆 | |
|---|---|---|---|
| Scaffolding | ~28s | ~5.95s | |
| Dev Server | ~1.64s | ~0.37s | |
| Update | ~0.349s | <0.3s | |
| Build | ~11.27s | ~2.88s | |
Top comments (0)