Frontend Academy · Les

Vite: devserver en build

Start een Vite-project, gebruik de directe HMR-devserver, voer de build-opdracht uit en bekijk een preview van de productie-output.

Les 3 van 413 stappen

Vite: devserver en build is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat is Vite?

Vite is een frontend-bouwprogramma van de volgende generatie, gemaakt door Evan You (de maker van Vue). Het biedt een extreem snelle ontwikkelserver met native ESM en esbuild, plus een productie-build die door Rollup wordt aangedreven.

Een Vite-project maken

npm create vite@latest maakt de basisstructuur voor een nieuw project. Kies je framework (Vanilla, React, Vue, Svelte, Preact, Lit) en variant (JS of TS). Het project is direct klaar — configuratie is niet nodig.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

De ontwikkelserver — direct starten

Vite bundelt niet tijdens de ontwikkeling. Het serveert elk bestand als een native ESM-module. De browser importeert ze rechtstreeks. Niet bundelen betekent een koude start van minder dan 100 ms, ongeacht de projectgrootte. Alleen gewijzigde bestanden worden opnieuw gecompileerd door HMR.

HMR — Hot Module Replacement

De HMR van Vite vervangt alleen de gewijzigde module in de actieve app, zonder de hele pagina opnieuw te laden. Bij React met @vitejs/plugin-react blijft de componentstatus behouden tijdens HMR. Wijzigingen verschijnen binnen 50 ms.

vite.config.js / vite.config.ts

Vite wordt geconfigureerd met een vite.config.ts-bestand. Veelgebruikte opties zijn plugins, aliassen voor resolve, de serverpoort, een proxy voor API-aanroepen en de uitvoermap van de build.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Omgevingsvariabelen

Vite stelt omgevingsvariabelen met het voorvoegsel VITE_ beschikbaar via import.meta.env. Sla ze op in .env, .env.development en .env.production. Geef geheimen nooit het voorvoegsel VITE_ — ze worden opgenomen in de browserbundel.

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — productie-build

npm run build roept onder de motorkap Rollup aan om de app te bundelen, te verkleinen en tree shaking toe te passen. De uitvoer gaat naar de map dist/, die klaar is voor implementatie.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

De bundel analyseren

Gebruik vite-bundle-visualizer of rollup-plugin-visualizer om een treemap van de bundelinhoud te genereren. Hiermee kun je te grote afhankelijkheden en mogelijkheden voor lazy laden identificeren.

npm run preview

npm run preview serveert de productie-build in dist/ lokaal. Gebruik deze opdracht om de productie-build te controleren voordat je implementeert — zo ontdek je problemen die alleen optreden wanneer de app niet in de ontwikkelmodus draait.

Code splitsen in Vite

Dynamische import()-instructies maken automatisch afzonderlijke chunks aan. Lazy routes van React Router en ook defineAsyncComponent van Vue zorgen voor splitsing. Controleer de grootten van de chunks in de build-uitvoer.

Vite voor bibliotheken

De bibliotheekmodus van Vite (build.lib) bouwt npm-bibliotheken en levert zowel ESM- als CJS-indelingen op. Geef een lijst met externe afhankelijkheden op om peerafhankelijkheden zoals React niet mee te bundelen.

Korte controle

Waarom is de ontwikkelserver van Vite sneller dan die van webpack?

Beantwoord dit in de interactieve les

Samenvatting: Vite

npm create vite@latest maakt direct de basisstructuur. De ontwikkelserver gebruikt native ESM — geen bundeling, directe HMR. vite.config.ts is voor plugins, aliassen en proxy's. Het voorvoegsel VITE_ is voor omgevingsvariabelen die veilig in de browser kunnen worden gebruikt. npm run build maakt een geoptimaliseerde Rollup-bundel. npm run preview test de productie-build lokaal.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Vite: devserver en build” gratis?

Ja — de volledige tekst van “Vite: devserver en build” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Vite: devserver en build”?

Start een Vite-project, gebruik de directe HMR-devserver, voer de build-opdracht uit en bekijk een preview van de productie-output. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Vite: devserver en build”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?

Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

ES-modules: import export en dynamic import
npm en package.json: dependencies scripts
Vite: devserver en build
Bundelconcepten: tree shaking en code splitting

← Terug naar Frontend Academy