JavaScript Minifier & Formatter

Wat is deze tool?

Een JavaScript-minifier herschrijft code om zo klein mogelijk te zijn terwijl het gedrag identiek blijft: het verkort variabele- en functienamen waar dat veilig is, verwijdert commentaar en witruimte, vouwt constanten samen, en elimineert onbereikbare code.

Deze tool is gebouwd op Terser, de AST-gebaseerde minifier die door webpack, Vite, Rollup en de meeste moderne JavaScript-buildtools wordt gebruikt. Omdat het je code daadwerkelijk ontleedt in plaats van tekst te matchen, onderscheidt het correct een deeloperator van een regex-literal, breekt het geen template strings die op //-lijkende reeksen lijken, en hernoemt het geen variabele naar een naam die botst met iets in een buitenste scope.

Waarom gebruiken?

• AST-gebaseerde minificatie (Terser), dezelfde engine die door grote bundlers wordt gebruikt — veilig met regex-literals, template strings en closures.
• Verkort variabelenamen voor echte grootte-besparing, niet alleen witruimte verwijderen.
• Zie precies hoeveel bytes en welk percentage je hebt bespaard.
• Formatteermodus zet geobfusceerde, eenregelige geminifieerde JS terug om in leesbare, ingesprongen code — handig om scripts van derden te begrijpen.
• 100% lokale verwerking — eigen code verlaat nooit je browser.

Hoe te gebruiken

1. Plak je JavaScript in het invoervak, of klik op "Voorbeeld laden" om een voorbeeld met een regex-literal en een template string te proberen.
2. Klik op "Minify" om te comprimeren, of "Formatteren" om leesbaar te maken met 2-spatie-inspringing.
3. Bekijk het bericht onder de vakken — minifymodus toont de grootte-reductie; een syntaxfout in je code toont een duidelijke melding in plaats van stilletjes kapotte uitvoer te produceren.
4. Klik op "Kopiëren" om het resultaat te pakken.

Voorbeeld

Invoer

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Uitvoer

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Variabelenamen worden verkort, het commentaar en de if-statement worden samengevoegd tot een expressie, maar de regex-literal en template string blijven exact behouden en het gedrag verandert niet.

Praktische tips

• Minifieer tijdens het bouwen, niet handmatig — houd leesbare broncode onder versiebeheer en genereer de geminifieerde bundel als buildstap.
• Als geminifieerde uitvoer zich onverwacht gedraagt, controleer op code die afhankelijk is van Function.prototype.name of reflectie — het hernoemen kan in zeldzame gevallen problemen veroorzaken.
• Een script van derden formatteren voordat je het leest, is veel sneller dan proberen een enkele regel van 2.000 tekens te ontleden.
• Combineer met de HTML- en CSS-minifiers hieronder als je een volledige statische bundel voor implementatie voorbereidt.

Waar dit past in echte workflows

JavaScript is meestal het grootste render-blokkerende of parse-blokkerende asset op een pagina, dus het minifiëren ervan heeft een echt, meetbaar effect op de laadtijd — meer dan HTML of CSS byte voor byte. De meeste moderne frameworks doen dit automatisch tijdens het bouwen, maar handgeschreven scripts, browserextensies en bookmarklets worden vaak ongeminifieerd verzonden, tenzij iemand ze door een tool zoals deze haalt.

De Formatteer-richting wordt net zo vaak andersom gebruikt: een productiefout debuggen vanuit een geminifieerde stacktrace gaat veel makkelijker zodra de omringende code opnieuw geformatteerd en leesbaar is, zelfs zonder de originele variabelenamen.

→ HTML Minifier · CSS Minifier

Veelvoorkomende toepassingen

• Een op zichzelf staand script of bookmarklet verkleinen voordat je het publiceert.
• Een geminifieerd script van een live site herformatteren om te begrijpen wat het doet.
• JavaScript opschonen dat is geplakt vanuit een forumpost of AI-gegenereerd fragment voordat je het zorgvuldig doorleest.
• Snel controleren of een handgeschreven JS-fragment een syntaxfout heeft, aangezien een parsefout als expliciete melding naar voren komt.

Veelgestelde vragen