Technieken om bundelgrootte te verkleinen

Is het je weleens opgevallen dat een website lang nodig heeft om te laden? Vaak is de omvang van de bijbehorende "bundel" een belangrijke oorzaak!

Een bundel bevat alle code en assets van je applicatie, verpakt in één of meer bestanden. Grotere bundels betekenen dat er meer gegevens moeten worden gedownload, waardoor je app trager wordt, vooral bij tragere verbindingen of op mobiele apparaten.

Wanneer je een webapplicatie bouwt met tools zoals Webpack, combineert deze al je JavaScript, CSS, afbeeldingen en andere bestanden. Deze gecombineerde uitvoer noemen we een bundel.

Zie het als het inpakken van een koffer voor een reis. Je wilt alles meenemen wat je nodig hebt, maar je wilt de koffer ook zo licht en hanteerbaar mogelijk houden!

Voordat je gaat optimaliseren, is het belangrijk om te weten waardoor je bundel groot wordt. Webpack biedt tools waarmee je de inhoud ervan zichtbaar kunt maken.

• Webpack Bundle Analyzer: Een populaire plugin die een interactieve treemapweergave van de inhoud van je bundel maakt.
• Source Map Explorer: Helpt je te begrijpen hoeveel de oorspronkelijke broncode bijdraagt aan de omvang.

Deze tools laten zien welke modules en afhankelijkheden de meeste ruimte innemen.

Tree-shaking, ook wel "dead-code-eliminatie" genoemd, is een krachtige optimalisatietechniek. Hierbij wordt code uit je uiteindelijke bundel verwijderd die je applicatie niet daadwerkelijk gebruikt.

Stel je een boom voor waarvan slechts bepaalde takken vruchten dragen. Tree-shaking zaagt de dode takken (ongebruikte code) af om de boom lichter en efficiënter te maken.

Om tree-shaking te laten werken, moet je code de ES2015-modulesyntaxis (import en export) gebruiken. Webpack analyseert deze afhankelijkheden vervolgens.

Je kunt Webpack laten weten dat een module geen neveneffecten heeft (wat betekent dat het importeren ervan de globale status niet verandert) door "sideEffects": false toe te voegen aan je package.json of modulespecifieke configuratie. Zo weet Webpack dat het veilig is om ongebruikte exports te verwijderen.

Code splitting is een andere belangrijke techniek. In plaats van één enorme bundel wordt je applicatie opgesplitst in kleinere chunks die op aanvraag worden geladen.

Dit betekent dat gebruikers alleen de code downloaden die ze nodig hebben voor de huidige weergave of functie, waardoor de eerste laadtijd veel korter wordt. Andere delen van de app kunnen later worden geladen terwijl de gebruiker navigeert.

De meest gebruikelijke manier om code splitting te implementeren is met dynamische import()-instructies. Hiermee geef je Webpack opdracht om een afzonderlijke bundel voor de geïmporteerde module te maken.

Hier is een eenvoudig voorbeeld:

Naast het verwijderen van ongebruikte code kunnen we de overgebleven code ook kleiner maken. Bij minificatie worden overbodige tekens, zoals witruimte, verwijderd en variabelenamen ingekort.

Compressie (zoals Gzip of Brotli) verkleint de bestandsgrootte verder wanneer bundels via het netwerk worden overgedragen. In productiemodus worden deze stappen vaak automatisch door Webpack uitgevoerd.

De grootte van een bundel gaat niet alleen over JavaScript. Grote afbeeldingen, lettertypen of andere assets kunnen je app ook onnodig groot maken.

• Afbeeldingen optimaliseren: Comprimeer afbeeldingen, gebruik moderne indelingen (WebP) en laad afbeeldingen buiten beeld lazy.
• Lettertypen optimaliseren: Beperk lettertypen tot de tekens die je nodig hebt.
• Lazy laden: Laad componenten of routes pas wanneer ze bijna worden weergegeven (dit wordt in de volgende les uitgebreider behandeld).

Goed gedaan! Je hebt belangrijke technieken geleerd om de bundelgrootte van je applicatie te verkleinen.

• Tree-shaking verwijdert ongebruikte code.
• Code splitting splitst bundels op in kleinere chunks die op aanvraag worden geladen.
• Minificatie en compressie verkleinen bestanden verder.

Door deze technieken toe te passen, zorg je voor een snellere en efficiëntere ervaring voor je gebruikers. Hierna bekijken we strategieën voor caching!