There are many blogs which compare Vite and Webpack. But Vite is just a front web application tool which is similar to Create-React-App. Vite is using esbuild and Rollup to bundle resource while CRA is using webpack.

Why Vite

Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of “bundling”: using tools that crawl, process and concatenate our source modules into files that can run in the browser.

Over time we have seen tools like webpack, Rollup and Parcel, which greatly improved the development experience for frontend developers.

Main problems:

  • Slow Server Start: When cold-starting the dev server, a bundler-based build setup has to eagerly crawl and build your entire application before it can be served.

  • Slow Updates: When a file is edited in a bundler-based build setup, it is inefficient to rebuild the whole bundle for an obvious reason: the update speed will degrade linearly with the size of the app.

What Vite provide

Improve Slow Server Start

Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.

  • Dependencies are mostly plain JavaScript that do not change often during development. Vite pre-bundles dependencies using esbuild.

  • Source code often contains non-plain JavaScript that needs transforming (e.g. JSX, CSS or Vue/Svelte components), and will be edited very often. Also, not all source code needs to be loaded at the same time (e.g. with route-based code-splitting). Vite serves source code over native ESM. This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it.

Improve Slow Updates

When a file is edited in a bundler-based build setup, it is inefficient to rebuild the whole bundle for an obvious reason: the update speed will degrade linearly with the size of the app.

Hot Module Replacement (HMR): allowing a module to “hot replace” itself without affecting the rest of the page.

In Vite, 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.