Använder du fortfarande create-react-app för att konfigurera ditt React-projekt? Byt till Vite för bättre prestanda och snabbare utvecklingshastighet.

När man startar ett nytt React-projekt vänder sig många utvecklare till skapa-reagera-app som deras go-to-kommandoverktyg för projektinställning och konfiguration. Vite är dock ett bättre alternativ. Det ger snabbare utvecklingstider och bättre prestanda.

Vad är Vite?

Vite är ett byggverktyg och en utvecklingsserver designad för att förbättra utvecklingsprocessen för moderna webbapplikationer. Den gör detta genom att dela upp dina applikationsmoduler i beroenden och källkod. Beroenden är moduler som inte ändras ofta, medan källkoden vanligtvis redigeras ofta under utveckling.

Vite använder esbygga, en Go-baserad paketerare som är betydligt snabbare än traditionella JavaScript-baserade paketerare för att påskynda byggprocessen för källkoden. Den förbuntar också din applikations beroenden och serverar källkoden över inbyggt ESM, gör det möjligt för webbläsare att optimera laddningen av moduler för effektivare och snabbare tillämpning prestanda. När det är dags att distribuera din applikation till produktion har Vite ett inbyggt byggkommando som automatiskt optimerar din app för distribution, vilket säkerställer att din applikation fungerar smidigt.

instagram viewer

Skapa ett Vite-projekt

Innan du skapar ett Vite-projekt, observera att Vite kräver Node.js version 14.18+ eller 16+. Du kan hänvisa till dessa artiklar för att installera Node på din Windows- eller Ubuntu-maskin.

  • Hur installera Node.js på Windows.
  • Lära sig hur man installerar Npm och Node.js på Ubuntu

Skapa ett Vite-projekt genom att köra det här kommandot i terminalen.

npm skapa vite@senaste

När kommandot börjar köras kommer du att bli tillfrågad om ett projektnamn. Skriv namnet på ditt projekt och klicka på enter.

Därefter kommer Vite att uppmana dig att välja ett ramverk. Välj Reagera.

Vite kommer också att be dig välja en variant. Välj JavaScript.

När Vite är klar med byggnadsställningen för projektet, navigera i katalogen som den skapar och installera beroenden via npm.

npm installera

För att köra projektet, använd det här kommandot:

npm kör dev

Detta bör vara startsidan.

Du kan börja redigera ditt projekt och dina ändringar kommer att återspeglas i webbläsaren.

Använd Vite för snabb utvecklingshastighet

CRA (create-react-app) är vanligtvis standardverktyget för att ställa in projektstrukturen och konfigurationen för en React-applikation. Det är bekvämt eftersom allt är inställt för dig, men det kan vara långsamt att bygga och ladda om under utvecklingen.

Vite, å andra sidan, använder inbyggda ES-moduler i webbläsaren för att ge snabbare byggtider. Om du inte vill använda Vite kan du välja ett React-meta-ramverk som Next.js eftersom det också är designat för att vara högpresterande.