Vite Cheatsheet

---

---

This Vite cheatsheet provides a quick reference to key features such as installation, core commands, optimization, configuration, debugging tools, plugins, SSR, and asset handling, with practical code examples for each feature. It helps developers efficiently set up and manage fast front-end projects.

Table of Contents

1. Introduction to Vite
2. Installation and Initialization
3. Core Commands
4. Optimization and Build Features
5. Configuration and Environment Settings
6. Experimental Features
7. Specialized App Creation
8. Debugging and Development Tools
9. Plugin System
10. HMR (Hot Module Replacement)
11. Aliases
12. SSR (Server-Side Rendering)
13. Asset Handling
14. Framework-Specific Integrations

1. Introduction to Vite

Vite is an ultra-fast standard build tool for frontend-based workflows. It has a very fast dev server with HMR and small build sizes. It supports libraries such as React, Vue, and Svelte, the overall goal of most is progressive developer experience and performance in mind.

2. Installation and Initialization

Install Vite and initialize a new project using framework-specific commands.

Initialize Project: Create a new Vite project using the CLI.

vite init

Create Project: Specify a framework template while creating a project.

vite create

Install Vite: For manual installation in an existing project.

npm create vite@latest my-app

3. Core Commands

Vite provides essential commands for development, building, and previewing projects.

Command	Description
vite dev	Start the development server with HMR enabled.
vite build	Build production-ready code with optimized output.
vite preview	Serve the production build for testing.
vite --help	Display all available Vite commands.

4. Optimization and Build Features

Vite optimizes builds by minifying, tree-shaking, and generating source maps.

Command	Description
vite optimize --minify	Minify production code for faster load times.
vite optimize --css	Optimize CSS for performance improvements.
vite optimize --sourcemap	Generate source maps for debugging production code.

5. Configuration and Environment Settings

Vite allows configuration through environment variables and a custom config file.

Command	Description
vite config	Edit or modify the Vite configuration file.
vite env	Display environment variables used by Vite.
vite --mode	Set mode (e.g., development, production) for builds.

6. Experimental Features

Vite supports cutting-edge features like WebAssembly and Rollup integration.

Feature	Description
vite --experimental-rollup	Enable experimental Rollup features.
vite --experimental-babel	Enable Babel support for transpiring code.
vite --experimental-web-assembly	Add support for WebAssembly modules.

7. Specialized App Creation

Quickly scaffold applications using Vite for different frameworks.

Command	Description
vite create-react-app	Create a new React project with Vite.
vite create-vue-app	Initialize a Vue.js project using Vite.
vite create-svelte-app	Set up a Svelte application with Vite.

8. Debugging and Development Tools

Vite provides debugging tools to inspect dependencies and troubleshoot issues.

Command	Description
vite --debug	Enable debug mode for more detailed logs.
vite inspect	Inspect and analyze project dependencies.
vite --silent	Suppress logs during development.

9. Plugin System

Extend Vite's functionality by using or creating plugins.

import { defineConfig } from 'vite';
import myPlugin from './my-plugin';

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

10. HMR (Hot Module Replacement)

Vite automatically updates modules in the browser during development. No additional setup is required.

11. Aliases

Vite allows defining custom aliases for simpler imports. This improves code readability and makes managing file paths more convenient.

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
      '~components': '/src/components'
    },
  },
});

12. SSR (Server-Side Rendering)

Vite supports SSR for frameworks like Vue and React. It enables server-side pre-rendering for better performance and SEO optimization.

import { createServer } from 'vite';

const server = await createServer({
  server: { middlewareMode: 'ssr' }
});

13. Asset Handling

Vite provides efficient asset handling for static files like images and fonts. It ensures assets are optimized and correctly referenced in the final build.

import logo from './assets/logo.png';

const img = new Image();
img.src = logo;
document.body.appendChild(img);

14. Framework-Specific Integrations

Vite has built-in support for React, Vue, Svelte, and other frameworks. It provides optimized configurations for seamless front-end development.

# React
npm create vite@latest my-app --template react

# Vue
npm create vite@latest my-app --template vue

# Svelte
npm create vite@latest my-app --template svelte