JavaScript Minifier — JavaScript-minifier

Hoe JavaScript-minificatie werkt

Minificatie maakt JavaScript kleiner zonder te veranderen wat het doet. Deze tool gebruikt Terser, een volwassen minifier die je code omzet in een abstracte syntaxboom, die boom bewerkt en de code daarna opnieuw uitschrijft zonder overbodige witruimte en opmerkingen. De stap compress past tientallen optimalisaties toe: onbereikbare code en ongebruikte variabelen worden verwijderd, constanten worden ingevoegd, opeenvolgende variabeledeclaraties worden samengevoegd, if-statements worden waar mogelijk omgezet in kortere voorwaardelijke expressies en eenvoudige constante expressies worden vooraf berekend. Daarna hernoemt de stap mangle lokale variabelen, parameters en functienamen naar één of twee letters. Eigenschapsnamen en globale variabelen blijven ongemoeid, zodat het publieke gedrag van je code hetzelfde blijft.

De groottelabels tonen de UTF-8-grootte in bytes van invoer en uitvoer en het bespaarde percentage. Doorsnee handgeschreven code wordt 40–70% kleiner; code die al compact is of vooral uit lange strings bestaat, krimpt minder. Houd er rekening mee dat servers JavaScript meestal nog eens comprimeren met gzip of Brotli. De werkelijke besparing bij de overdracht is dus kleiner dan het ruwe getal, maar geminificeerde code wordt nog steeds sneller geparsed en kost minder bandbreedte.

De juiste opties kiezen

Het ECMAScript target bepaalt welke syntaxis Terser in de uitvoer mag gebruiken. Met ES2020 kan het arrow functions, optional chaining en andere moderne vormen genereren; met ES5 voegt het geen nieuwere syntaxis toe, al transpileert het moderne code die je zelf hebt geschreven niet – gebruik daarvoor een tool als Babel of esbuild. Keep console.* behoudt logging, handig voor staging-builds. Schakel ES module in voor bestanden die import/export gebruiken; dan kunnen ook namen op het hoogste niveau worden verkort, omdat de scope van een module privé is.

Privé door ontwerp

De minifier wordt pas geladen wanneer dat nodig is en draait lokaal, dus je broncode wordt nooit geüpload. Daardoor is hij geschikt voor snelle eenmalige klussen, zoals het verkleinen van een inline script, een bookmarklet of een snippet voor een tagmanager van derden. Meldt Terser een syntaxfout, dan bevat de melding de regel en kolom zodat je de invoer kunt corrigeren. Houd minificatie voor productiebundels in je build-pipeline, zodat het resultaat reproduceerbaar is, en genereer source maps om te debuggen.