Vite.js

So what is the new tool that is the new hot topic now days?

Let’s talk about Vite.js.

https://vitejs.dev/

Vite came from the French language and translate to quickly and in this article you will see why.

Vite.js is the new bundling tool that threatening the most popular bundling tool that a lot of front-end developers use and it’s of course Webpack.

Vite developed by the Vue.js creator Evan You (Don’t worry you can use it also both react and angular) and it come to solve what we are all the front-end developers want — make apps that build faster (both local machines and production environment).

So how does it work?

Vite uses pre-configured, extendable wrapper for two JavaScript module bundlers:

• ‘esbuild’ for local development environment.
• ‘rollup’ for production build.

‘Esbuild’ provides builds using ES modules, but it’s officially not yet production-ready. That’s why rollup, a slower but more mature tool creates the production bundle. This approach provides a great developer experience combined with a stable, optimized production build. One drawback is a potential inconsistency between both tools. However, Vite considers removing rollup as soon as esbuild becomes stable enough.

So how fast is Vite really? Here’s my experience for the default starter react projects:

+-----------+--------------------+---------------+
|   *****   |            CRA     |     Vite      |
+-----------+--------------------+---------------+
| Version             |  4.0.3   |     2.2.3     |
| dependencies        |  3681    |     76        |
| Size                |  154 MB  |     38MB      |
| rm -rf node_modules |  90s     |     5s        |
| npm start           |  8.5s    |     1s        |
+-----------+--------------------+---------------+

Take in consider that CRA provides a lot of out of the box dependencies like ‘Babel’ etc.. But in this comparison table you can see how much Vite is lite and fast!

So how I can start using it?!

Get Yadin Yafe’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

It’s very easy, all you have to do in your new project is to run this:

npm init vite@latest

Vite is also support a bunch of pre-defined templates like:

• vanilla
• vanilla-ts
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit
• lit-ts
• svelte
• svelte-ts

And if you want to start you project with those options all you have to is:

npm init vite@latest my-react-app — template react

Changes that need to be made in package.json:

• Remove what CRA or other templates adding to your package.json

"scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite"
,
+    "build": "vite build"
   }

File structure:

├── index.html 
├── package.json 
├── src
├      ├── App.css
├      ├── App.jsx
├      ├── favicon.svg
├      ├── index.css
├      ├── logo.svg
├      └── main.jsx
└── vite.config.js

This is just a quick explanation of what Vite is and what his power can be. and I hope you will read more in their docs and manage to use it in your new project.

Enjoy :)