Codeminifier

Hoe je dit gebruikt Codeminifier

1. Plak je CSS, JavaScript of HTML.
2. Kies de taal en minificeer.
3. Kopieer het resultaat voor productie.

Wat verdwijnt en wat blijft

Minificeren is een veilige bewerking: de code doet precies hetzelfde.

Weggehaald worden overbodige spaties en regeleinden, commentaar, en de afsluitende puntkomma van een blok waar die gemist kan worden.

In JavaScript worden bovendien de namen van lokale variabelen ingekort, wat de omvang aanzienlijk verder terugbrengt.

Wat nooit verandert is het gedrag: gedraagt de geminificeerde code zich anders, dan zat er iets broos in het origineel — meestal een afhankelijkheid van regeleinden of een automatische puntkomma-invoeging die breekt.

Let wel op: in HTML zijn niet alle spaties weg te halen. Binnen een pre-element, of tussen inline-elementen, is de spatie betekenisvol en verandert het weghalen het beeld.

En in CSS blijft commentaar dat met een bepaalde markering begint meestal staan, omdat daar de licenties in staan die je juridisch moet behouden.

Minificeren is niet comprimeren

Hier speelt een veelvoorkomende verwarring die de moeite is om weg te nemen.

Minificatie verkleint de broncode. Compressie — gzip of brotli — verkleint wat over het netwerk gaat, en die doet de server bij het versturen.

Het zijn verschillende, elkaar aanvullende dingen: je gebruikt ze allebei.

Het interessante detail is dat compressie al een groot deel van de redundantie in spaties wegneemt, waardoor de extra winst van minificeren kleiner is dan het ruwe percentage suggereert.

Toch loont het, vooral in JavaScript, waar het inkorten van namen een reductie oplevert die compressie alleen niet haalt.

Controleer of compressie op je server aanstaat: het is de optimalisatie met de beste verhouding tussen moeite en resultaat, en er zijn nog steeds sites waar het uit staat zonder dat iemand het weet.

Serveer je je bestanden via een contentnetwerk, dan doet dat het meestal voor je, maar controleer dat liever dan het aan te nemen.

Hoe je het goed inricht

Met de hand minificeren en het resultaat plakken is een slechte werkwijze.

Minificatie hoort deel te zijn van je bouwproces, geen handmatige stap. Doe je het met de hand, dan bewerk je vroeg of laat het geminificeerde bestand, en dat is een gegarandeerde bron van problemen.

Houd de broncode altijd in je repository en genereer het geminificeerde bestand bij het uitrollen.

Publiceer bronkaarten zodat je in productie kunt debuggen. Zonder die kaarten vertelt een fout in een geminificeerd bestand je dat er iets misging op regel 1, kolom 8420, en daar heb je niets aan.

Wees voorzichtig met bronkaarten in productie: die stellen je broncode bloot. Veel teams genereren ze wel maar serveren ze alleen aan hun foutregistratiedienst, niet publiek.

En maak er geen obsessie van. Kijk voordat je minificeert of je een hele bibliotheek laadt voor twee functies, of lettertypen die niemand ziet, of niet-geoptimaliseerde afbeeldingen. Daar zit het gewicht meestal.

Alles gebeurt in je browser: de code wordt naar geen enkele server gestuurd, wat telt als je met code van een klant onder geheimhouding werkt.

Veelgestelde vragen