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

 Dev server

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

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.

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.

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 😄