Recently, I discovered in my workspace that everyone or most people only know about create-react-app to get the bundle & build dependency ready.
But, I think there’s another way around too.
1. Speed
Vite uses esbuild bundle which is written in Go - a fast, multithreaded language compiled to machine code - which makes it faster than CRA
whereas
CRA uses webpack which is written in JS - interpreted & single-threaded language, which makes it slower.
2. Support for frameworks
CRA limits itself only to React
Meanwhile
Vite - it can be used for React, Vue, Svelte & more.
3. Approach
CRA - builds on every save and when all bundle up together to build - it gets the server ready
Whereas
Vite - starts the server right away ( takes the dependencies that don’t change often and pre-bundles them using ESBuild. It uses route-based code splitting.
4. Native ES support
Vite has native ES support which is not present in CRA.
5. Multi-Page Support
Vite provides Multi-Page Support frictionlessly which is not present in CRA.
6.Production
Vite is built for production which means you need to make changes in vite.config.js Meanwhile CRA minifies and abstracts the build configuration ( not suggested for the complex project )
7. Automatic CSS Code Splitting
Vite loads required CSS for specific chunks and pages meanwhile CRA doesn’t have that functionality
8. Optimised Async Chunk Loading
Vite - as a chunk parsed on the browser, it automatically checks parallels for other chunks and sends required chunks and other dependencies that can eliminate network round trip Whereas CRA - It uses to go with every chunk present
and then runs all the chunks after that it checks if another chunk is required and then re-runs everything again from the server which makes it slower
9. Dynamic Import Polyfill
It is present in Vite as it fills the gap on the browser for ES Support until its fixed
10. HMR Hot Module Replacement
HMR makes Vite faster regardless of the size
11. Fully Types API
Vite APIs are fully typed, as it is recommended to use TypeScript or enable JS type check to leverage the intellisense and validation in VS Code.
Hope you learned something. Thank you for reading.
Follow - Shivani Yadav