Decrease development and build time in React apps using Vite over create-react-app with WebPack.

Let me ask you a quick question. How do you create a react app? The answer would be much simple right. You are going to use create-react-app in order to initiate the app. But what if I say there is a better way of doing that. Better by I mean much faster way. Yeah it’s exists. But before we talk about that let’s touch the surface of react and create-react-app world.

Module bundlers

When it’s comes to the web development there are lot of files/modules in a single project. Rather than include then execute these different files, what we can do is create a single file and provide it to browser, so client’s browser does not has to make lots of requests to download every individual module from the server. This process will improve the performance A development tool called a bundler merges multiple JavaScript code files into a single one.

Popular Module bundlers

• Webpack : Webpack is designed primarily for JavaScript, but if the appropriate loaders are present, it may also transform front-end components including HTML, CSS, and pictures. When given dependencies-containing modules, Webpack creates static assets to represent those modules.

• Parcel : Parcel can handle file kinds like photos and fonts and supports a number of well-known programming languages, including Typescript and SASS. A development server, diagnostics, minification, and even picture compression are included as extra tools with Parcel.

• Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

There are lot of modules our there. These are the most popular bundlers.

How Module bundlers works under the hood

The two stages of a bundler’s process are dependency graph generation and bundling.

1. Mapping dependancy graph/Dependency Resolution : A module bundler creates a relationship map of all the served files as its initial step. The name of this procedure is Dependency Resolution. The bundler needs an entry file to accomplish this, which is idealy your primary file. After that, it analyzes this entry file to determine its dependencies. The dependencies are then traversed to ascertain the dependencies of these dependencies. How tricky! Throughout this process, it gives each file that it encounters a distinct ID. Finally, it extracts every dependency and creates a dependency graph that shows how each file is related to the others.
2. Bundling/Packing : A bundler delivers static assets that the browser may properly process after taking inputs and traversing its dependencies during the Dependency Resolution phase. The packing stage is the output stage. The bundler will use the dependency graph throughout this process to merge our many code files and inject the necessary function and module. exports the object and provides the browser with a single executable package that it can properly load.

Create-react-app uses webpack under the hood. So let’s talk about webpack and why it’s slow compared to something like vite.

Initial problems with frontend modularization and the Node.js ecosystem were addressed by Webpack. The power of webpack has grown over the last eight years. Bundles are a way for Webpack to organize different resources. The effectiveness of the packaging process declines as more resources need to be packaged. However, as the project expands, the building speed slows down as a result of the additional packing procedure. Therefore, each startup requires many minutes (or dozens of seconds), followed by a round of build optimization. As the project expands, the construction speed declines once more, necessitating further optimization, creating an optimization loop.

Bundleless architecture vs Bundle mode

The advantages of bundle-based building optimization diminish and cannot be qualitatively enhanced once the project reaches a certain magnitude. From a different angle, the fundamental cause of Webpack’s inefficiency is the way it bundles diverse resources. By letting the browser load the relevant resources without packaging, we can eliminate the loop and increase the quality. We are not required to construct an entire bundle in the Bundleless architecture. The browser only needs to reload the file when it is modified.

As you can see webpack become slow when the project grows.

Vite implementations to achieve Bundleless local development based on the browser’s ESModule.

ViteJs by Evan You

Vite. js is a quick development tool for contemporary web projects. By enhancing the development process, it puts a strong emphasis on speed and performance. Vite leverages native browser ES imports in place of a build process to provide support for contemporary browsers. With the help of Vite, modern online projects should be able to develop more quickly and efficiently. It is divided into two main sections:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Although Vite is opinionated and has reasonable defaults by default, it is also quite extendable because to its Plugin API and JavaScript API, both of which have complete type support. A build tool called Vite promises to close the gap between present-day and future-proof web development. It focuses on giving developers and contemporary online projects a faster and more effective experience.

esbuild, a JavaScript bundler written in Go that bundles dependencies 10–100 times quicker than JavaScript-based bundlers, is the foundation upon which Vite is built.

Vite and Create React App

It’s not as dissimilar as you might assume between Vite and CRA. They both serve a local development server and package codes for production, which is essentially what they both do. The primary differences you’ll notice are in the supported modules and how code is served during development.

By allowing developers to concentrate on their code rather than setting up build tools, the Create React App development environment aids in the acceleration of the development process.

Magic of Vite

It’s not as dissimilar as you might assume between Vite and CRA. They both serve a local development server and package codes for production, which is essentially what they both do. The primary differences you’ll notice are in the supported modules and how code is served during development.

By allowing developers to concentrate on their code rather than setting up build tools, the Create React App development environment aids in the acceleration of the development process. Vite transforms dependencies that are supplied as CommonJS or UMD into ESM during the pre-bundling process. Because Vite only supports and provides native ESM codes by default, this conversion takes place. For faster page loads, Vite can combine dependencies with several internal modules into a single module.

These modules frequently send out hundreds of requests all at once, which may clog up the browser and slow down load times. However, users only need to send one request because these dependencies have already been pre-bundled into a single file, improving overall efficiency.

By enabling developers to rely on the established Rollup plugin ecosystem, Vite enhances the developer experience. In other words, Vite is ready to use with the majority of Rollup plugins.

We previously described how the size of the application has a substantial negative impact on HMR speed in a bundled-based server.

HMR is applied to native ESM in Vite. A module that accepts hot updates only needs to be accurately invalidated by Vite when changes are made to it. No matter how large the application, this leads to a quicker HMR update time.

Vite creates production-ready apps using pre-configured Rollup. Vite’s build time typically runs faster than that of CRA because Rollup is a more effective bundler than Webpack, and its output is smaller.

Setting up a React project with Vite

npm init vite@latest vite-project --template react

cd vite-project
npm install
npm run dev

As you can see your dev server started instantly. If you want to migrate your current project into Vite you can refer the this link.

Please keep in mind that webpack has a lot of community support when it’s compared to Vite. But Vite is growing really fast and has 2,255,343 download per week. So before you migrate your application please refer the pros and cons of Vite and try to compare it into Webpack and create-react-app.

Pros

• 10–100x faster dev server than Webpack
• Makes code-splitting a priority

Cons

• Can only target modern browsers (ES2015+)
• Not fully compatible with CommonJS modules
• Different dev server vs build tool