Vite — Cheat Sheet

Tag: vite, frontend, bundler, esbuild, rollup, dev-server

Livello: intermedio

TL;DR: Build tool frontend ultra-veloce che usa ESM nativi nel browser durante lo sviluppo e Rollup per ottimizzare la build di produzione.

Concetti chiave

-

Sfrutta gli ES Modules (ESM) nativi del browser per servire i file senza effettuare un bundle iniziale in dev.

-

Usa esbuild per il pre-bundling delle dipendenze in node_modules, ottenendo tempi di avvio quasi istantanei.

-

L'Hot Module Replacement (HMR) è fulmineo e indipendente dalla dimensione totale dell'applicazione.

-

Per la produzione, impacchetta l'app tramite Rollup, garantendo tree-shaking efficace e codice altamente ottimizzato.

-

Supporta nativamente TypeScript, JSX, CSS Modules e JSON senza richiedere configurazioni iniziali complesse.

-

Il sistema di plugin estende l'interfaccia dei plugin di Rollup, mantenendo alta compatibilità con l'ecosistema.

-

Il file principale per le impostazioni è vite.config.ts (o .js), posizionato nella root del progetto.

Domande tipiche e risposte pronte

-

Q: Qual è la differenza principale tra Webpack e Vite?R: Webpack esegue il bundle di tutta l'app prima di servire la pagina. Vite serve i file come ESM nativi e li processa on-demand, rendendo l'avvio istantaneo.

-

Q: Perché Vite usa sia esbuild che Rollup?R: Usa esbuild in dev per la velocità estrema nel pre-bundling. Usa Rollup in produzione perché è più maturo e flessibile per l'ottimizzazione del bundle e il code splitting.

-

Q: Come vengono gestite le variabili d'ambiente?R: Legge i file .env. Le variabili devono iniziare con VITE_ per essere iniettate nel client e si leggono tramite import.meta.env.

Insidie e errori comuni

-

Dimenticare il prefisso VITE_ per le variabili d'ambiente custom, che di conseguenza non saranno esposte lato client.

-

Aspettarsi il type checking attivo durante lo sviluppo. Vite transpila TypeScript, ma non fa controlli (necessita di tsc --noEmit).

-

Usare percorsi assoluti nel filesystem invece dei percorsi relativi alla root del progetto durante l'importazione di asset statici.

Snippet e comandi

# Inizializzare un nuovo progetto con template React/TypeScript
npm create vite@latest my-app -- --template react-ts

# Avviare il dev server
npm run dev

# Compilare per la produzione e testare la build localmente
npm run build
npm run preview

TypeScript

// Esempio base di vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})
Jarvis Interviews
Jarvis