JS minificator

De JS minificator is een gratis tool die overbodige tekens uit JavaScript verwijdert en het aantal tekens voor en na minificatie weergeeft.

Welk probleem lost JavaScript-minificatie op?

Door JavaScript te minificeren, hoeft de browser minder broncode te downloaden. Daarbij verdwijnt doorgaans opmaak die niet nodig is voor de JavaScript-syntaxis, zoals inspringing, regeleinden en spaties.

Een kleiner script kan de overdrachtsgrootte en de hoeveelheid parseerwerk beperken, vooral als een site meerdere grote bundels gebruikt. HTTP-compressie zoals Brotli of gzip blijft belangrijk, omdat minificatie en overdrachtscompressie verschillende delen van het probleem aanpakken. Minificatie verwijdert tekens uit de broncode, terwijl compressie herhaalde gegevens tijdens de overdracht compacter codeert.

Minificatie gebeurt meestal tijdens het buildproces vóór implementatie. Het kan ook nuttig zijn om een niet-geminificeerd script van derden te controleren, bundelgroottes te vergelijken of een los bestand voor te bereiden voor een site zonder buildpipeline.

Een geslaagde minificatie bewijst niet dat de JavaScript correct werkt. Een script kan zonder problemen worden geminificeerd en toch onjuiste API-aanroepen, niet-toegankelijke variabelen of code bevatten die pas tijdens de uitvoering fouten veroorzaakt.

Hoe gebruik ik de JS minificator?

Plak de JavaScript in het veld JS, voer de tool uit en kopieer vervolgens de waarde uit Geminificeerde JS. Bewaar het oorspronkelijke bronbestand in versiebeheer en implementeer de compacte kopie, in plaats van de leesbare broncode te vervangen.

1. Voer eerst een syntaxiscontrole, linter en geautomatiseerde tests uit op de broncode.
2. Plak het volledige script in JS, inclusief eventuele module-imports of wrapperfuncties die bij het bestand horen.
3. Vergelijk JS-tekens en Geminificeerde JS-tekens om te zien hoe het aantal tekens is veranderd.
4. Test of de geminificeerde JavaScript correct wordt uitgevoerd in dezelfde browser en implementatiecontext als het productiebestand.
5. Gebruik een herkenbare bestandsnaam, zoals app.min.js, als je de geminificeerde en leesbare versies naast elkaar bewaart.

De verwerking vindt plaats op de server. Je invoer wordt via HTTPS naar de server verzonden en niet opgeslagen. De server moet de JavaScript wel ontvangen om deze te kunnen verwerken. Dien daarom geen broncode in die je organisatie niet naar een externe dienst mag sturen.

Wat bevat het geminificeerde resultaat?

Het resultaat bevat de compacte JavaScript en twee aantallen tekens. JS-tekens is de lengte van de invoer, terwijl Geminificeerde JS-tekens de lengte aangeeft van de geretourneerde Geminificeerde JS.

De aantallen worden berekend met de PHP-functie mb_strlen. Die meet de lengte van een multibyte-tekenreeks en geeft dus niet simpelweg het aantal bytes door. Het aantal tekens is daarom niet gelijk aan de uiteindelijke overdrachtsgrootte via het netwerk. UTF-8-tekens kunnen uit meer dan één byte bestaan, en gzip of Brotli kan het verzonden bestand nog verder verkleinen.

Deze tool geeft geen afzonderlijk veld voor validatie of diagnostiek. Verwacht dus niet dat elke ontbrekende accolade, ongeldige reguliere expressie of niet-ondersteunde taalfunctie wordt herkend. Vooral fouten die met JSON worden geassocieerd, zoals eigenschapsnamen zonder aanhalingstekens of afsluitende komma's, zijn geen betrouwbare controles voor JavaScript. De syntaxis van JavaScript-objectliteralen verschilt namelijk van die van JSON. Gebruik de JSON-validator & -verfraaier voor JSON-gegevens.

Kleine voorbeelden en lastige invoer

Een eenvoudige aanpassing van spaties kan er als volgt uitzien.

Invoer

function add(a, b) { return a + b; }

Compacte vorm

function add(a,b){return a+b;}

Ook de opmaak rond een object kan worden verwijderd zonder de waarden van de eigenschappen te wijzigen.

Invoer

const settings = { theme: "dark", retries: 2 };

Compacte vorm

const settings={theme:"dark",retries:2};

De exacte opmaak kan per minificator verschillen, vooral bij optionele puntkomma's. Je kunt JavaScript niet veilig compacter maken door simpelweg elke spatie en elk regeleinde te verwijderen. Veilige minificatie moet rekening houden met de lexicale en syntactische context, zodat opmaak wordt onderscheiden van tekens die invloed hebben op het programma.

• Spaties in tekenreeksen zijn gegevens. De spatie in "Newcastle upon Tyne" moet behouden blijven.
• Leestekens kunnen deel uitmaken van de syntaxis. Als je de spatie uit a + +b verwijdert, kan er een andere reeks tokens ontstaan.
• Regeleinden hebben soms invloed op het automatisch invoegen van puntkomma's, onder meer in code na return, break of continue. Direct na throw is een regeleinde niet toegestaan, omdat de bijbehorende expressie op dezelfde regel moet beginnen.
• Tekens met accenten en niet-Latijnse tekens kunnen voorkomen in tekenreeksen en, waar de regels voor JavaScript-identificatoren dit toestaan, in identificatoren. Het aantal bytes kan afwijken van het aantal tekens.
• Getallen zijn tokens in de broncode, geen instructies voor het tellen van tekens. Een minificator moet hun numerieke betekenis behouden, ook als die een kortere, gelijkwaardige notatie kiest.

Wanneer is JavaScript minificeren niet de moeite waard?

Opnieuw minificeren is meestal niet zinvol als een bestand al geminificeerd is. Een tweede bewerking levert mogelijk weinig of geen besparing op, terwijl de builduitvoer moeilijker te herleiden wordt en bestaande source maps verstoord kunnen raken.

Het heeft ook weinig nut om JavaScript die alleen door een machine wordt gelezen eerst netjes op te maken en daarna weer te minificeren. Bewaar leesbare broncode voor onderhoud en genereer daaruit de bestanden voor implementatie. Voor een bestaande applicatie is een buildtool zoals esbuild, Rollup of webpack doorgaans geschikter, omdat die het bundelen van modules en het genereren van source maps kan automatiseren. Minificatie kan ingebouwd zijn of via configuratie of een plug-in worden toegevoegd. Terser is een specifieke minificator.

Beschouw minificatie niet als versluiering of toegangscontrole. Functie- en variabelenamen kunnen zichtbaar blijven, tekenreeksliteralen zijn nog steeds leesbaar en ontwikkelaarstools in browsers kunnen compacte code opnieuw opmaken. Geheimen, privésleutels en bevoorrechte inloggegevens mogen nooit in JavaScript aan de clientzijde worden opgenomen.

Als je alle statische bestanden van een pagina voorbereidt, kunnen de CSS-minificator en HTML-minificator dezelfde bewerking op de bijbehorende formaten toepassen. Gebruik voor elk formaat de eigen tool, omdat de regels voor parsing en witruimte verschillen.

Veelgestelde vragen

Maakt de tool ook een source map?

Er wordt geen source-mapveld geretourneerd. Als je stacktraces uit productie aan de oorspronkelijke bestanden wilt koppelen, genereer dan het geminificeerde script en het bijbehorende .map-bestand binnen hetzelfde buildproces. Een source map uit een andere build kan misleidende verwijzingen naar regels en kolommen opleveren.

Voorkomt minificatie dat anderen mijn JavaScript kopiëren?

Nee. Browsers moeten uitvoerbare code voor de client ontvangen, waardoor een bezoeker die code kan downloaden en bekijken. Minificatie maakt de broncode minder leesbaar, maar biedt geen vertrouwelijkheid, handhaving van licenties of betekenisvolle bescherming voor ingesloten geheimen.

Kan ik code met API-sleutels plakken?

Plak geen geheime API-sleutels, tokens of privé-inloggegevens. De invoer wordt via HTTPS verzonden en niet opgeslagen, maar de verwerking vindt wel op de server plaats. Openbare browsersleutels die bewust aan iedere bezoeker worden verstrekt, moeten nog steeds worden beperkt op basis van domein, herkomst, quota of machtigingen, voor zover de betreffende dienst dat ondersteunt.

Zorgt een lager aantal tekens altijd voor een snellere pagina?

Nee. Het effect hangt af van de oorspronkelijke bestandsgrootte, caching, de verbindingsomstandigheden, servercompressie en de hoeveelheid JavaScript die de browser moet parsen en uitvoeren. Controleer naast het totale aantal tekens ook de gecomprimeerde overdrachtsgrootte en het gedrag tijdens de uitvoering.

Moet ik na het minificeren de extensie .js behouden?

Ja. Geminificeerde JavaScript behoudt normaal gesproken de extensie .js. Als beide versies aanwezig zijn, wordt .min.js vaak als naamgevingsconventie gebruikt. Controleer vóór de implementatie of de server een geschikt JavaScript-contenttype verstuurt en of de HTML- of module-import naar het bedoelde bestand verwijst.