vite

What is vite?

Vite is a modern frontend build tool that provides a faster and leaner development experience for modern web projects. It leverages native ES modules and is designed to serve your code via HTTP in development, enabling hot module replacement (HMR) for a fast development cycle, and bundles it for production using Rollup.

What are vite's main functionalities?

Instant Server Start

With Vite, you can start a development server instantly due to its use of native ES modules. Here's a simple command to start the server:

npx vite

Hot Module Replacement (HMR)

Vite provides out-of-the-box support for HMR, which enables you to update code and see changes in real-time without a full page reload. The code sample shows how to use HMR with a Vue application.

import { createApp } from 'vue';
const app = createApp(App);
if (import.meta.hot) {
  import.meta.hot.accept();
}

Optimized Build

For production, Vite uses Rollup to bundle your code. This results in an optimized build that's ready for deployment. The command to create a production build is straightforward.

npx vite build

Plugin System

Vite supports a rich plugin system that allows you to extend its functionality. This code sample demonstrates how to include the official Vue plugin in your Vite configuration.

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

export default defineConfig({
  plugins: [vue()]
});

TypeScript Support

Vite comes with built-in TypeScript support, allowing you to develop your application using TypeScript without additional setup. The command to start a server with TypeScript support is the same as for JavaScript.

npx vite --host

Other packages similar to vite

webpack

Webpack is a powerful module bundler that can transform and bundle various types of assets. It is highly configurable and has a large ecosystem of loaders and plugins. Compared to Vite, webpack has a steeper learning curve and can be slower in development due to its build process.

parcel

Parcel is a zero-configuration web application bundler. It offers a fast development experience and supports a wide range of file types out of the box. Parcel is similar to Vite in terms of ease of use, but Vite's development server is generally faster due to its use of native ES modules.

rollup

Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or application. It is the same bundler that Vite uses for production builds. Rollup focuses on bundling for production and is not optimized for development speed like Vite.

snowpack

Snowpack is a build tool that uses JavaScript's native module system (ESM) for unbundled development. It provides a fast development experience by only rebuilding individual files as they change. Snowpack and Vite share similar philosophies, but Vite offers a more integrated experience with features like HMR and pre-configured plugins.

README

vite ⚡

Next Generation Frontend Tooling

• 💡 Instant Server Start
• ⚡️ Lightning Fast HMR
• 🛠️ Rich Features
• 📦 Optimized Build
• 🔩 Universal Plugin Interface
• 🔑 Fully Typed APIs

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.