Wat is vite?

vite (je spreekt het uit als viet) is een front-end build tool ook wel een bundler genoemd. Met vite maak je het ontwikkelproces omtrent het bouwen van een website / web applicatie gemakkelijker.

Wat doet vite?

Een web gebaseerde applicatie heeft veel verschillende resources / onderdelen. Je hebt een aantal CSS, HTML en JS / TS files en waarschijnlijk ook een aantal afbeeldingen, video's en fonts.

vite zorgt ervoor dat al deze resources efficiënt worden gebundeld. Waarbij bundlen het proces is om in een werkende volgorde verschillende import statements te schrijven.

Om CSS te importeren voegt vite vanzelf een <link rel="stylesheet" href="a.css" /> toe. Om JavaScript te importeren voegt vite bijvoorbeeld een <script src="b.js" /> toe.

Lang geleden voor bundlers schreven we alle "import" logica vaak zelf. Het resultaat was een heel groot aantal handmatige imports die volgorde afhankelijk waren. Het resulteerde in een hoop foutgevoelige code.

Ook maakt vite een efficiëntieslag: hij zal proberen zo veel mogelijk code die niet gebruikt wordt elimineren. Dit noemt men vaak tree-shaking, in het Nederlands schudden aan de boom.

Staat er in je package.json een dependency die heel veel imports heeft maar gebruik je er maar één dan zorg vite ervoor dat de rest niet meekomt in de webapp / website.

Hoe bundeld vite?

vite analyseert jouw code en kijkt welke imports / exports jij doet in JavaScript. Op basis van de import en export informatie bouwt vite een graph op van alle resources. Hij kijkt naar de afhankelijkheden / dependencies en zorgt voor de optimale import volgorde.

Maar vite voegt ook een subtiele uitbreiding toe aan JavaScript: het importeren van afbeeldingen en CSS:

import ./app.css
import logo from './logo.png';

Normaal is het bovenstaande niet mogelijk, het is immers geen valide JavaScript. Je kan in JavaScript geen CSS en afbeeldingen importeren!

Ziet vite dat je een stuk CSS importeert dan voegt hij een <link rel="stylesheet" /> toe.

Bij imports van afbeeldingen krijg je van vite een string die de URL naar de afbeelding zou zijn na een product build. Zie het alsof vite er een const van maakt:

Bij imports van afbeeldingen krijg je van vite een string die de URL naar de afbeelding zou zijn na een product build. Zie het alsof vite er een const van maakt:

const logo = '/public/images/logo.png';

<image src={logo} alt="Het logo van react-cursus is..." />

Wat is vitejs-plugin-react?

vite heeft een aantal plugins voor verschillende frameworks / libraries, en zo ook voor react. De plugin heet /vitejs/vite-plugin-react en configureert automatisch jsx en tsx welke essentieel zijn voor het gebruik van JSX waar react zijn template taal op is gebaseerd.

Wanneer je /vitejs/vite-plugin-react gebruikt kan je met een klein aantal regels vite uitbreiden voor react:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Vite is geweldig voor een SPA?

In de react wereld is vite zeer geschikt voor het maken van een Single Page Application. De reden waarom is simpel: wanneer je vite een productie build laat bouwen levert hij als output een folder / directory op die compleet statisch is.

Dit betekent dat je alleen een simpele web server nodig hebt, of een CDN. Maar geen JavaScript variant op je server zoals Node.js, Bun of Deno.

Dit maakt niet alleen het deployen van je front-end simpeler maar ook goedkoper.

Vite + React = vrijheid

Als je vite in combinatie met react gebruikt dan heb je de meeste keuzevrijheid. In vergelijking met bijvoorbeeld Next.js, of Astro wordt je al in allerlei hoeken geduwd.

Je hebt bijvoorbeeld al geen keuze om je eigen router te kiezen bij Next.js en Astro. Bij vitejs-plugin-react is het jouw feest en kan je kiezen wat je wilt.

Voor maximale vrijheid is vite dus een handige keuze, mits je een SPA maakt!

Is vite in combinatie met React geschikt voor websites?

Gebruik je vite in combinatie met react dan moet je oppassen dat je website geen blanco pagina is zonder JavaScript enabled.

Dat je website niet werkt zonder JavaScript lijkt misschien geen groot probleem. Ja er zijn gebruikers die JavaScript disabelen, maar dit is een kleine groep.

Belangrijker is de impact die het heeft op Search Engine Optimalization (SEO). Crawlers dienen dan JavaScript te runnen om zo de content van de website te kunnen zien. Zo heeft Google een leger aan crawlers die goed alleen met HTML werkt, en een kleiner aantal crawlers dat ook met JavaScript werkt.

Dit is voor Google een rekensom: de HTML only crawlers zijn veel goedkoper om te draaien, dan en headless browser variant die ook JavaScript runt.

Wil je dus gevonden worden door Google, dan is vite niet de beste optie! Bouw je een webapp: lees een applicatie waarbij de gebruikers eerst moeten inloggen voordat ze iets zien. Dan is vite uitermate geschikt.