I shifted to Vite from CRA for development. Here is Why
It is a wonderful time to learn React. With so many updates happening to the incredible language and very small learning curve, it is like Legoland for building web apps.
TypeScript is Love
Most of the projects now use TypeScript these days which allows you to write cleaner code with types. To put it simply, TS takes the surprises out of the code. One look at the code and you know exactly what values are being passed around.
The TS is then converted to JS because the browser is not able to understand TS as it’s more like a developer-friendly thing. The browser is smart enough to understand JS with all its weird loopholes though.
Why Bundle Bro?
And then we have bundling via popular bundlers like Webpack which make the process easier. It is necessary to understand what bundling essentially does.
Say you have two js files — file1.js and file2.js and suppose file1.js imports file2.js. Without bundling, the browser will make two separate HTTP requests for these files. If we use a bundler, these files are combined into a single huge file and downloaded in a single HTTP request. This practice has essentially made technologies like React possible because of the huge number of JS files they have.
CRA or Create React App is a tool by the React Team that has the bundler with it. You might have noticed during development that the changes are reflected instantly when you make changes to the code. Something that they call hot reloading. Behind the scenes, each time you make changes during development, the TS files are transpiled to JS and the bundler bundles them into a single file and then changes are reflected in the browser.
So life is good. Why change then? Well not quite. With the increasing complexities in the project, there are a huge number of files in the project these days and the bundler has to do an awful lot of tasks to reflect changes in the browser. This makes the development experience very slow. Hot Reloading ain’t so hot anymore.
So where does Vite come in then?
Remember how we discussed bundling and without bundling things? Well, Vite brings the — without bundling thing into the picture back again. What the hell man? Yes. Recently modern browsers got updated with native ESM or native ECMAScript modules which is nothing but a fancy way of saying that the browser allows you to run the JS module files directly instead of bundling them.
Vite supports native ESM out of the box and hence speeds up development time rapidly. Since it supports native ESM, it can detect exactly which file has changed and make a delta update of that particular file only. So where the CRA bundles everything for every change, Vite just reloads what is changed.
Another problem that Vite solves is persisting state values while reloading. React is a box of states here and there. Every time you make an update to a file during development, the file reloads, and the state values are reset. Since Vite only reloads part of the application that has changed, you will be able to keep your unchanged components in the state they were.
But doesn’t that mean Vite will be slow in production?
Well not quite. Vite is more like a development tool for now. When pushing your code to production it still uses a bundler called Rollup and does all the fancy things like minification, code splitting, etc to create an optimized build.
And if you are still not convinced, here is what Google has to say about Vite’s performance —
Check it out. Here is a boilerplate that has Vite with the basic setups in it — https://github.com/visakhvjn/boilerplate-react-vite
