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
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
✋🏻 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.
From creating a new vue project via command:
yarn create @vitejs/app <project-name> took only
vue create <project-name>.
When cold-starting the dev server, Vite was ridiculously fast 😱 with approx
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.
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.
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 😄