Vite Cheat Sheet

#Core Concepts

Vite adalah build tool modern yang pakai native ES modules saat development dan Rollup untuk production build. Development server start hampir instan karena gak perlu bundle dulu. Berikut konsep inti yang perlu kamu pahami.

Concept	Description
Dev Server	Serve modules on-demand via native ESM
HMR	Hot Module Replacement, update module tanpa full reload
Build	Production bundle dengan Rollup
Plugin	Extension yang hook ke Vite build pipeline
Optimize Deps	Pre-bundle dependencies pakai esbuild

#Project Setup

Bikin project Vite baru dengan template yang sesuai.

bash

# Bikin project baru (interactive)
npm create vite@latest my-app
 
# Dengan template spesifik
npm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template vue-ts
npm create vite@latest my-app -- --template vanilla-ts
npm create vite@latest my-app -- --template svelte-ts
 
# Templates yang tersedia:
#   vanilla, vanilla-ts
#   vue, vue-ts

#vite.config.ts

File konfigurasi utama Vite. Semua pengaturan dev server, build, dan plugins ada di sini.

typescript

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

#Conditional Config

Kamu bisa return function dari defineConfig untuk konfigurasi yang berbeda antara dev dan build.

typescript

import { defineConfig } from 'vite';
 
export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    // Dev server config
    return {
      server: {

Variable	Description
`command`	`serve` saat dev, `build` saat build
`mode`	`development`, `production`, atau custom
`isSsrBuild`	`true` saat SSR build
`isPreview`	`true` saat preview command

#Plugins

Plugin extend kemampuan Vite. Beberapa plugin populer:

typescript

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

Plugin	Description
`@vitejs/plugin-react`	Fast Refresh untuk React
`@vitejs/plugin-vue`	Vue SFC support
`@tailwindcss/vite`	Tailwind CSS v4 integration
`vite-plugin-pwa`	Service Worker dan PWA
`vite-plugin-compression`	Gzip dan Brotli output
`rollup-plugin-visualizer`	Visualisasi bundle size
`vite-plugin-mkcert`	Local HTTPS certificate
`vite-plugin-svg-icons`	SVG sprite dari folder

#Dev Server dan HMR

Dev server Vite sangat cepat karena pakai native ESM. HMR update module secara targeted tanpa reload halaman.

typescript

// vite.config.ts
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    host: '0.0.0.0', // expose ke network
    https: true,     // HTTPS di dev
    strictPort: true

#HMR API

Komponen bisa accept HMR updates untuk hot reload yang targeted.

typescript

// React component dengan HMR (via @vitejs/plugin-react sudah otomatis)
import { useEffect } from 'react';
 
// Vanilla JS HMR
export function setupCounter(element: HTMLButtonElement) {
  let counter =

#Proxy

Proxy berguna untuk avoid CORS issues saat development. Request ke API di-forward ke backend server.

typescript

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      // String shorthand
      '/api': 'http://localhost:8080',
 
      // Dengan options
      '/api': {
        target: 'http://localhost:8080'

Option	Description
`target`	URL backend tujuan
`changeOrigin`	Ubah Host header ke target URL
`rewrite`	Modify path sebelum forward
`ws`	Enable WebSocket proxying
`secure`	Verify SSL certificate target
`bypass`	Function untuk skip proxy

#Environment Variables

Vite expose environment variables via import.meta.env. Hanya variables dengan prefix VITE_ yang di-expose ke client.

bash

# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
 
# .env.development
VITE_API_URL=http://localhost:8080
 
# .env.production
VITE_API_URL=https://api.example.com
 
# .env.staging
VITE_API_URL=https://staging-api.example.com

typescript

// Akses di code
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_TITLE);
 
// TypeScript type safety
// src/vite-env.d.ts
/// <reference types

Variable	Description
`import.meta.env.MODE`	Mode saat ini (`development`, `production`)
`import.meta.env.BASE_URL`	Base URL public saat deploy
`import.meta.env.PROD`	`true` saat production
`import.meta.env.DEV`	`true` saat development
`import.meta.env.SSR`	`true` saat server-side build
`import.meta.env.VITE_*`	Custom env variables

File	Kapan dipakai
`.env`	Selalu dimuat
`.env.local`	Selalu dimuat, di-ignore git
`.env.[mode]`	Hanya saat mode match
`.env.[mode].local`	Mode-specific, di-ignore git

#Build Optimization

Vite pakai Rollup untuk production build. Berbagai strategi optimasi tersedia.

typescript

// vite.config.ts
export default defineConfig({
  build: {
    target: 'es2020',        // Target browser JS
    outDir:

Strategy	Description
Manual Chunks	Pisahkan vendor code ke file terpisah
Code Splitting	Lazy load routes dengan dynamic import
Asset Inline	Inline asset kecil sebagai base64
CSS Split	Pisahkan CSS per chunk
Minify	esbuild (cepat) atau terser (lebih agresif)

#Dynamic Import untuk Code Splitting

typescript

// Lazy load route
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
 
// Prefetch saat idle
const button = document.querySelector('#load-chart');
button?.addEventListener(

#Dependency Pre-bundling

Vite pre-bundle dependencies pakai esbuild untuk konversi CJS ke ESM dan reduce number of requests.

typescript

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'date-fns'],
    exclude: ['my-local-package'],
    esbuildOptions: {
      target: 'es2020',
      define: {
        global: 'globalThis',
      },

Option	Description
`include`	Force pre-bundle dependency
`exclude`	Exclude dari pre-bundling
`entries`	Custom entry points untuk scanning

#Library Mode

Vite bisa build library yang publishable ke npm. Output bisa ESM, CJS, atau UMD.

typescript

// vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
 
export default defineConfig({

jsonc

// package.json untuk library
{
  "name": "my-lib",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/my-lib.cjs.js",
  "module": "./dist/my-lib.es.js",
  "types":

#SSR (Server-Side Rendering)

Vite punya built-in middleware untuk SSR development.

typescript

// vite.config.ts
export default defineConfig({
  server: {
    ssr: {
      external: ['express'], // Pakai saat SSR
    },
  },
  ssr: {

SSR Concept	Description
`vite.ssrLoadModule()`	Load module untuk SSR di dev
`vite.transformIndexHtml()`	Transform HTML dengan HMR client
`ssr.external`	Pakai versi Node untuk lib ini
`ssr.noExternal`	Bundle lib ini untuk SSR

#Plugin API

Kamu bisa bikin plugin Vite sendiri. Plugin punya hooks untuk berbagai tahap build.

typescript

import type { Plugin, PluginOption } from 'vite';
 
function myPlugin(options: {

Hook	Description
`config`	Modify atau extend Vite config
`configResolved`	Akses final resolved config
`buildStart`	Dipanggil saat build mulai
`transform`	Transform source code per file
`transformIndexHtml`	Modify HTML entry
`configureServer`	Custom dev server logic
`load`	Resolve dan load module
`resolveId`	Custom module resolution
`buildEnd`	Dipanggil saat build selesai

#CSS Support

Vite support CSS modules, preprocessor, dan PostCSS out of the box.

typescript

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      // Generate class names
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      localsConvention: 'camelCase',
    },
    preprocessorOptions: {
      scss: {
        additionalData:

typescript

// CSS Modules
import styles from './button.module.css';
 
export function Button() {
  return `<button class="${styles.btn}">Click</button>`;
}

#Static Assets

typescript

// Import asset sebagai URL
import imgUrl from './assets/logo.png';
// imgUrl => '/assets/logo.2h3k4j.png'
 
// Import asset sebagai string
import svgString from './icon.svg?raw';
 
// Import sebagai Web Worker
import MyWorker from './worker?worker';
const

#TypeScript Support

Vite gak melakukan type checking saat build. Pakai tsc atau vue-tsc secara terpisah.

jsonc

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit"
  }
}

jsonc

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],

#Glossary

Term	Definition
Base URL	Path prefix untuk public assets
Chunk	Bagian dari bundle output
Code Splitting	Memecah bundle ke lazy-loaded chunks
Dependency Pre-bundling	Pre-process node_modules dengan esbuild
HMR	Hot Module Replacement, update tanpa full reload
Library Mode	Build output sebagai library yang publishable
Manual Chunks	Custom split vendor code ke file terpisah
Optimize Deps	Pre-bundling dependencies untuk dev cepat
Plugin	Extension yang hook ke build pipeline
Rollup	Bundler yang dipakai untuk production build
SSR	Server-Side Rendering
Transform	Hook untuk modify source code per file
VITE_	Prefix untuk env variables yang di-expose ke client

Happy coding dengan Vite! ⚡

Vite Cheat Sheet

Baca Cheat Sheet Lengkap

Vite Cheat Sheet

Baca Cheat Sheet Lengkap

#Core Concepts

#Project Setup

#vite.config.ts

#Conditional Config

#Plugins

#Dev Server dan HMR

#HMR API

#Proxy

#Environment Variables

#Build Optimization

#Dynamic Import untuk Code Splitting

#Dependency Pre-bundling

#Library Mode

#SSR (Server-Side Rendering)

#Plugin API

#CSS Support

#Static Assets

#TypeScript Support

#Glossary