Bruger du stadig create-react-app til at konfigurere dit React-projekt? Skift til Vite for bedre ydeevne og hurtigere udviklingshastighed.

Når man starter et nyt React-projekt, henvender mange udviklere sig til opret-reager-app som deres go-to-kommandoværktøj til projektopsætning og konfiguration. Vite er dog et bedre alternativ. Det giver hurtigere udviklingstider og bedre ydeevne.

Hvad er Vite?

Vite er et byggeværktøj og udviklingsserver designet til at forbedre udviklingsprocessen for moderne webapplikationer. Det gør den ved at opdele dine applikationsmoduler i afhængigheder og kildekode. Afhængigheder er moduler, der ikke ændres ofte, mens kildekoden typisk redigeres ofte under udvikling.

Vite bruger esbuild, en Go-baseret bundter, der er betydeligt hurtigere end traditionelle JavaScript-baserede bundlere for at fremskynde byggeprocessen for kildekoden. Det præ-bundter også din applikations afhængigheder og serverer kildekoden over native ESM, giver browsere mulighed for at optimere indlæsningen af ​​moduler for mere effektiv og hurtigere anvendelse ydeevne. Når det er tid til at implementere din applikation til produktion, har Vite en indbygget build-kommando, der automatisk optimerer din app til implementering og sikrer, at din applikation kører problemfrit.

instagram viewer

Oprettelse af et Vite-projekt

Før du opretter et Vite-projekt, skal du bemærke, at Vite kræver Node.js version 14.18+ eller 16+. Du kan henvise til disse artikler for at installere Node på din Windows- eller Ubuntu-maskine.

  • Hvordan installer Node.js på Windows.
  • Lære hvordan man installerer Npm og Node.js på Ubuntu

Opret et Vite-projekt ved at køre denne kommando i terminalen.

npm oprette vite@seneste

Når kommandoen begynder at udføre, bliver du bedt om et projektnavn. Indtast navnet på dit projekt, og klik på Enter.

Dernæst vil Vite bede dig om at vælge en ramme. Vælg Reager.

Vite vil også bede dig om at vælge en variant. Vælg JavaScript.

Når Vite er færdig med at stilladsere projektet, skal du navigere i den mappe, den opretter, og installere afhængighederne via npm.

npm installere

For at køre projektet skal du bruge denne kommando:

npm køre dev

Dette skal være startsiden.

Du kan begynde at redigere dit projekt, og dine ændringer vil blive afspejlet i browseren.

Brug Vite for hurtig udviklingshastighed

CRA (create-react-app) er normalt standardværktøjet til opsætning af projektstruktur og konfiguration for en React-applikation. Det er praktisk, da alt er sat op til dig, men det kan være langsomt at bygge og genindlæse under udvikling.

Vite, på den anden side, bruger native ES-moduler i browseren for at give hurtigere opbygningstider. Hvis du ikke ønsker at bruge Vite, kan du vælge en React meta framework som Next.js, da den også er designet til at være yderst performant.