Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Analyse van bundelgrootte

Analyseer en verklein de JavaScript-bundel van uw applicatie voor sneller laden van de eerste pagina en betere prestaties.

Les 2 van 411 stappen

Analyse van bundelgrootte is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 2 van 4. 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat is een JavaScript-bundel?

Wanneer je een Next.js-toepassing voor productie bouwt, wordt al je JavaScript-code – je componenten, bibliotheken en Next.js zelf – gecombineerd en geoptimaliseerd tot een of meer bestanden die 'bundels' worden genoemd.

Deze bundels worden door de browser van de gebruiker gedownload om je toepassing uit te voeren.

Invloed op de prestaties

Hoe groter je JavaScript-bundels zijn, hoe langer de browser van een gebruiker nodig heeft om ze te downloaden, te parseren en uit te voeren.

Langzamere laadtijden: Gebruikers moeten langer wachten voordat je app interactief wordt.
Hoger dataverbruik: Vooral belangrijk voor mobiele gebruikers met beperkte databundels.
Slechtere gebruikerservaring: Dit kan leiden tot frustratie en ertoe dat gebruikers je site verlaten.

De uitvoer van je build analyseren

Next.js biedt nuttige informatie wanneer je next build uitvoert. Je ziet de grootte van de JavaScript-bundel van elke pagina.

Voor een grondiger inzicht in wat er in die bundels zit, heb je echter gespecialiseerde hulpmiddelen nodig.

next build

Bundels visualiseren met Analyzer

Het pakket @next/bundle-analyzer is een krachtig hulpmiddel. Het maakt een interactieve treemapvisualisatie van je bundels.

Met deze visuele kaart kun je snel grote modules of bibliotheken van derden identificeren die aanzienlijk bijdragen aan de grootte van je bundel.

De Analyzer configureren

Installeer eerst het pakket:

npm install --save-dev @next/bundle-analyzer

Werk vervolgens je next.config.js bij om de Analyzer voorwaardelijk in te schakelen:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: false,
});

module.exports = withBundleAnalyzer({});

Het bundelrapport genereren

Om het rapport te genereren, moet je de omgevingsvariabele ANALYZE instellen en vervolgens je Next.js-buildopdracht uitvoeren.

Hierdoor worden HTML-bestanden gemaakt in je map .next/analyze, die je in je browser kunt openen.

ANALYZE=true npm run build

Waardoor worden bundels groot?

Verschillende factoren kunnen leiden tot een te grote bundel:

Grote bibliotheken: Een volledige bibliotheek importeren terwijl je maar een klein deel gebruikt.
Dubbele code: Verschillende delen van je app importeren dezelfde module.
Ongebruikte code: Code die wel is opgenomen maar nooit wordt uitgevoerd (dode code).
Zware assets: Inline-SVG of base64-afbeeldingen rechtstreeks in JS-bestanden.

Code opsplitsen voor efficiëntie

Code splitting is een techniek waarbij je code opsplitst in kleinere 'chunks' die op aanvraag kunnen worden geladen. Next.js doet dit automatisch voor pagina's.

Voor componenten binnen een pagina kun je dynamische imports gebruiken om ze alleen te laden wanneer dat nodig is. Zo verklein je de initiële bundel.

Componenten lazy laden

Gebruik next/dynamic om componenten alleen te importeren wanneer ze worden weergegeven. Dit is ideaal voor componenten die niet essentieel zijn voor het aanvankelijk laden van de pagina, zoals modals of beheerderspanelen.

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
});

function MyPage() {
  return (
    <div>
      <h1>My Page</h1>
      <LazyComponent />
    </div>
  );
}

Korte controle: bundeloptimalisatie

Denk aan een Next.js-toepassing die aanzienlijk is gegroeid. Welke van de volgende strategieën zijn effectief om de grootte van de initiële JavaScript-bundel te verkleinen?

Beantwoord dit in de interactieve les

Samenvatting van bundeloptimalisatie

Goed gedaan! Je hebt geleerd hoe je de grootte van de JavaScript-bundel van je Next.js-toepassing analyseert en belangrijke optimalisatietechnieken toepast.

Gebruik @next/bundle-analyzer om je bundels te visualiseren.
Gebruik dynamische imports voor niet-essentiële componenten.
Let op grote bibliotheken van derden en zorg ervoor dat tree-shaking effectief werkt.

Het optimaliseren van de bundelgrootte is cruciaal voor een snelle en responsieve gebruikerservaring.

Gratis beginnen

Leer TypeScript 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: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Analyse van bundelgrootte” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Analyse van bundelgrootte”, 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat leer ik in “Analyse van bundelgrootte”?

Analyseer en verklein de JavaScript-bundel van uw applicatie voor sneller laden van de eerste pagina en betere prestaties. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 2 van 4.

Hoe lang duurt de les “Analyse van bundelgrootte”?

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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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

Optimalisatie van afbeeldingen en lettertypen
Analyse van bundelgrootte
Geavanceerde cachingstrategieën
UI streamen met Suspense en laadstatussen

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)