Hi folks,
It's been a long time since I wrote anything technical, but I encountered an interesting thing today while tinkering around.
I was trying to make a react project from scratch, So I asked ChatGPT that I have a project setup with npm init cofiguration. now I want to add basic building blocks of React and make it a React app.
It gave me a step-by-step solution to install a few libraries. These are as given below,
React
React-DOM
@babel/core
@babel/preset-env
@babel/preset-react
babel-loader
webpack
webpack-cli
webpack-dev-server
Now it told me to make 2 configuration files, one for Babel and another for Webpack. I did that and it told me to create a dist folder and add index.html and src folder with index.js and App.js
Now everything worked with minor chatgpt hallucination but it worked out.
However, it led me thinking that a few days ago I created a project with Vite. So I opened that and I checked the package.json . I saw the stark difference.
package.json of two projects, react from scratch on the left and vite on the right
On the left, if you look there are 9 packages to run the hello-world react app. Whereas, on the right, if you look carefully, to compile the app, only 4 packages are needed.
React
React-DOM
Vite
@vitejs/plugin-react
All other packages are for lining and types. So I was curious how vite is able to compile and bundle without the babel and webpack.
To find this answer I asked chatgpt as well as I visited vite website. There is a section called why vite? on the homepage of vite. This tells us the reason how things work in frontend tooling nowadays.
The availability of ES modules in modern browsers is one of the reasons for this.
Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of "bundling": using tools that crawl, process and concatenate our source modules into files that can run in the browser.
Vite leverage from the ES module, It doesn't need to bundle or transpile the code before showing you. you can read below in their own words
Vite aims to address these issues by leveraging new advancements in the ecosystem: the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages.
Another thing is that vite uses HMR or hot module reloading. vite servers ESM directly so it can update modules instantly without needing a full page to reload.
In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application.
These were two main factors for the faster building time of vite. You can check others by visiting here:
Btw a fun fact for you,Ques: do you know why vite uses 5173 as its default port?
Ans:Because it can be spelt as VITE 🤯. if you try to read 5173 as English letters, you might get till SITE as 5 = S, 1 = I, and so on, however, If you think of 5 as a Roman numeral, 5 = V Hence, VITE.
Thanks for reading, see you next time :)