Laat je webapp ademen: verbeter je web performance met lazy modules.
Een snelle, goed presterende webapp is vandaag de dag belangrijker dan ooit. Toch wordt bij veel applicaties nog steeds alle JavaScript in één keer geladen, ongeacht of de gebruiker alles meteen nodig heeft. Dat kan veel sneller en efficiënter. In dit artikel legt Roy, developer bij Cube en de maker van de LazyModule, uit hoe je met een eenvoudige aanpak veel winst behaalt.
Dat moet sneller kunnen.
Je bouwt een moderne webapp. Alles werkt maar de prestaties? Meh. De initiële laadtijd is te lang, gebruikers wachten op scripts die ze misschien nooit nodig hebben, en je weet: er móet een betere manier zijn. Stel je voor: modules die pas worden geladen als ze nodig zijn, vlak voordat elementen in beeld komen. Geen verspilde requests. Geen logica buiten beeld. Alleen wat de gebruiker ziet, precies wanneer ze het willen zien.
Dat is precies wat de lazy module package van Cube doet.
In deze blogpost laat Roy zien hoe je lazy module inzet om je webapp sneller, lichter en slimmer te maken.
Wat is een lazy module?
Een lazy module is in deze context een JavaScript-module die pas geladen en uitgevoerd wordt wanneer dat nodig is, als het bijbehorende HTML-element zichtbaar wordt in de viewport of wanneer er interactie mee plaatsvindt. In plaats van alle modules bij het laden van de pagina meteen in te laden (wat veel resources kost), wordt een lazy module "uitgesteld geladen" (lazy loaded). Dit betekent:
Het script wordt pas opgehaald wanneer de gebruiker het nodig heeft.
De module wordt dan toegepast op het gekoppelde DOM-element.
Waarom is dat handig?
Lazy modules zorgen ervoor dat je alleen de code laadt die je op dat moment nodig hebt. Dat heeft veel voordelen:
⚡ Snellere initiële laadtijd van je webapp
📉 Lager dataverbruik (vooral belangrijk op mobiel)
🧠 Minder geheugenverbruik en betere performance
📦 Kleinere bundels door het gebruik van code-splitting
In grote webapps of dynamische websites kan dit het verschil maken tussen een trage of een razendsnelle ervaring.
Waarom deze LazyModule?
Hoewel veel frameworks ondersteuning bieden voor lazy loading, komt daar vaak nog een hoop configuratiewerk bij kijken. Daarom heeft Roy een eigen Open Source LazyModule ontwikkeld. Lazy loading zorgt voor snellere laadtijden, minder dataverbruik en betere performance, vooral bij grotere webapps of dynamische content. Met de LazyModule voeg je dat gemak toe zonder zelf een complexe setup te hoeven schrijven.
De LazyModule is bedoeld voor developers die werken met moderne build tools zoals Vite en die hun applicatie verder willen optimaliseren. Of je nu werkt met vanilla JavaScript, frameworks zoals Vue of React, of een combinatie, de LazyModule is flexibel inzetbaar.
Wat kun je verwachten in dit artikel?
Installatie
Stap voor stap uitleg over het installeren en configureren van de lazy module in je project.
Koppelen
Hoe je modules koppelt om ze goed te laten functioneren binnen je applicatie.
Lifecycles
Modules doorlopen lifecycle fasen van none tot unmounted. We laten zien hoe je hierop kunt inhaken met TailwindCSS.
Best Practices
Tips voor optimaal gebruik van de module, inclusief preload en interactie-observatie plugins.
Edge Cases
Veelvoorkomende problemen en hoe je ze kunt voorkomen bij het gebruik van de lazy module.
Voordelen
Snellere laadtijden en een betere gebruikerservaring door het laadproces te optimaliseren.
Let's get started: Installatie en setup
Installeer de package via npm of yarn:
npm install @cube-nl/lazymodule
# of
yarn add @cube-nl/lazymodule
Voeg dan dit toe aan je tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"types": ["vite/client"]
}
}
Je eerste lazy module
Start met het aanmaken van de lazy loader:
import { createLazyLoader } from '@cube-nl/lazymodule';
createLazyLoader({
modules: import.meta.glob('./lazymodules/**/*.ts'),
}).start();
Plaats in de HTML een element met een data-lazy-module attribute, de waarde moet overeenkomen met de bestandsnaam van de lazy module:
<button data-lazy-module="counter">0</ button>
Voorbeeld module (lazymodules/counter.ts):
import type { LazyModule } from '@cube-nl/lazymodule';
export default class Counter implements LazyModule {
private value: number = 0;
constructor(public element: HTMLElement) {}
private increment() {
this.element.textContent = `${++this.value}`;
}
public *onMount() {
this.element.addEventListener('click', this.increment);
console.log('mounted');
}
public onUnmount(wasMounted: boolean) {
this.element.removeEventListener('click', this.increment);
console.log('unmounted');
}
}
Aanvullende first party plugins
preloadModules
Laadt modules alvast "stilletjes" op de achtergrond met een lage prioriteit. Zodra een data-lazy-module in de DOM verschijnt en de module is al gepreload word deze vanuit het geheugen geladen.
import { preloadModules } from '@cube-nl/lazymodule/plugins';
createLazyLoader({...})
.use(preloadModules)
.start();
observeInsertions
Houdt de DOM in de gaten voor dynamisch toegevoegde data-lazy-module elementen. Perfect voor content met data-lazy-module attributen die via JavaScript wordt aangemaakt.
import { observeInsertions } from '@cube-nl/lazymodule/plugins';
createLazyLoader({...})
.use(observeInsertions)
.start();
observeInteractions
Stel je hebt een 'Like'-knop in je DOM, maar de click logica wordt pas geladen als de knop in beeld komt. Met observeInteractions mist de gebruiker die eerste klik niet. De lazy module onthoudt de interactie en speelt ’m netjes af zodra de module klaar is
HTML:
<div data-lazy-module="like">
<button data-lazy-interact="click">Like</button>
</div>
JavaScript:
import { observeInteractions } from '@cube-nl/lazymodule/plugins';
createLazyLoader({...})
.use(observeInteractions)
.start();
Lifecycle
Elke module doorloopt deze fases:
none – module is nog niet geladen
loading – module wordt opgehaald
mounting – initialisatie vindt plaats
mounted – module is actief
unmounted – module is verwijderd of gedeactiveerd
Inhaken op een lifecycle fase
De lifecycle fase van een lazy module wordt bijgehouden op een data-lazy-state attribute van een lazy element. Doordat we de lifecycle fase daar in opslaan kunnen we voor en tijdens het laden van de lazy module styling toepassen. Een voorbeeld met TailwindCSS:
<div data-lazy-modue="posts" class="bg-red-500 group data-[lazy-state=loading]:animate-pulse">
<div class="hidden group-data-[lazy-state=loading]:block">
Loading
</div>
<div class="hidden group-data-[lazy-state=mounted]:block">
Mounted
</div>
</div>
Van theorie naar praktijk: de impact van de LazyModule.
Door modules pas te laden bij zichtbaarheid of interactie, verlaag je de initiële belasting op de browser en versnel je de laadtijd, terwijl gebruikers een soepelere ervaring krijgen zonder dat je extra complexe logica hoeft te schrijven.
Bij Cube passen we de LazyModule inmiddels standaard toe in bijna al onze productieprojecten, van grote webapplicaties tot dynamische contentplatforms. We zien elke keer opnieuw dat het een duidelijk verschil maakt: kortere laadtijden, minder dataverbruik, stabielere prestaties en hogere gebruikerstevredenheid. Zeker in projecten waarbij schaalbaarheid, mobiele performance of dynamische content belangrijk zijn, is lazy loading een praktische en waardevolle optimalisatie.
👉 Meer weten of bijdragen? Bekijk de package op npm of check de broncode op GitHub.
Klaar voor de volgende stap? Wij ook.
Heb je vragen over het inzetten van de LazyModule in jouw project of twijfel je of lazy loading de juiste oplossing is? Deel je ervaringen of suggesties. We helpen je graag verder.