Code-minifier

Wat is een code-minifier?

Een code-minifier verkleint JavaScript, CSS en HTML door witruimte, commentaar en overbodige tekens te verwijderen zonder de functionaliteit te wijzigen. Dit resulteert in snellere laadtijden en lagere bandbreedtekosten.

Minificatie kan bestanden met 30-70% verkleinen. In combinatie met gzip/brotli-compressie op de server kan de totale besparing oplopen tot 80-90%. Elke kilobyte telt voor Core Web Vitals.

Wat wordt verwijderd?

• Commentaar — zowel single-line (//) als multi-line (/* */) commentaar wordt volledig verwijderd.
• Witruimte — spaties, tabs en regeleinden worden verwijderd of teruggebracht tot het noodzakelijke minimum.
• Optionele tekens — afsluitende puntkomma's, overbodige haakjes en andere syntaxis die talen tolereren maar niet vereisen.

HTML-minificatie

HTML-minificatie verwijdert commentaar (<!-- -->), reduceert witruimte tussen tags en verwijdert onnodige regeleinden en inspringing. Het behoudt inhoud binnen <pre>-, <code>- en <textarea>-tags waar witruimte van belang is. Goed geminimaliseerde HTML kan 10–30% kleiner zijn dan het origineel.

CSS-minificatie

CSS-minificatie verwijdert commentaar (/* */), reduceert witruimte rond selectors en eigenschappen, verwijdert de laatste puntkomma in elk declaratieblok en verkort kleurwaarden (bijvoorbeeld #ffffff wordt #fff). Geavanceerde minifiers voegen ook duplicaatselectors samen en verwijderen overschreven eigenschappen.

JavaScript-minificatie

JavaScript-minificatie verwijdert commentaar, reduceert witruimte en verwijdert onnodige puntkomma's. Geavanceerde minifiers (zoals Terser of esbuild) gaan verder door lokale variabelen te hernoemen tot kortere namen, constanten in te lijnen en dode code te verwijderen. Deze tool voert basale minificatie uit die geschikt is voor snelle taken.

Best practices

Bewaar altijd ongeminimaliseerde broncode in versiebeheer. Bewerk geminimaliseerde bestanden nooit direct — ze zijn vrijwel onleesbaar. Gebruik source maps in ontwikkeling om geminimaliseerde code te debuggen door deze terug te koppelen aan de oorspronkelijke bron. Integreer minificatie voor productiewebsites in uw buildproces zodat het automatisch bij elke deploy gebeurt.

Combineer minificatie met gzip- of Brotli-compressie op uw webserver voor maximale besparingen. Minificatie reduceert de bronomvang en compressiealgoritmen zoals Brotli verkleinen de overdrachtsgrootte met nog eens 60–80%. Samen kan een JavaScript-bestand van 100 KB worden overgedragen als slechts 15–20 KB.

Veelgestelde vragen

Is minificatie hetzelfde als compressie?

Nee. Minificatie verwijdert overbodige tekens uit de broncode (permanent). Compressie (gzip, brotli) codeert de bytes efficiënter voor overdracht (tijdelijk — de browser decomprimeert). Gebruik beide: eerst minificeren, dan compressen. Ze zijn complementair.

Kan geminificeerde code worden teruggedraaid?

Gedeeltelijk. Prettifiers herstellen de opmaak (witruimte, inspringing). Maar ingekorte variabelenamen en verwijderde commentaren zijn onherstelbaar. Zonder source maps is geminificeerde code veel moeilijker te debuggen en te begrijpen.