𝗩𝗶𝘁𝗲 𝘀𝗶𝗺𝗽𝗲𝗹 𝘂𝗶𝘁𝗴𝗲𝗹𝗲𝗴𝗱
Oude tools zoals Webpack of CRA werken door eerst je hele project te bundelen. Ze lezen elk bestand en combineren deze tot één groot JavaScript-bestand. Dit werkt voor kleine projecten. Het schiet tekort bij grote projecten met duizenden modules. Grote bundels hebben seconden of zelfs minuten nodig om te bouwen. Elke keer dat je een bestand opslaat, bouwt de tool grote delen van de bundel opnieuw op.
Vite werkt anders. Moderne browsers ondersteunen ES modules natief. Vite bundelt je code niet tijdens de ontwikkeling. Het serveert elk bestand als een afzonderlijke module, pas wanneer de browser erom vraagt.
Denk aan een buffetrestaurant. De chef bereidt elk gerecht al voor voordat de deuren opengaan. Als je een kleine wijziging wilt, moet de chef het grootste deel van het buffet opnieuw maken. Je moet lang wachten op je eten. Dit is hoe Webpack werkt.
Denk nu aan een à la carte restaurant. De deuren gaan direct open. Je bestelt één gerecht. De chef bereidt alleen dat gerecht. Als je later een dessert wilt, bereidt de chef alleen het dessert. Je hoeft niet te wachten tot het hele menu is bereid. Dit is hoe Vite werkt.
Vite gebruikt twee verschillende strategieën voor twee verschillende behoeften:
Ontwikkeling (vite dev)
- Strategie: Serveert native ESM modules zonder te bundelen.
- Snelheid: Direct. Het is niet afhankelijk van de projectgrootte.
- Waarom: Lokale netwerkverzoeken zijn snel.
Productie (vite build)
- Strategie: Bundelt alles met behulp van Rolldown.
- Snelheid: Afhankelijk van de projectgrootte.
- Waarom: Honderden afzonderlijke bestanden zorgen voor te veel HTTP-verzoeken voor echte gebruikers. Bundelen maakt de uiteindelijke site sneller voor hen.
Vite biedt je snelheid tijdens het coderen en prestaties bij de lancering.
Bron: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62