Bruker du fortsatt create-react-app for å sette opp React-prosjektet ditt? Bytt til Vite for bedre ytelse og raskere utviklingshastighet.

Når du starter et nytt React-prosjekt, henvender mange utviklere seg til lag-reager-app som deres gå til kommandoverktøy for prosjektoppsett og konfigurasjon. Vite er imidlertid et bedre alternativ. Det gir raskere utviklingstider og bedre ytelse.

Hva er Vite?

Vite er et byggeverktøy og utviklingsserver designet for å forbedre utviklingsprosessen til moderne webapplikasjoner. Den gjør dette ved å dele applikasjonsmodulene inn i avhengigheter og kildekode. Avhengigheter er moduler som ikke endres ofte, mens kildekoden vanligvis redigeres ofte under utvikling.

Vite bruker esbuild, en Go-basert bunter som er betydelig raskere enn tradisjonelle JavaScript-baserte pakker for å øke hastigheten på byggeprosessen for kildekoden. Den pakker også applikasjonens avhengigheter på forhånd og serverer kildekoden over innebygd ESM, slik at nettlesere kan optimalisere lasting av moduler for mer effektiv og raskere applikasjon opptreden. Når det er på tide å distribuere applikasjonen din til produksjon, har Vite en innebygd byggekommando som automatisk optimaliserer appen din for distribusjon, og sikrer at applikasjonen din kjører jevnt.

instagram viewer

Opprette et Vite-prosjekt

Før du oppretter et Vite-prosjekt, vær oppmerksom på at Vite krever Node.js versjon 14.18+ eller 16+. Du kan referere til disse artiklene for å installere Node på din Windows- eller Ubuntu-maskin.

  • hvordan installer Node.js på Windows.
  • Lære hvordan installere Npm og Node.js på Ubuntu

Opprett et Vite-prosjekt ved å kjøre denne kommandoen i terminalen.

npm opprette vite@latest

Når kommandoen begynner å kjøre, vil du bli bedt om et prosjektnavn. Skriv inn navnet på prosjektet og klikk på Enter.

Deretter vil Vite be deg om å velge et rammeverk. Velg Reager.

Vite vil også be deg velge en variant. Velg JavaScript.

Når Vite fullfører stillaset prosjektet, naviger katalogen det oppretter, og installer avhengighetene via npm.

npm installere

For å kjøre prosjektet, bruk denne kommandoen:

npm kjøre dev

Dette bør være hjemmesiden.

Du kan begynne å redigere prosjektet ditt og endringene dine vil bli reflektert i nettleseren.

Bruk Vite for rask utviklingshastighet

CRA (create-react-app) er vanligvis standardverktøyet for å sette opp prosjektstrukturen og konfigurasjonen for en React-applikasjon. Det er praktisk siden alt er satt opp for deg, men det kan være tregt å bygge og laste på nytt under utvikling.

Vite, på den annen side, bruker native ES-moduler i nettleseren for å gi raskere byggetider. Hvis du ikke vil bruke Vite, kan du velge et React-meta-rammeverk som Next.js, da det også er designet for å ha høy ytelse.