𝗩𝗶𝘁𝗲 𝘃𝗲𝗿𝗲𝗲𝗻𝘃𝗼𝗲𝗱𝗶𝗴𝗲𝗻
Oude tools zoals Webpack of Create React App werken door eerst je hele project te bundelen. De tool leest elk bestand en zet ze om in één gigantisch JavaScript-bestand. Dit werkt voor kleine projecten. Voor grote projecten schiet het tekort. Bij grote projecten duurt dit proces vele seconden. Elke keer dat je een bestand opslaat, moet de tool een groot deel van dat werk opnieuw doen.
Vite werkt anders. Moderne browsers ondersteunen ES modules natief. Dit betekent dat de browser zelf imports en exports kan afhandelen. Vite bundelt je code niet tijdens de ontwikkeling. Het dient elk bestand pas als een aparte module wanneer de browser erom vraagt.
Denk aan een buffetrestaurant. De chef bereidt elk gerecht voor voordat de deuren opengaan. Als je één kleine wijziging wilt, moet de chef het hele buffet opnieuw maken. Dit is hoe Webpack werkt. Hoe groter het project, hoe langer je moet wachten.
Vite is als een à la carte restaurant. De deuren gaan direct open. Je bestelt één gerecht. De chef bereidt alleen dat gerecht. Als je later nog een dessert wilt, bereidt de chef alleen het dessert. Je hoeft niet te wachten tot de hele menukaart klaar is.
Vite gebruikt twee verschillende strategieën voor twee verschillende behoeften:
Ontwikkeling (vite dev) • Strategie: Dient native ESM-modules zonder te bundelen. • Startsnelheid: Direct. Het is niet afhankelijk van de projectgrootte. • Waarom: Lokale HTTP-verzoeken zijn snel op je computer.
Productie (vite build) • Strategie: Bundelt alles met behulp van Rolldown. • Startsnelheid: De tijd neemt toe naarmate het project groter wordt. • Waarom: Honderden afzonderlijke bestanden veroorzaken te veel HTTP-verzoeken voor gebruikers. Bundelen lost dit op.
Vite biedt je snelheid tijdens het coderen en efficiëntie bij de lancering.
Bron: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62