Table of contents
No headings in the article.
Like me, most new developers start out with Create React App (CRA) as the CLI tool that they use to create and run their applications. What if I told you that there's an even better CLI tool, namely Vite? Vite was developed by the creator of Vue.js, Evan You, but don't worry it is still used in react. So in this article, I am going to show why I think Vite has an advantage over CRA.
1.Starting off is the fact that Vite is undeniably faster than CRA, how you may ask?
-Unlike a CRA, Vite does not build the entire application before serving. It divides the application modules into two categories: dependencies and source code
i)Dependencies are plain JavaScript that do not change often during development
ii)Source Code often contains non-plain JavaScript that needs transforming, e.g. JSX and CSS, and will be edited very often.
2.Quicker updates
In Vite, Hot Module Replacement (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, this is in contrast to CRA, the dev server runs the bundling in memory so that it only needs to invalidate part of its module graph when a file changes, but it still needs to re-construct the entire bundle and reload the web page. Reconstructing the bundle can be expensive, and reloading the page blows away the current state of the application.CRA supports Hot Module Replacement (HMR). This greatly improves DX - however, in practice, even HMR update speed deteriorates significantly as the size of the application grows.
In Conclusion, the above are a few examples of why vite should be your go to build tool, not yet convinced? give it a try.