Frontend Academy · Lezione

Vite: sistema di plugin e modalità SSR

Scrivere un plugin Vite con gli hook transform e load, integrare plugin di terze parti e configurare Vite per il rendering lato server con l’opzione ssrBuild

Vite: sistema di plugin e modalità SSR è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché Vite ha prevalso

Vite (in francese «veloce») è stato creato da Evan You. In sviluppo serve i file sorgente senza bundling tramite moduli ES nativi, con avvii a freddo istantanei. In produzione usa Rollup per il bundling. L'esperienza di sviluppo è nettamente più rapida di quella di Webpack.

Come funziona il dev server di Vite

I browser moderni supportano nativamente i moduli ES. Vite serve i file sorgente così come sono, trasformando TypeScript/JSX su richiesta. Niente bundling significa nessuna attesa durante gli avvii a freddo.

Hot Module Replacement

L'HMR sostituisce i moduli senza ricaricare la pagina. L'HMR di Vite si basa su ESM ed è molto più veloce di quello di Webpack. La maggior parte dei framework (React, Vue, Svelte) si integra con esso per aggiornare i componenti conservando lo stato.

Nozioni di base sulla configurazione di Vite

Configuri Vite tramite vite.config.ts nella radice del progetto.

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

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

Il sistema dei plugin

I plugin di Vite estendono quelli di Rollup, aggiungendo hook per il dev server. Un plugin è un oggetto, oppure una funzione che ne restituisce uno, con hook denominati.

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

Hook principali

transform(code, id): modifica il contenuto del file (ad esempio, compila MDX o inietta variabili d'ambiente). load(id): fornisce contenuti per i moduli virtuali. resolveId(source): personalizza la risoluzione dei moduli. configureServer(server): aggiunge middleware al dev server.

Plugin più diffusi

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (importa file SVG come componenti). vite-plugin-checker (TypeScript / ESLint nell'overlay). vite-plugin-mkcert (HTTPS locale).

Modalità SSR di Vite

Vite supporta il rendering lato server tramite primitive di basso livello. Framework come Nuxt, SvelteKit, Remix e Astro si basano su queste funzionalità. Per un SSR personalizzato, segua la guida SSR di Vite.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

Build per SSR

Servono due build: client e server. vite build --ssr entry-server.ts produce il bundle del server.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

Variabili d'ambiente

import.meta.env.MODE è 'development' o 'production'. Le variabili personalizzate con prefisso VITE_ vengono esposte.

Gestione del CSS

Vite gestisce CSS, CSS Modules (foo.module.css), PostCSS (rileva automaticamente postcss.config.js) e preprocessori CSS (Sass, Less, Stylus) senza configurazione aggiuntiva. Inietti il CSS critico tramite plugin.

Vite, Webpack e Turbopack a confronto

Vite: sviluppo nativo ESM, build con Rollup ed ecosistema ampio. Webpack: grande strumento legacy, più configurabile ma più lento. Turbopack (Vercel): basato su Rust, compatibile con Webpack e attualmente incluso in Next. Per i nuovi progetti: Vite per le SPA, Next/Turbopack per quelli specifici di Next.

Verifica rapida

Perché l'avvio a freddo del dev server di Vite è molto più rapido di quello di Webpack?

Riepilogo: Vite

Dev server basato su ESM: avvio a freddo istantaneo e HMR rapido. In produzione usa Rollup. I plugin estendono gli hook di Rollup (transform, load, resolveId) e aggiungono hook specifici di Vite (configureServer, handleHotUpdate). Modalità SSR tramite createServer + middlewareMode; esegua il build con --ssr. Plugin per PWA, MDX, SVGR e mkcert. Usi import.meta.env per le variabili d'ambiente. CSS Modules, PostCSS e preprocessori sono integrati.

Domande Frequenti

La lezione «Vite: sistema di plugin e modalità SSR» è gratuita?

Sì — il testo completo di «Vite: sistema di plugin e modalità SSR» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Vite: sistema di plugin e modalità SSR»?

Scrivere un plugin Vite con gli hook transform e load, integrare plugin di terze parti e configurare Vite per il rendering lato server con l’opzione ssrBuild Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Vite: sistema di plugin e modalità SSR»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy