Vite - next gen build tool

pronounced /vit/

What is the goal?

Above all, Vite wants to ensure a better developer experience. This is achieved through speed and as little config as possible.
Speed -

What makes vite different?

Vite combines two different build tools. The code is divided into dependencies (vendor code) and source code (custom code). The idea is that the dependencies rarely change and the source code often. Vite pre-bundles the dependencies. All modules are converted into ESMs and libraries consisting of many modules are combined into a single module. This pre-bundling is done with esbuild. Esbuild is written in go and is many times faster than JS based bundlers.

©️ esbuild

The source code is delivered by vite as a native ESM. Thus, the bundling is outsourced to the browser.

Since vite does not provide the code bundled but as an ESM, the dev server is ready very quickly. With the traditional bundle-based dev server, all bundles must first be compiled before the dev server is ready:

bundle based
©️ vitejs

In contrast, an ESM based dev server is immediately ready and the browser loads the modules it needs.

esm based
©️ vitejs

Code changes eliminate the need to repeatedly create bundles. Modified modules are exchanged at lightning speed. These advantages make working locally very pleasant.

Little config

As a developer, you want to build cool apps and not deal with hundreds of lines of config. Vite solves this problem by providing a cli. This makes it very easy to create projects with different requirements. Vite supports, for example, Vue, React, Vanilla JS and Typescript. Vite comes with many presets and optimizations. SCSS, JSX etc. just work. No loaders or similar need to be defined. If a PostCSS Config is present, PostCSS will be automatically applied to the stylesheets - It just works!
Of course, little config can have the disadvantage that special adjustments are made more difficult. However, Vite provides a plugin API that can be used to influence the behavior. Incidentally, Vite uses Rollup for handling the source code and creating production bundles. This gives you access to a variety of rollup plugins. The reason for this is that Esbuild does not yet have all the necessary functions.

You can read more at vitejs.dev