Vite 2 - A speed comparison in Vue
Tags: webdev, performance, javascript
Published: 2021-03-03 15:22:56

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1kd7nd3lmxif3o1588w.png)

|             	| vue-cli 	| vite   	| 🏆 	|
|-------------	|---------	|--------	|---	|
| Scaffolding 	| ~28s    	| **~5.95s** 	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)|
 
## Dev server

When cold-starting the dev server, Vite was ridiculously fast 😱 with approx `~370ms` against `1.64s` of `vue-cli`

{% vimeo 518003712 %}
 

|             	| vue-cli 	| vite   	| 🏆 	|
|-------------	|---------	|--------	|---	|
| Dev Server  	| ~1.64s  	| **~0.37s**	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)	|

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

{% vimeo 518004688 %}

|             	| vue-cli 	| vite   	| 🏆 	|
|-------------	|---------	|--------	|---	|
| Update      	| ~0.349s 	| **<0.3s**	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)	|

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

{% vimeo 518009739 %}

|             	| vue-cli 	| vite   	| 🏆 	|
|-------------	|---------	|--------	|---	|
| Build       	| ~11.27s 	| **~2.88s**	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)	|

# 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)|
| Dev Server  	| ~1.64s  	| **~0.37s**	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)	|
| Update      	| ~0.349s 	| **<0.3s**	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)	|
| Build       	| ~11.27s 	| **~2.88s**	|   ![vite-small](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67t2af2m19qq30dehm4p.png)	|