Usi ancora create-react-app per impostare il tuo progetto React? Passa a Vite per prestazioni migliori e maggiore velocità di sviluppo.

Quando si avvia un nuovo progetto React, molti sviluppatori si rivolgono a creare-reagire-app come strumento di comando di riferimento per l'impostazione e la configurazione del progetto. Tuttavia, Vite è un'alternativa migliore. Offre tempi di sviluppo più rapidi e prestazioni migliori.

Cos'è Vite?

Vite è uno strumento di compilazione e un server di sviluppo progettato per migliorare il processo di sviluppo delle moderne applicazioni web. Lo fa dividendo i moduli dell'applicazione in dipendenze e codice sorgente. Le dipendenze sono moduli che non cambiano spesso, mentre il codice sorgente viene in genere modificato frequentemente durante lo sviluppo.

Vite utilizza esbuild, un bundler basato su Go che è significativamente più veloce dei tradizionali bundler basati su JavaScript per accelerare il processo di creazione del codice sorgente. Inoltre pre-raggruppa le dipendenze della tua applicazione e serve il codice sorgente su ESM nativo, consentendo ai browser di ottimizzare il caricamento dei moduli per un'applicazione più efficiente e veloce prestazione. Quando arriva il momento di distribuire la tua applicazione in produzione, Vite dispone di un comando build integrato che ottimizza automaticamente la tua app per la distribuzione, assicurando che la tua applicazione funzioni senza problemi.

instagram viewer

Creazione di un progetto Vite

Prima di creare un progetto Vite, tieni presente che Vite richiede Node.js versione 14.18+ o 16+. Puoi fare riferimento a questi articoli per installare Node sul tuo computer Windows o Ubuntu.

  • Come installa Node.js su Windows.
  • Imparare come installare Npm e Node.js su Ubuntu

Crea un progetto Vite eseguendo questo comando nel terminale.

npm crea vite@latest

Una volta avviata l'esecuzione del comando, verrà richiesto il nome del progetto. Digita il nome del tuo progetto e fai clic su Invio.

Successivamente, Vite ti chiederà di selezionare un framework. Seleziona Reagisci.

Vite ti chiederà anche di selezionare una variante. Seleziona JavaScript.

Quando Vite completa lo scaffolding del progetto, naviga nella directory che crea e installa le dipendenze tramite npm.

installazione npm

Per eseguire il progetto, utilizzare questo comando:

npm esegue lo sviluppo

Questa dovrebbe essere la home page.

Puoi iniziare a modificare il tuo progetto e le tue modifiche si rifletteranno nel browser.

Usa Vite per una rapida velocità di sviluppo

CRA (create-react-app) è solitamente lo strumento predefinito per impostare la struttura e la configurazione del progetto per un'applicazione React. È conveniente poiché tutto è impostato per te, ma può essere lento da costruire e ricaricare durante lo sviluppo.

Vite, d'altra parte, utilizza moduli ES nativi nel browser per fornire tempi di compilazione più rapidi. Se non vuoi utilizzare Vite, puoi optare per un meta framework React come Next.js poiché è anche progettato per essere altamente performante.