Wordt ViteJS de opvolger van Webpack?

Simpel, eenvoudig en snel. Je wil snel aan de slag en dat is wat je als frontend developer maar al te graag wil. Bij verschillende projecten heb ik al meegemaakt dat je meermaals (lang) bezig bent met het configureren van de build tool, zonder dat je ook maar toe komt aan een regel programmeren. Dat hoeft niet erg te zijn, maar er zijn leukere dingen om je mee bezig te houden. Vite stelt zich voor als de volgende generatie frontend tooling.

Wat is ViteJS?

Vite heeft een ecosysteem neergezet waarbij je snel kan beginnen met het ontwikkelen van een project. Hierbij is het mogelijk om direct gebruik te maken van de populaire frameworks als React en Vue, maar ook vanilla JavaScript is een kwestie van je ogen dicht doen. Met zero configuration heb je snel een tooling gereed waarbij je gebruik kan maken van SASS, TypeScript of wat dan ook.

Vite richt zich op snelheid en performance door de development ervaring te verbeteren. Zo maakt het niet uit hoe groot je applicatie is, de applicatie start altijd snel op. Hot Module Replacement (HMR) zit eveneens in de core configuratie. Hiermee wordt dus alleen herladen wat je op dat moment hebt aangepast. De laatste belangrijke pijler is het compileren/bundelen van JavaScript door middel van ESBuild, welke bekend staat als een van de snelste bundlers van dit moment.

Onder de motorkap maakt Vite gebruik van zowel ESbuild als Rollup. Een van de redenen om gebruik te maken van ESbuild is omdat deze slim overweg kan met dependencies. Doordat deze niet frequent veranderen hoeft deze niet bij elke build opnieuw gecontroleerd te worden. Rollup wordt gebruikt zonder dat je daarvoor iets extra’s hoeft in te stellen. Dat kan natuurlijk wel, net als een heleboel andere dingen.

Vite omschrijft zichzelf dus als de tool die gebruikt maakt van de nieuwe ontwikkelingen van het ecosysteem; de beschikbaarheid van native ES-modules in de browser en de opkomst van JavaScript tools die compilen tot native languages.

Hoe werkt ViteJS

Nu de theorie veel belovend klinkt ben ik benieuwd hoe dit in de praktijk zal uitpakken. Begin een Vite project met het volgende commando in de terminal:

npm create vite@latest

Bij de eerste keer van dit commando krijg je de vraag om de laatste packages te installeren, waarna je het project van een naam en framework moet voorzien.

npm create vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
✔ Project name: … vite-cinq
✔ Select a framework: › react
✔ Select a variant: › react-ts

Scaffolding project in /Users/jeroen/Development/_temp/vite-cinq...

Done. Now run:

  cd vite-cinq
  npm install
  npm run dev

Na een npm install en npm run dev is mijn lokale omgeving tussen 350-500 ms opgestart. Dat is best snel en dat zonder enige configuratie. Om het wat spannender te maken heb ik het React TypeScript TodoMVC 2022 project uitgecheckt en in mijn Vite project geplaatst. De conclusie was al vrij snel dat ik tot hetzelfde resultaat kwam als bij de initiële setup. Ook de standaard beloofde Hot Module Replacement (HMR) deed wat het moest doen. Ik heb op geen enkel moment een harde refresh van de hele applicatie nodig gehad.

Het bouwen van productiecode gaat even makkelijk als het starten in de development mode. Hoewel dit bij andere tooling ook wel te doen is, lijkt het voor mijn gevoel sneller te gaan. Een mooie toevoeging is dat je na het commando npm run build ook een commando npm run preview hebt om het eindresultaat snel te kunnen zien. Dat vind ik een leuk pluspunt.

Zo zijn er nog meer dingen die out of the box al standaard werken, bijvoorbeeld:

• het toevoegen environment variables volgens de dotenv structuur;
• het gebruiken van CSS modules en/of CSS Pre-processors;
• het instellen hoe je assets ingeladen moeten worden en;
• het gebruiken van global en dynamic imports.

Conclusie

Of Vite de vervanger van Webpack gaat worden durf ik niet te zeggen. Net als met veel andere tools en frameworks gebeurt er veel onder de motorkap, waardoor je niet zelf inzicht hebt over hoe en wat er gebeurt. Je hebt alleen zicht op de input en de output. Bij Vite vind ik het verschil tussen development (esbuild) en productie (rollup) niet prettig.

Al met al krijg ik over Vite als tool een goede indruk, omdat het mij – na een paar uurtjes ermee spelen – een positieve vibe geeft aan de developer experience. Je krijgt veel out of the box om een snel een project te kunnen starten. Dit maakt het voor mij toegankelijk om hier bij een greenfield project voor te kiezen. Of je ook echt moet willen dat een tool je (snel) alles geeft betwijfel ik. Graag zou ik wat meer controle willen hebben.