JavaScript formatteren en minifyen

Zo formatteer of minify je JavaScript

1. Plak je code, of klik op Bestand openen om een .js-, .mjs- of .jsx-bestand te laden (maximaal 10 MB).
2. Kies de Inspringing en vink Accolades op een eigen regel aan als je de Allman-stijl verkiest.
3. Klik op Formatteren (beautify) om de code leesbaar te maken.
4. Wil je hem verkleinen, stel dan de Minify-opties in en klik op Minifyen. Wil je alleen fouten zoeken, klik dan op Syntaxis controleren.
5. Kopieer of download het resultaat. De statusregel toont de grootte voor en na, en het percentage dat je bespaart.

De code wordt alleen gelezen en omgezet, nooit uitgevoerd: niets wat je plakt wordt op deze pagina gedraaid.

Formatteren met js-beautify

Formatteren (beautify) gebruikt js-beautify. Het zet één statement per regel, laat blokken inspringen, zet spaties rond operatoren en na sleutelwoorden, en behoudt maximaal één lege regel waar je er een had. Het begrijpt ook moderne syntaxis (classes, arrow functions, template literals, async/await) en JSX. Het is de snelste manier om een geminifyde bibliotheek of een fragment van één regel van een webpagina te lezen.

Formatteren verandert alleen witruimte. Het controleert niet of de code geldig is: een ontbrekend haakje levert gewoon vreemde inspringing op. Gebruik daarvoor Syntaxis controleren.

Minifyen met Terser

Minifyen gebruikt Terser, de minifier van de meeste JavaScript-buildtools. Omdat hij groot is, wordt hij pas gedownload als je voor het eerst op Minifyen of Syntaxis controleren klikt. De opties komen rechtstreeks overeen met instellingen van Terser:

• ES-module (import/export) parset de code als module (module: true): strict mode geldt en namen op het hoogste niveau zijn privé, zodat ze kunnen worden hernoemd en ongebruikte namen kunnen worden verwijderd. Laat het uit voor een klassiek script waarvan andere scripts de globale functies gebruiken.
• Comprimeren (compress) herschrijft de code tot kortere, gelijkwaardige code: constanten uitrekenen (2*60 wordt 120), dode code verwijderen, var-declaraties samenvoegen, kortere voorwaarden.
• Variabelenamen inkorten (mangle) hernoemt lokale variabelen en parameters naar een of twee letters. Globale namen en objecteigenschappen worden nooit hernoemd.
• Licentiecommentaar behouden bewaart commentaar dat begint met /*! of @license of @preserve bevat. Al het andere commentaar wordt verwijderd.

Minifyen verandert niet wat de code doet, maar code die leunt op functienamen (fn.name) of op eval kan zich na het hernoemen anders gedragen. Vink in dat geval Variabelenamen inkorten uit.

Syntaxfouten met regel en kolom

Kan Terser de code niet parsen, dan tonen Minifyen en Syntaxis controleren de foutmelding met regel en kolom, bijvoorbeeld “Regel 12, kolom 8 – Syntaxfout: Unexpected token punc «)»”. De melding van Terser zelf is in het Engels. De kolom telt tekens vanaf 1. Een veelvoorkomende oorzaak is een ontbrekend haakje eerder in het bestand, dus kijk ook naar de regels vlak voor de gemelde positie.