Vite⚡ new lightning-fast frontend tooling
I'm starting to get tired of slow frontend tooling, so today I want to tell you about Vite. Which is responsible for the dev server, Hot Module Replacement (HMR), and building the code - fast as lightning!
The process of developing a website has gotten slower over the years. Over time we have started using several useful features, such as compiling the code to older syntax to support older browsers or files that are written in e.g.
To provide some numbers I have taken the RealWorld example app and implemented a React solution with CRA (which uses webpack) and one with Vite. Note that these timings are only from my machine, but they give a clear indication.
|Template||Init project + npm install||Start||Change||Build|
|Create react app||4min 18s||25s||2s||42s|
Open your terminal and type
npm create vite
Then you can choose between templates: VanillaJS, Vue, React, Preact, Lit, or Svelte - with or without TypeScript. This will set up the project for you.
Note that you have the
index.html file in the root of the folder as an entry for your application. This can be different from what you are used to with other toolings where it is usually in the public folder, and
App.js is the entry point which during the build is magically moved into your HTML file.
package.json file, you have the
npm run dev command which starts the dev server in a few milliseconds. If you make a change to a file and save it, it will be reflected directly in the browser. This is a huge improvement that makes the developer experience awesome.
How it works
Today most tools build your entire code base into a file that can be served. This has to be done with every change, some of it is cached but that can only help to a certain point.
Vite on the other hand uses native ES modules and lets the browser do the work of retrieving the files when they are used. The dev server starts instantly and doesn't do any work until the browser opens the website. Every file that is used will result in a network request, files that are not imported don't have to be processed. Maybe you are thinking that a waterfall of network requests is slow, but in reality, it's almost insignificant since it's reading directly from your locale disk and requests are done in parallel.
When the application is built for production, Vite uses the more traditional approach and bundles the code with Rollup. This is mainly because a waterfall of network requests over the internet isn't as fast.
Even though this is a relatively new and improved developer experience in frontend, it is not certain Vite will be the leading one over time. For example, you have Snowpack which also is a new tool doing mostly the same. Existing tools will probably also take measures to improve their performance.
If your application doesn't have any special needs where webpack is demanded, I will recommend that you try out Vite. To get a quicker developer experience and most of the features and functionality are supported.
Maybe you aren't that bothered by the small time losses you have every day, but when you are used to a quicker everyday life I can promise you won't go back.