Vite — Frontend Tooling
1. What will Vite do?
Vite does 2 things
- Serve your code locally during development
There are many other tools out there to do the same thing such as
- Webpack — https://webpack.js.org/
- Rollup — https://rollupjs.org/guide/en/
- Parcel — https://parceljs.org/
- Snowpack — https://www.snowpack.dev/
2. So what’s different with Vite?
It was created by Evan You who created Vue.js on 2021 as a way to simplify and speed up the build process.
The problem is this process becomes increasingly slow as the app adds more code and dependencies.
In 2015, Ecmascript modules were introduced and by 2020 it had widebrowser support allowing developers to import and export files from multiple files in the browser.
Vite leverages the native ES modules in the browser to load your code instantly no matter how large it is.
It also supports HMR(Hot Module Replacement) for extremely fast feedback loop during development.
When building for production it uses Rollup underthehood.
3. Hot Module Replacement in Vite(HMR)
If you see the below example the state count is having a value 11 and there are 2 logo’s at the top. Now if i remove one of the logo and save the file it will replace that particular part rather than re-rendering the entire component. That’s an simple example of HMR
4. Get Started with Vite
To get started run the following command
npm init vite application-name
which will ask you to choose the framework
It will create a project with vite.config.js in the project folder where you can make the tweaks in the configurations
To serve the application locally run the following command
npm run dev
It runs your application (React) within 387ms.
To build the application for production use the following command
npm run build
which will do the code optimization like code-splitting, Dynamic imports and CSS.
Checkout the Vite Ecosystem post by Patak
The Vite Ecosystem
One of the strongest points in Vite is the ecosystem around it. Vite took responsibilities from frameworks ( common web…
In this Post, we have seen about Vite and how it is different from other bundlers. Will catch you up in a new post till then Happy Learning!!! :)