Het buildproces optimaliseren
Maak geoptimaliseerde production builds.
Het buildproces optimaliseren is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 3 lessen.
Van ontwikkeling naar productie
Tijdens de ontwikkeling draai je een ontwikkelserver met hot reload. Om de app uit te brengen maak je een geoptimaliseerde productie-build: een verzameling statische bestanden die zijn afgestemd op snelheid en kleine omvang en klaar zijn om op elke hostingomgeving te deployen.
De build uitvoeren
De standaardopdracht bouwt je app voor productie. Vite (de standaardtooling voor Vue 3) compileert, bundelt en optimaliseert alles.
npm run buildDe builduitvoer
De build schrijft geoptimaliseerde bestanden naar een map dist: een index.html, JavaScript- en CSS-bundels met hash en je statische bestanden. Deze map deploy je.
dist/
index.html
assets/
index-a1b2c3.js
index-d4e5f6.cssMinificatie
Minificatie verwijdert witruimte en opmerkingen en maakt variabelenamen korter, zodat bestanden sneller worden gedownload. Productie-builds minificeren JavaScript en CSS automatisch.
Tree-shaking
Tree-shaking verwijdert code die je nooit gebruikt. Als je één functie uit een bibliotheek importeert, verwijdert de bundelaar de rest. Gebruik benoemde imports van ES-modules zodat tree-shaking kan werken.
// only what you use is bundled
import { debounce } from "lodash-es"Content-hashing
Bestandsnamen van de build bevatten een content-hash zoals index-a1b2c3.js. Als de code verandert, verandert de hash ook. Browsers halen dan het nieuwe bestand op en cachen ongewijzigde bestanden agressief.
Bundelgrootte analyseren
Gebruik een visualisatieplugin om te zien wat je bundel vult. Die maakt een interactieve grafiek van welke modules de meeste ruimte innemen en helpt je bij het optimaliseren.
npm install -D rollup-plugin-visualizerDe analyse lezen
Een grote afhankelijkheid die je nauwelijks gebruikt is een waarschuwingssignaal. De analyse kan een zware bibliotheek voor datums of grafieken aan het licht brengen die je kunt vervangen door een kleiner alternatief of lui kunt laden.
Omgevingsvariabelen
Vite stelt omgevingsvariabelen met het voorvoegsel VITE_ beschikbaar via import.meta.env. Gebruik ze om API-URL's en functievlaggen per omgeving te configureren.
// .env.production
// VITE_API_URL=https://api.example.com
const apiUrl = import.meta.env.VITE_API_URLOmgevingsspecifieke builds
Vite laadt .env.production tijdens npm run build en .env.development tijdens npm run dev, zodat elke omgeving automatisch de juiste configuratie krijgt.
// .env.development -> VITE_API_URL=http://localhost:3000
// .env.production -> VITE_API_URL=https://api.example.comDe build vooraf bekijken
Voer vóór het deployen lokaal een voorbeeld van de productie-build uit om te controleren of alles naar verwachting werkt met echte geoptimaliseerde bestanden.
npm run build
npm run previewKorte controle
Test je kennis van het buildproces.
Samenvatting
Voer npm run build uit om een geoptimaliseerde map dist te maken met geminificeerde, tree-shaken bestanden met content-hashes. Analyseer de bundelgrootte om zware afhankelijkheden te verminderen en gebruik omgevingsvariabelen met het voorvoegsel VITE_ en .env-bestanden voor configuratie per omgeving. Bekijk de build vooraf voordat je hem publiceert. Hierna deploy je deze build naar een hostingplatform.
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
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Het buildproces optimaliseren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Het buildproces optimaliseren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 3 lessen.
Wat leer ik in “Het buildproces optimaliseren”?
Maak geoptimaliseerde production builds. Je oefent met Vue 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 Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue 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 1 van 3.
Hoe lang duurt de les “Het buildproces optimaliseren”?
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 Vue Academy?
Ja. Elke les over Vue 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
- Het buildproces optimaliseren
- Implementeren op hostingplatforms
- Monitoring en onderhoud