DEV Community

loading...

Vite 2 - A speed comparison in Vue

Alvaro Saburido
"Chamo very crazy loco" Frontend & Creative Telecommunications engineer
・2 min read

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>.

Screenshot 2021-02-28 at 12.23.51

vue-cli vite 🏆
Scaffolding ~28s ~5.95s vite-small

 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 vite-small

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 vite-small

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 vite-small

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 vite-small
Dev Server ~1.64s ~0.37s vite-small
Update ~0.349s <0.3s vite-small
Build ~11.27s ~2.88s vite-small

Discussion (0)