JavaScript minify-en _

Hoe JavaScript-minificatie werkt

Terser werkt in vier fases over de Abstract Syntax Tree van je code. Elke fase is onafhankelijk, zodat je elk ervan aan of uit kunt zetten zonder de andere te breken.

1. Parsen. Terser parseert je JavaScript naar een AST. Elke syntaxisfout verschijnt hier met het token en de regel die de oorzaak is, zodat je het echte probleem vindt vóór elke transformatie wordt uitgevoerd. De parser accepteert alle standaard ECMAScript-constructies tot aan de nieuwste fase-4-voorstellen.
2. Comprimeren. De compressor doorloopt de AST en past tientallen semantiekbesparende transformaties toe: constante vouwing, eliminatie van dode vertakkingen, inlining van korte pure functies, samenvoegen van opeenvolgende var-declaraties en herschrijven van equivalente instructievormen (if/else naar ternaries, vergelijkingsketensverkorting, conditioneel-return-samenvoegen). Elke transformatie is in principe omkeerbaar; de compressor verandert nooit het waarneembare gedrag.
3. Manglen. De mangler hernoemt lokale bindingen naar de kortste unieke identificatoren (a, b, c, …) binnen elk bereik. Alleen namen die de modulegrens niet kunnen overschrijden, worden hernoemd, zodat geëxporteerde bindingen, eigenschapssleutels en globale verwijzingen onberoerd blijven. Het resultaat is de grootste enkele bytebesparing van alle fases.
4. Renderen. Terser drukt de getransformeerde AST terug af naar een JavaScript-string met gecomprimeerde witruimte en instructiescheidingstekens gereduceerd tot het minimum dat de grammatica vereist. Opmerkingen worden verwijderd tenzij de bewaar-licentie-knop /*! … */-blokken bewaart, die de meeste CDN-licenties vereisen te behouden.

Waarom JavaScript minify-en

• Snellere paginalaadtijden. Kleinere scripts worden eerder geparseerd en uitgevoerd. Op een 4G mobiele verbinding scheelt een byteVermindering van 40 procent echte seconden van de Time to Interactive — de metriek die Google's PageSpeed Insights het meest agressief meet.
• Lagere CDN-egress-rekeningen. CloudFront, Cloudflare en Fastly factureren per gigabyte egress. Een scriptvermindering van 40 procent over miljoenen maandelijkse paginaweergaven vertaalt zich in reële besparingen vóór welk beeld- of CSS-werk dan ook. De math klopt zelfs na gzip en brotli — minificatie verwijdert tokens die de compressor anders zou moeten encoderen.
• Deze minifier belast je pagina niet. Terser is ~1 MB ongecomprimeerd. De meeste online minifiers laden de volledige bibliotheek bij het laden van de pagina, wat hun eigen Lighthouse-score kelders en de pagina traag maakt voordat de gebruiker iets typt. Deze pagina laadt Terser lazy — alleen wanneer je op Minify klikt of Live-modus inschakelt — zodat de initiële render onder de Core Web Vitals-drempelwaarden blijft die de tool zelf belooft te helpen halen.
• Core Web Vitals halen. Lighthouse en PageSpeed Insights markeren grote JavaScript als directe bijdrage aan slechte Total Blocking Time. Het minify-en van vendorbibliotheken en applicatiebundels is de snelste winst op de Lighthouse-audits "Verminder ongebruikte JavaScript" en "Verwijder dubbele modules" — doorgaans een eenmalige vermindering van tien of twintig punten.

Veelvoorkomende toepassingen

JavaScript-minificatie duikt op op bijna elk stadium van een modern webproject.

• Pre-commit hooks: individuele hulpscripts minify-en vóór het committen aan een repo zodat het vastgelegde artefact productieklaar is en de diff logische wijzigingen toont in plaats van witruimteruis.
• Audits van widgets van derden: plak een inbedcodefragment van een leverancier en controleer of het al geminifieerd is of verder verkort kan worden vóór het aan miljoenen gebruikers te serveren.
• Opruimen van legacy scripts: comprimeer oude jQuery-plugins en handgeschreven scripts die dateren van vóór je huidige buildpipeline, zonder de bronboom aan te raken.

Een uitgewerkt voorbeeld

Neem een kleine functie: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — circa 130 bytes inclusief de opmerking. Plak hem hierboven met Mangle en Comprimeer beide aan. De uitvoer wordt verkort tot ruwweg function add(n,o){return n+o}console.log(add(1,2)); — circa 55 bytes, een vermindering van 58 procent. De functienaam add blijft omdat hij wordt aangeroepen in de console.log-aanroep; de parameternamen firstNumber en secondNumber krimpen tot enkele letters omdat ze lokaal zijn in de functie. Zet Mangle uit om leesbare parameternamen te behouden terwijl witruimte nog steeds wordt samengevouwen en de opmerking wordt verwijderd.

FAQ

Draait dit in mijn browser?

Ja. Terser wordt lazy geladen de eerste keer dat je op Minify klikt of Live-modus inschakelt — circa 200 KB gecomprimeerd landt in je browsercache, daarna wordt niets meer gedownload. Je code verlaat de pagina nooit.

Wat is naam-mangling en is het veilig?

Mangling hernoemt lokale variabelen naar enkele letters om bytes te besparen. Het is veilig voor op zichzelf staande scripts en IIFE-bundels omdat de hernoemingen het bereik nooit verlaten. Het is NIET veilig voor scripts die globals bij naam blootstellen (bijv. window.myLib = …) zonder een wrapper. Zet Mangle uit als je twijfelt.

Waarom brak mijn code na minificatie?

Drie gebruikelijke verdachten: eval of with die variabelen bij string referenteert; Function.name- of arguments.callee-lezingen die afhankelijk zijn van de originele identificator; of globals die worden blootgesteld via een naam die hernoemd was. Zet Mangle eerst uit om te bepalen of het hernoemen of een Comprimeer-transformatie de oorzaak is.

Ondersteunt dit moderne syntaxis (ES2020+)?

Ja. Stel de ECMAScript-doelversie in op ES2020 of Next en Terser behoudt optionele ketenvorming, nullish coalescing, top-level await en logische-toewijzingsoperatoren. Stel het in op ES5 en Terser compileert naar beneden waar het kan, maar het is geen volledige transpiler — gebruik Babel voor syntaxis die ES5 helemaal niet kan vertegenwoordigen.

Browser-side JavaScript-minificatie met Terser geeft je productiekwaliteit-uitvoer zonder een build-tool toe te voegen. Plak een script, kies de ECMAScript-doelversie, kopieer of download het resultaat. Niets wordt geüpload, geen account, geen buildpipeline. De minifier laadt zichzelf alleen wanneer je erom vraagt — het openen van deze pagina kost je een paar kilobytes, niet een megabyte.