Vite

Language: JavaScript

Build Tool / Frontend

Vite was created by Evan You (the creator of Vue.js) to improve the frontend development experience by offering instant server start, fast hot module replacement (HMR), and an optimized build output. It supports frameworks like Vue, React, Svelte, and vanilla JavaScript projects.

Vite is a modern frontend build tool that provides a fast development server and optimized build process for modern web projects. It leverages native ES modules in the browser and bundles with Rollup for production.

Installation

npm: npm create vite@latest

yarn: yarn create vite

pnpm: pnpm create vite

Usage

Vite provides a development server with native ES module support and lightning-fast hot module replacement. For production builds, it uses Rollup to bundle and optimize assets. It supports plugins, TypeScript, JSX, CSS preprocessors, and framework-specific configurations.

Create a new Vite project

# Terminal
npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev

Initializes a new Vite project, installs dependencies, and starts the development server.

Using ES modules

// main.js
import { hello } from './module.js';
hello();

Demonstrates importing a module using native ES module syntax in a Vite project.

React + Vite setup

# Terminal
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

Creates a React project preconfigured with Vite and starts the dev server with fast HMR.

Vite config example

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
});

Configures Vite to use the React plugin and run the dev server on port 3000.

Optimizing production build

npm run build
# Output is in dist/ folder

Generates an optimized production build using Rollup.

Using plugins

// vite.config.js
import vue from '@vitejs/plugin-vue';
export default {
  plugins: [vue()]
};

Demonstrates adding a Vite plugin for Vue support.

Error Handling

Port already in use: Specify a different port in vite.config.js under server.port or close the other process using the port.

Module not found: Ensure file paths are correct and modules are installed via npm/yarn.

HMR not updating: Check that the browser supports ES modules and clear the cache. Ensure the project uses supported frameworks/plugins.

Best Practices

Use ES modules and modern JavaScript syntax for better performance.

Take advantage of Vite's HMR during development for instant feedback.

Use plugins for framework-specific features and optimizations.

Keep configuration minimal; Vite works with zero-config for many projects.

Use environment variables and .env files to manage project settings.

Official Docs Github