3 min read

Vite JS - Created to perform

Author

Josip Blažević

Date

Oct 13, 2022

Why Vite?

The Problems

Currently, JavaScript-based tooling is starting to hit performance bottleneck. It often takes an unreasonably long wait time to start the dev server and the file edits with HMR can take few seconds to reflect in the browser.
Vite addresses those issues using advancements in the ecosystem: availability of native ES modules in the browser and the rise of JavaScript tools written in compile-to-native languages.

Slow Server Start

When starting the dev server, a bundler-based build setup eagerly crawls and builds the entire application before it can be used.
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 files and large dependencies.
• Source code contains files which need transforming and will be edited very often.

Vite pre-bundles dependencies using esbuild. esbuild performs 10-100x faster than JavaScript-based bundlers.

Vite serves source code over native ESM. This lets the browser take over part of the bundler's job: Vite only needs to transform and serve source code on demand, as the browser requests it. Conditional dynamic imports are only processed if they are needed on the current screen.

Slow Updates

Bundler-based build setup is inefficient in rebuilding the whole bundle for obvious reasons, thus update speed will linearly degrade with the size of the app.

HMR in Vite is performed over native ESM. When a file is edited, Vite only needs to invalidate the module itself, making HMR updates consistently fast regardless of the size of your application.

Vite allows browsers to do more for us with HTTP headers with 304 Not Modified header and Cache-Control: max-age=31536000,immutable so the requests don't hit the server again once cached.

Find out more on Why Vite.

Features

There are many features which Vite provides, but instead of covering all of them in detail, I will cover only the most interesting.

TypeScript

Vite supports TypeScript files out of the box. The files are transpiled, but type-checking is left to be taken care of by the IDE and build process.
Vite uses esbuild to transpile TypeScript into JavaScript which is about 20~30x faster than vanilla tsc. HMR updates can reflect in the browser in under 50ms.

Client Types

Vite's default types are for its Node.js API. To shim the environment of client-side code in a Vite application, add a d.ts declaration file:

/// <reference types="vite/client" />

CSS

Css file import injects its content to the page via <style> tag with HMR support. Processed CSS can be retrieved as a string as the module's default export.

• Vite supports CSS @import inlining via postcss-import.
• If the project contains valid PostCSS config, it will be automatically applied to all imported CSS.
• Any CSS file ending with .module.css is considered a CSS modules file.
• Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them but the corresponding pre-processor itself must be installed.

Other Features

• Dependencies are Strongly Cached
• HMR API for configuring HMR
• First-class Vue support
• JSX transpilation is handled via esbuild
• Importing a static asset will return the resolved public URL when it is served, with additional query support
• JSON files can be directly imported, named imports are supported
• Multiple module import from the file system
• Dynamic import with variables
• Web Worker import with constructors and suffixes
• CSS Code Splitting
• Preload Directives Generation
• Async Chunk Loading Optimization

Find more about the features on Features site.

Plugins

Vite can be extended using plugins, which are based on Rollup's plugin interface with a few extra Vite-specific options. Plugins need to be added to devDependencies of package.json and included in the plugins array in the vite.config.js. An example is presented bellow:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react({
			jsxImportSource: '@emotion/react',
			babel: {
				plugins: ['@emotion/babel-plugin'],
			},
		}),
	],
});

My experience with Vite

Until now I have tried out Vite in a relatively short project with React and TypeScript and I was left amazed by the performance of Vite.
Starting the development server on my mid-range laptop CPU takes around 1 second.
HMR gave me a "blink and you will miss the content refresh" feeling after the save.

In this short project I didn't encounter any additional difficulties with Vite compared to the Create React App project which makes Vite a great alternative to CRA for me.