Naar inhoud springen
🛠️
Whiz Tools

JavaScript Minifier - Gratis Online JS Code Optimizer

Gratis JavaScript minifier-tool om codegrootte te verkleinen door witruimte en commentaar te verwijderen. Optimaliseer JS-bestanden direct zonder installatie.

JavaScript Minifier

Over deze tool

Deze eenvoudige JavaScript-minifier verwijdert onnodige witruimte en commentaar om de grootte van uw code te verkleinen. Het behoudt de functionaliteit terwijl uw code compacter wordt.

  • Verwijdert onnodige witruimte (spaties, tabs, regeleinden)
  • Verwijdert commentaar (zowel enkele regel als meerdere regels)
  • Behoudt string-letterlijke waarden en reguliere expressies
  • Behoudt codefunctionaliteit
Laadcalculator...
📚

Documentatie

Wat is een JavaScript-minifier?

Een JavaScript-minifier is een hulpprogramma dat JavaScript-broncode verkleint door tekens te verwijderen die een browser niet nodig heeft om de code uit te voeren, zoals extra spaties, regeleinden en opmerkingen. Na minificatie doet de code precies hetzelfde. Alleen de bestandsgrootte verandert.

Kleinere JavaScript-bestanden worden sneller gedownload en geladen. Daarom is minificatie een gebruikelijke stap voordat een website live gaat.

Hoe JavaScript-minificatie werkt

Dit hulpprogramma leest de code teken voor teken en bouwt deze opnieuw op. Alles wat lezers nodig hebben maar de JavaScript-engine niet, wordt weggelaten. Het verwijdert:

  • Opmerkingen, zowel // single-line-opmerkingen als /* multi-line */-opmerkingen, waaronder opmerkingen in JSDoc-stijl.
  • Extra spaties, tabs en lege regels die alleen dienen om de code beter leesbaar te maken.

Het voegt niets anders toe en verwijdert niets anders. Het verwijdert nooit een puntkomma, haakje of ander teken dat al in de code stond, en voegt nooit nieuwe interpunctie in. Het laat ook verschillende andere zaken ongemoeid:

  • Tekst binnen tekenreeksen ("like this", 'like this') en template-literalen (`like this`), zelfs als die tekst spaties bevat of eruitziet als een opmerking.
  • Reguliere-expressieliteralen, zoals /[a-z]+/g, samen met al hun vlaggen: d, g, i, m, s, u, v en y.
  • Elke puntkomma, komma en elk haakje dat al in de oorspronkelijke code stond.

Soms kan een spatie tussen twee tokens niet worden verwijderd zonder hun betekenis te veranderen. return a kan niet worden omgezet in returna, omdat dat als één woord zou worden gelezen. Hetzelfde geldt voor namen met letters buiten het Engelse alfabet, dus typeof π behoudt zijn spatie. Wanneer het verwijderen van een spatie twee tokens aan elkaar zou lassen, laat het hulpprogramma één spatie staan.

Ook een regeleinde kan van belang zijn. JavaScript voegt soms automatisch een puntkomma toe aan het einde van een regel; deze regel heet Automatic Semicolon Insertion. Als het verwijderen van een regeleinde die regel zou activeren of verhinderen, of als het regeleinde volgt op een sluitende accolade }, laat het hulpprogramma daar één nieuwe regel staan. Daarom wordt geminificeerde code niet altijd op één regel samengeperst: sommige regeleinden veranderen de betekenis van de code en moeten behouden blijven.

Deze JavaScript-minifier gebruiken

  1. Plak JavaScript-code in het invoervak.
  2. Selecteer "Minify".
  3. Lees het resultaat in het uitvoervak, samen met de oorspronkelijke grootte, de geminificeerde grootte en het reductiepercentage.
  4. Selecteer "Copy" om de geminificeerde code te kopiëren.

De minificatie wordt uitgevoerd in het browsertabblad, dus de code wordt nergens naartoe geüpload om te worden verwerkt. Het hulpprogramma kopieert de geplakte code ook naar het pagina-adres, zodat een resultaat eenvoudig kan worden opgeslagen als bladwijzer of gedeeld. Iedereen die dat adres kan zien, kan daardoor ook de code zien.

Voorbeeld: een functie minificeren

Voor:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Na:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Alle drie de opmerkingen verdwijnen en de inspringing wordt verwijderd. De puntkomma na a+b blijft staan, omdat het hulpprogramma nooit een puntkomma verwijdert die al aanwezig was. Het regeleinde vóór const blijft ook staan, omdat het volgt op een sluitende }.

Voorbeeld: een klasse minificeren

Voor:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Na:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Merk op dat vóór elke methode en vóór de sluitende } van de klasse een regeleinde blijft staan. Elk van die regeleinden volgt in de oorspronkelijke code op een sluitende }. Daarom laat de regel die Automatic Semicolon Insertion beschermt ze staan. Ook de puntkomma's binnen elke methode blijven staan.

Formule voor de verkleining

Het hulpprogramma vermeldt onder het uitvoervak drie getallen: de oorspronkelijke grootte, de geminificeerde grootte en de verkleining. Alle grootten zijn aantallen tekens, geen bytes. De verkleining is een percentage, afgerond op het dichtstbijzijnde gehele getal:

1reduction = round((1 - minified characters / original characters) x 100)
2

Het bovenstaande functievoorbeeld bevat vóór de minificatie 213 tekens en daarna 103. Dus 1–103 / 213 = 0,5164, oftewel 51,64%, en het hulpprogramma geeft 52% weer. Het klassevoorbeeld gaat van 515 tekens naar 304, wat 40,97% is; weergegeven wordt 41%.

Beperkingen van deze minifier

Dit hulpprogramma verwijdert alleen opmerkingen en witruimte. In tegenstelling tot hulpprogramma's voor bouwstappen, zoals Terser of UglifyJS, hernoemt het geen variabelen, verwijdert het geen ongebruikte code en voegt het geen bestanden samen. Zulke hulpprogramma's leveren meestal kleinere uitvoer op, maar vereisen een bouwproces. Dit hulpprogramma werkt onmiddellijk in de browser zonder configuratie en is daarom geschikt voor snelle controles of kleine codefragmenten, niet voor een volledige productieomgeving.

Veelgestelde vragen

Wat verwijdert een JavaScript-minifier?

Het verwijdert opmerkingen en witruimte die niet nodig zijn om de code uit te voeren. Het verwijdert geen puntkomma's, haakjes of andere tekens die al deel uitmaakten van de code.

Verandert minificatie van JavaScript de manier waarop het wordt uitgevoerd?

Nee. Geminificeerde code hoort dezelfde resultaten op te leveren als de oorspronkelijke code. Alleen de opmaak verandert.

Waarom bevat geminificeerde code soms nog regeleinden?

Een regeleinde kan vereist zijn door de Automatic Semicolon Insertion-regel van JavaScript, of het kan volgen op een sluitende accolade }. Het verwijderen ervan kan veranderen wat de code doet. Daarom laat het hulpprogramma op die plaatsen één nieuwe regel staan in plaats van die te verwijderen.

Is minificatie hetzelfde als compressie?

Nee. Minificatie verwijdert tekens uit de broncode zelf. Compressie, zoals gzip of Brotli, codeert het bestand op een andere manier voor overdracht via een netwerk. Websites gebruiken beide vaak samen.

Wordt mijn code naar een server verzonden?

De minifier zelf draait volledig in het browsertabblad en de code wordt niet geüpload om te worden geminificeerd. De geplakte code wordt opgeslagen in het pagina-adres zodat een resultaat kan worden gedeeld of als bladwijzer kan worden opgeslagen. Daardoor verschijnt de code in de adresbalk en in de geschiedenis van de browser.

Kan geminificeerde code worden teruggezet naar het origineel?

Witruimte kan door een codeformatter worden hersteld, maar opmerkingen en de oorspronkelijke namen van variabelen en functies zijn verdwenen, tenzij er een afzonderlijke source map is opgeslagen.

Referenties

  1. MDN Web Docs. "Minification." MDN Glossary, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," sectie 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," sectie 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," sectie 22.2.6, "Properties of the RegExp Prototype Object" (de vlaggenset d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object