How to make your life a tad bit simpler by using Vite over Create React App

For browsers, anything that is not HTML, CSS and JS is strange. Fancy tools such as React are aliens. That’s where compilers come in and translate our code to vanilla JS so that our browser knows what’s up.

What is CRA?
CRA is a popular command-line tool used to create and set up React applications. It provides a pre-configured development environment with all the necessary build tools, such as babel and webpack, and dependencies, allowing developers to quickly start building React applications without having to configure the build process manually.

Pros of Create React App:

1. Ease of Setup: CRA abstracts away the complex and time-consuming initial setup process by providing a pre-configured development environment.

2. Development Environment: CRA includes a development server that supports hot module replacement (HMR), which allows developers to see the changes they make in real-time without needing to manually refresh the browser. It also provides helpful error messages and warnings to aid in development.

3. Build and Optimization: Create React App generates optimized production builds that include features like code splitting and minification. This ensures that the final application bundle is lightweight and loads quickly for end-users.

Cons of Create React App:

1. Limited Customization: CRA offers a standardized setup, which means it may not cater to specific project requirements or advanced customization needs. In such cases, ejecting from CRA (which generates the configuration files) may be necessary, but this can make future updates and maintenance more complex.

2. Configuration Constraints: Since CRA abstracts away the build configuration, it may limit the ability to tweak build settings or add custom plugins without ejecting.

3. Poor development process: Webpack crawls and bundles both your application code and your dependencies to deliver your application. When making a change during development time, the entire JS bundle is built again. This makes it very slow to see the changes in the browser, even with HMR allowed.

What is Vite?
Vite is a modern build tool for web applications primarily used with frameworks like Vue.js and React.js. It aims to provide a fast development experience with instant server startup, near real time hot module replacement (HMR), and efficient build times.

Vite achieves this by leveraging browser-native ES module imports and using a highly optimized development server.

Vite is also smart:

It knows that dependencies do not change frequently and so it pre-bundles them with esbuild. This process only runs when our dependencies change.
It transforms the ever-so-changing source code to browser native ESM. It transform and serves source code only for the files that are requested by the browser.

Conclusion – Why Migrate to Vite?
Faster build because of esbuild bundler.
Faster application start time
Instant HMR
While a bundler-based workflow like Webpack will have to process your entire JavaScript modules before a single browser request, Vite only processes your dependency modules before a single browser request.

Further reading here.