Softonic

JavaScript-minifier

Stap 1 / 3

Plak een script of een ES-module van maximaal 1.000.000 tekens, of open een .js-bestand.

Volgende: opties kiezen

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 /* */ (licentiecommentaar zoals /*! kan behouden blijven)
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
Reeksen en booleans a(); b(); -> a(),b();, true -> !0

Veilige versus agressieve modus

  • Veilig behoudt variabelennamen en verwijdert alleen witruimte en commentaar. 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[key], 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_" + type]) 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. Vink “Ook een source map maken” aan en je krijgt bij de geminificeerde code een .map-bestand. Dat koppelt de geminificeerde code aan je oorspronkelijke regels en namen, zodat de DevTools van de browser leesbare code en stacktraces tonen. Zet beide bestanden in dezelfde map op je server: de geminificeerde code eindigt met een //# sourceMappingURL=-commentaar dat de source map via de bestandsnaam vindt. De source map bevat je originele code, dus publiceer hem alleen waar iedereen die code mag lezen.

Ja. Top-level await (in ES-modules), klassevelden, private methoden, nullish coalescing, optional chaining en numerieke scheidingstekens worden ondersteund. Decorators niet: compileer die eerst naar gewone JavaScript, net als TypeScript of JSX. De minifier zet nieuwere syntaxis nooit om naar een oudere versie: de optie ECMAScript-versie bepaalt alleen welke nieuwste syntaxis de geminificeerde code mag gebruiken om bytes te besparen.

Nee. De code die je plakt of opent, wordt in je browser geminificeerd. Hij wordt niet naar onze servers gestuurd en niet aan de link van de pagina toegevoegd. Tussen de stappen blijft hij in de sessieopslag van dit tabblad, die de browser wist wanneer je het tabblad sluit.

Gerelateerde tools

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 voor gewoon JavaScript, React of Vue: TypeScript, Babel, CSS of Sass, afbeeldingen, HtmlWebpackPlugin, een devserver en de npm install-regel.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

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.

Decimaal naar hexadecimaal converter

Voer een decimaal geheel getal in en ontvang direct de hexadecimale waarde, inclusief negatieve waarden als 64-bits tweecomplement.

Protocol Buffers-decoder

Decodeer Protobuf-bytes lokaal uit hex, Base64, Base64URL, tekst of een bestand, bekijk veldinterpretaties en exporteer een privérapport.

Tool beschikbaar in andere talen