How does Vite simplify development?

SvelteKit, and features such as HMR, wouldn’t be possible without Vite, which itself wouldn’t be possible without Rollup and esbuild. Vite differentiates itself from other bundling tools by providing a lightning-fast development server that leverages native ECMAScript Module (ESM) availability in modern web browsers. Vite accomplishes this by breaking application code into two parts – dependencies and source code.

Dependencies

Vite can provide a fast development server by pre-bundling each dependency from a project into its own ES module with esbuild. Whether those dependencies are in CommonJS, Universal Module Definition (UMD), or ESM formats is irrelevant to Vite, as it will convert them all to ESM on the initial application build. Doing this means the browser only has to make a single HTTP request for each dependency instead of a request for each import statement. This can greatly improve the performance of the development server, especially considering how quickly requests can add up in dependency-heavy applications.

Source code

Unlike dependencies, source code changes often during development. To keep the developers (you) of this source code happy, Vite utilizes a couple of clever approaches. Because modern browsers support native ES modules, Vite can offload the work of bundling to the browser and only needs to transform the source code into a native ES module before serving it to the browser. The appropriate source code is then only loaded by the browser when necessary – that is, if it is used on the currently displayed screen.

To avoid the inefficiency of re-bundling an entire application each time the source code changes, Vite supports HMR. Essentially, HMR is the practice of replacing only the ES module that was changed. This keeps the development server fast, whether the application consists of a single page or thousands.

So far, we’ve discussed Vite and its usage of esbuild, but how does Rollup fit in with it all? Vite utilizes Rollup during the build process – that is, instead of shipping the source code as is, our Svelte components are transformed into pure JS, which is then easily read by browsers. Rollup manages the potentially thousands of modules included in a project with features such as tree-shaking (only including parts of modules that are used), code splitting (breaking code up into chunks), and lazy loading (only loading resources when they are needed). The usage of these features leads to smaller, and therefore, better-performing web applications.