Overzicht / Ontwikkelaars en code / Code-minimaliseerder
Ontwikkelaars en code 100% in de browser en offline

Code-minimaliseerder

Minimaliseer JavaScript met Terser en CSS met csso in je browser, met besparing in bytes en gzip.

Plak of typ je invoer; het resultaat verschijnt direct en fouten staan onder het invoerveld. De velden bevatten een voorbeeld: klik op een veld en typ om het te vervangen.

Je bestanden en invoer verlaten je browser nooit – er wordt niets geüpload.

Opties

Namen op het hoogste niveau blijven zoals ze zijn, tenzij je het verhaspelen op het hoogste niveau aanzet. Die optie kan scripts breken die elkaar over bestanden heen aanroepen of globale variabelen uit HTML gebruiken. Licentieopmerkingen zijn die met /*! of met @license of @preserve. Het doel bepaalt de nieuwste syntaxis die Terser mag schrijven. Console-aanroepen en debugger-instructies weglaten vereist "Code comprimeren".

Limieten: 2.000.000 tekens. Groottes zijn UTF-8-bytes. De gzip-regel verschijnt alleen als je browser CompressionStream heeft. HTML wordt niet geminimaliseerd. Minimaliseren wijzigt de code, dus test het resultaat voordat je het uitrolt. Je code wordt in deze pagina verwerkt en nergens naartoe gestuurd.

Minimaliseer een script van 40 KB met de hand en je stopt na het eerste opmerkingenblok. Een code-minimaliseerder doet het in één keer: hij verwijdert witruimte en opmerkingen, verkort lokale namen en herschrijft expressies in kortere vormen. Deze verwerkt JavaScript (met Terser) en CSS (met csso) en toont het resultaat naast je invoer terwijl je typt.

Een script minimaliseren, stap voor stap

  1. Kies bovenaan JavaScript of CSS. Het invoervak vult zich met een kort voorbeeld.
  2. Plak je eigen code eroverheen. De uitvoer wordt ongeveer 300 ms nadat je stopt met typen bijgewerkt.
  3. Pas de opties aan. Voor JavaScript zijn dat Code comprimeren, Variabelenamen verhaspelen, Namen op het hoogste niveau verhaspelen, Klasse- en functienamen behouden, console.*-aanroepen weglaten, debugger-instructies weglaten, het ECMAScript-doel en de afhandeling van opmerkingen.
  4. Lees de byteregel onder de vakken en druk op Kopiëren of Downloaden. Het bestand heet script.min.js of styles.min.css.

Welke JavaScript-schakelaars er in de praktijk toe doen

Verhaspelen verkort de namen van lokale variabelen en parameters. cartTotal(items, taxRate) wordt binnen zijn functie zoiets als n(t,o). Namen op het hoogste niveau zijn een ander verhaal. Die blijven standaard onaangeroerd, omdat een ander bestand of een inline onclick ze bij naam kan aanroepen. Zet Namen op het hoogste niveau verhaspelen alleen aan voor volledig op zichzelf staande code, zoals een module die je zelf bundelt.

Het weglaten van console.* verwijdert elke aanroep, ook de aanroepen met een resultaat dat je in een expressie gebruikt. Lees de uitvoer als je op logging vertrouwt. Klasse- en functienamen behouden is belangrijk als je code .name leest of als stacktraces leesbaar moeten blijven.

Wat csso met een stijlblad doet

csso herschrijft margin: 0px 0px 0px 0px naar margin:0, verkort kleuren en verwijdert opmerkingen. Met Regels herstructureren aan voegt hij ook regels samen die declaraties delen: twee selectors met dezelfde color en background-color worden één met komma's gescheiden regel. Dat is voor de meeste bestanden veilig. Als je cascade van de exacte volgorde van regels afhangt, zet je het uit. Aangepaste eigenschappen en @media-blokken blijven op hun plek.

Groottecijfers en waar ze ophouden exact te zijn

De tool telt UTF-8-bytes, niet tekens, dus een bestand vol letters met accenten of emoji wordt gemeten zoals een server het verstuurt. Als je browser CompressionStream heeft, toont een gzip-regel ook beide groottes. Geminimaliseerde code krimpt na gzip vaak minder dan ervoor, omdat gzip herhaalde witruimte al verwijdert.

Invoer is beperkt tot 2.000.000 tekens. Een syntaxisfout in JavaScript toont de regel en kolom. csso daarentegen meldt geen CSS-fouten: een kapotte declaratie kan zonder melding uit de uitvoer verdwijnen. HTML wordt hier niet geminimaliseerd.

Test voordat je uitrolt en wat in je browser blijft

Minimaliseren wijzigt code. De tool belooft geen identiek gedrag voor ongebruikelijke code, dus draai je eigen tests op het geminimaliseerde bestand. Terser en csso draaien in deze pagina. Bij het eerste gebruik wordt het bibliotheekbestand van deze site geladen, wat je in het netwerkpaneel ziet. Daarna verstuurt een knop indrukken niets. Je code wordt niet geüpload en de tool voert hem nooit uit.

Veelgestelde vragen (FAQ)

Alleen als niets buiten het bestand die namen gebruikt. Inline eventhandlers en andere scripts die je functies bij naam aanroepen gaan stuk, daarom staat de optie standaard uit.