JavaScript Minifier

Plak JavaScript om het met Terser te verkleinen: dode code verdwijnt, namen worden ingekort en witruimte wordt weggehaald. Syntaxfouten wijzen naar de exacte regel en kolom.

Draait in je browserGeen account nodigNiets wordt geüpload

Geminificeerde uitvoer

Zo gebruik je de JavaScript Minifier

  1. Plak je JavaScript of open een .js-bestand.
  2. Kies de opties: Namen inkorten (mangle) verkort lokale variabelen, Comprimeren herschrijft code tot een kleiner equivalent, ES-module staat import/export op topniveau toe.
  3. Kies het ECMAScript-doel dat de browsers van je gebruikers ondersteunen. ES2020 is veilig voor alle evergreen browsers.
  4. Bekijk de grootte, de besparing en de gzip-schatting onder de uitvoer.
  5. Kopieer de geminificeerde code of download die als output.min.js.

Wat doet een JavaScript minifier?

Minificatie maakt JavaScript kleiner zonder te veranderen wat het doet. Deze tool gebruikt Terser, de minifier achter webpack, Vite en Rollup, en past drie soorten wijzigingen toe:

  • Witruimte en commentaar verwijderen: inspringing, regeleinden en commentaar heeft de JavaScript-engine niet nodig.
  • Mangling: namen van lokale variabelen en functieparameters zoals subtotal worden enkele letters. Globale namen en objecteigenschappen blijven onaangeroerd, zodat je publieke API blijft werken.
  • Compressie: constante expressies worden vooraf uitgerekend, onbereikbare code wordt weggelaten, if-statements worden ternaries en korte functies worden ge-inlined.

Minify vs. gzip: heb je beide nodig?

Ja. Gzip en Brotli comprimeren herhaalde bytepatronen tijdens het transport, terwijl minificatie bytes verwijdert die de browser anders zou moeten downloaden, parsen en compileren. Een typisch script wordt 40–60% kleiner door minificatie en daarna nog eens 60–70% door gzip. De gzip-grootte die hier wordt getoond is een goede schatting van wat je server echt verstuurt.

Licentiecommentaar behouden

Veel opensourcelicenties (MIT, BSD, Apache) vereisen dat de copyrightvermelding bij de code blijft. Volgens afspraak blijft commentaar dat begint met /*! of @license of @preserve bevat behouden als Licentiecommentaar behouden aan staat.

Wanneer je niet met de hand minificeert

Gebruikt je project al een bundler, laat die dan productiebuilds minificeren en source maps voor debugging genereren. Een online minifier is ideaal voor losse scripts, snippets voor een CMS of tag manager, bookmarklets en om te kijken hoe klein een stuk code kan worden.

Veelgestelde vragen

Wordt mijn code naar een server geüpload?
Nee. Terser draait in je browsertabblad, dus bedrijfseigen code verlaat nooit je computer.
Kan minificatie mijn code breken?
Terser past alleen transformaties toe die het gedrag van geldige JavaScript identiek houden. Code die afhankelijk is van Function.prototype.toString() of via eval van lokale variabelenamen, kan worden beïnvloed; zet in dat geval Namen inkorten (mangle) uit.
Ondersteunt het moderne syntax zoals async/await, classes en optional chaining?
Ja. Terser parset ES2022+-syntax. De doelinstelling bepaalt alleen welke syntax de uitvoer mag gebruiken; nieuwere features worden niet getranspileerd naar oudere.
Wat is het verschil tussen minify en uglify?
Ze betekenen hetzelfde. UglifyJS was de klassieke tool; Terser is de onderhouden fork ervan met volledige ondersteuning voor ES2015+.

Gerelateerde tools