Code splitting splitst je JavaScript-bundle op in kleinere stukken die geladne worden op het moment dat ze nodig zijn. Dat verkleint de initiƫle bundlegrootte aanzienlijk. Implementaties zijn route-gebaseerd (per pagina) of component-gebaseerd. Tools als Webpack, Rollup en Vite ondersteunen dit automatisch.
INP
AAA
Performance
Interaction to Next Paint
INP meet de algehele interactiviteitsrespons van een pagina gedurende de volledige levensduur van een bezoek. Het registreert de vertraging bij elke interactie (klik, toets, tap) en rapporteert de slechtste. INP heeft FID vervangen als Core Web Vital voor interactiviteit. Verbeter INP door lange JavaScript-taken op te splitsen, web workers in te zetten en zware event handlers te optimaliseren.
AAA
Performance
Next.js
AA
Frontend
Next JavaScript Framework
Next.js is een React-meta-framework van Vercel met API-routes, bestandsgebaseerde routing en automatische code splitting. Het is eenvoudig om mee te werken voor ontwikkelaars en bevat productie-optimalisaties out-of-the-box. De app router is de nieuwste architectuur en is de standaard voor moderne React-apps.
AA
Frontend
TTI
AAA
Performance
Time to Interactive
TTI is het moment waarop de pagina helemaal werkt en snel reageert. Je verbetert dit door minder JavaScript te gebruiken, door code splitting, door web workers in te zetten en belangrijke onderdelen eerst te laden.
AAA
Performance
Webpack
AA
Tools
Webpack
Webpack is een krachtige modulebundler die JavaScript, CSS, afbeeldingen en andere assets analyseert, transformeert en bundelt. Het ondersteunt code splitting, tree shaking, loaders en plugins. De configuratie is complex, maar erg flexibel. Vite is een modern en sneller alternatief.
AA
Tools
Een uitgebreide collectie begrippen voor elk niveau
Van HTML & CSS tot databases en security
Geschikt voor beginners en gevorderden
Ideaal als lesmateriaal of teambuilding tool
Fysiek aan de slag, zonder scherm