Gebruik je nog steeds create-react-app om je React-project op te zetten? Schakel over naar Vite voor betere prestaties en snellere ontwikkelsnelheid.

Bij het starten van een nieuw React-project wenden veel ontwikkelaars zich tot maak-reageer-app als hun go-to-opdrachttool voor het opzetten en configureren van projecten. Vite is echter een beter alternatief. Het biedt snellere ontwikkelingstijden en betere prestaties.

Wat is Vite?

Vite is een build-tool en ontwikkelserver die is ontworpen om het ontwikkelingsproces van moderne webapplicaties te verbeteren. Het doet dit door uw applicatiemodules te verdelen in afhankelijkheden en broncode. Afhankelijkheden zijn modules die niet vaak veranderen, terwijl de broncode tijdens de ontwikkeling doorgaans vaak wordt bewerkt.

Vit gebruikt esbouwen, een op Go gebaseerde bundelprogramma dat aanzienlijk sneller is dan traditionele op JavaScript gebaseerde bundelprogramma's om het bouwproces voor de broncode te versnellen. Het bundelt ook de afhankelijkheden van uw applicatie vooraf en bedient de broncode via native ESM, waardoor browsers het laden van modules kunnen optimaliseren voor een efficiëntere en snellere toepassing prestatie. Als het tijd is om uw applicatie in productie te nemen, heeft Vite een ingebouwde build-opdracht die uw app automatisch optimaliseert voor implementatie, zodat uw applicatie soepel werkt.

instagram viewer

Een Vite-project maken

Voordat u een Vite-project maakt, moet u er rekening mee houden dat Vite Node.js versie 14.18+ of 16+ vereist. U kunt deze artikelen raadplegen om Node op uw Windows- of Ubuntu-machine te installeren.

  • Hoe installeer Node.js op Windows.
  • Leren hoe Npm en Node.js op Ubuntu te installeren

Maak een Vite-project door deze opdracht in de terminal uit te voeren.

npm maak vite@latest

Zodra de opdracht wordt uitgevoerd, wordt u gevraagd om een ​​projectnaam. Typ de naam van uw project en klik op Enter.

Vervolgens zal Vite u vragen een raamwerk te selecteren. Selecteer Reageren.

Vite zal je ook vragen om een ​​variant te selecteren. Selecteer Javascript.

Wanneer Vite klaar is met het steigeren van het project, navigeert u door de map die het maakt en installeert u de afhankelijkheden via npm.

npm installeren

Gebruik deze opdracht om het project uit te voeren:

npm run dev

Dit zou de startpagina moeten zijn.

U kunt beginnen met het bewerken van uw project en uw wijzigingen worden weergegeven in de browser.

Gebruik Vite voor snelle ontwikkelingssnelheid

CRA (create-react-app) is meestal de standaardtool voor het opzetten van de projectstructuur en configuratie voor een React-applicatie. Het is handig omdat alles voor u is ingesteld, maar het kan traag zijn om te bouwen en opnieuw te laden tijdens de ontwikkeling.

Vite daarentegen gebruikt native ES-modules in de browser om snellere bouwtijden te bieden. Als u Vite niet wilt gebruiken, kunt u kiezen voor een React-metaframework zoals Next.js, omdat het ook is ontworpen om zeer krachtig te zijn.