Softonic

JavaScript-minifier

Stap 1 / 3
Volgende

Plak JavaScript en krijg een geminificeerde versie die 40–70% kleiner is: witruimte verwijderd, variabelen ingekort tot één letter, dode takken geschrapt, constanten gevouwen en (als je dat inschakelt) commentaar verwijderd. Handig voor snelle groottecontroles, eenmalige integraties en landingspagina’s waar je geen volledige build-toolchain draait.

Hoe je JavaScript minimaliseert

  1. 1

    Plak de bron

    Elke geldige JavaScript-code voor ES5+ is toegestaan. Voor ES6 en latere versies (template-literals, klassen, modules) moet de doelcode compatibel zijn.

  2. 2

    Kies de minificatiesterkte

    Veilig (witruimte + commentaar); standaard (+ variabelen manglen); agressief (+ eigenschapsnamen manglen, kan DOM-toegang breken).

  3. 3

    Verklein

    De tool voert een met Terser compatibele transformatie uit en geeft het resultaat weer, met het aantal bytes voor en na.

  4. 4

    Kopieer of download

    Plak het resultaat in een `<script>`-tag of sla het op als een `.min.js` voor servering via uw CDN.

Waar de bytes naartoe gaan

Een typisch geminificeerd bestand is 40–70% kleiner dan de bron. Het comprimeren met gzip (of Brotli, dat Cloudflare en de meeste CDN’s gebruiken) levert nog eens 60–75% op. Samen kan een bron van 100 KB als ~15–25 KB over de lijn gaan.

Bron Geminificeerd +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Toegepaste technieken

Techniek Wat het doet
Witruimte verwijderen Verwijdert spaties, tabs en nieuwe regels
Commentaar verwijderen Verwijdert // en /* */ (tenzij !important)
Variabelen manglen Hernoemt userName -> u (scope-veilig)
Eigenschappen manglen Hernoemt obj.foo -> obj.a (ONVEILIG)
Constanten vouwen 1 + 2 + 3 → 6
Dode code verwijderen Verwijdert takken na return
Control-flow inlinen Lijnt kleine functies in die maar één keer worden gebruikt
String-literals comprimeren Voegt herhaalde string-constanten samen

Veilige versus agressieve modus

  • Veilig behoudt variabelennamen en verwijdert alleen witruimte. Goed voor debuggen, wanneer je leesbare stacktraces wilt.
  • Standaard manglet lokale variabelen, maar behoudt globale namen en eigenschapsnamen. Werkt met de meeste code.
  • Agressief manglet alles, inclusief eigenschapsnamen. Het breekt vaak code die eigenschappen dynamisch benadert (obj["prop"], Object.keys(obj)), tenzij je gereserveerde namen instelt.

Wanneer je wel en niet moet minificeren

  • Minificeer in productie, op elke asset die de browser downloadt.
  • Lever een source map mee, zodat de DevTools van de browser bij het debuggen de oorspronkelijke namen kunnen blijven tonen.
  • Minificeer niet tijdens ontwikkeling, je verspilt buildtijd en verliest leesbare fouten.
  • Minificeer geen al geminificeerde code. .min.js-bestanden krimpen bij herminificatie met circa 1–3%, terwijl je het risico loopt ze te breken.

Veelgemaakte fouten

  • Gereserveerde namen niet instellen. Dynamische eigenschapstoegang (obj["payment_method"]) breekt wanneer payment_method naar a wordt gemanglet.
  • Source maps vergeten. Zonder .map-bestanden zijn productiefouten onleesbaar.
  • CommonJS en ESM samen minificeren. Gemengde modulesystemen vereisen zorgvuldige tree-shaking vóór de minificatie.

Veelgestelde vragen

Meestal 40–70% kleiner ongecomprimeerd, en nog eens 60–75% kleiner wanneer het met gzip of Brotli wordt gecomprimeerd. Een bron van 100 KB gaat vaak als ~15–25 KB over de lijn.

Standaard manglen (van lokale variabelen) is bijna altijd veilig. Agressief manglen van eigenschapsnamen breekt alle code die eigenschappen dynamisch benadert. Stel de lijst reserved zorgvuldig in voordat je het inschakelt.

Ja, schakel ‘Source map genereren’ in en de tool retourneert de geminificeerde code plus een .map-bestand dat elke byte terugkoppelt aan de oorspronkelijke bron. Upload beide naar je CDN zodat de DevTools leesbare stacktraces kunnen tonen.

Ja, top-level await, klassevelden, private methoden, nullish coalescing, optional chaining en numerieke scheidingstekens worden allemaal ondersteund. Voor zeer nieuwe voorstellen (decorators stage-3) controleer je de specifieke flag.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

Changelog-generator

Maak een markdown-sectie in Keep a Changelog-stijl op basis van gecategoriseerde items. Plak de items onder Added, Changed, Fixed en Removed, kies Markdown of platte tekst en kopieer de uitvoer.

Tool beschikbaar in andere talen