Spring til indhold
🛠️
Whiz Tools

JavaScript Minifier - Gratis Online JS Kode Optimering

Gratis JavaScript minifier-værktøj til at reducere kodestørrelse ved at fjerne mellemrum og kommentarer. Optimer JS-filer øjeblikkeligt uden installation.

JavaScript Minifier

Om dette værktøj

Denne enkle JavaScript-minifier fjerner unødvendig mellemrum og kommentarer for at reducere størrelsen af din kode. Den bevarer funktionaliteten samtidig med at gøre din kode mere kompakt.

  • Fjerner unødvendigt mellemrum (mellemrum, tabulatorer, linjeskift)
  • Fjerner kommentarer (både enkeltlinjet og flerlinjede)
  • Bevarer strenglitteraler og regulære udtryk
  • Opretholder kodens funktionalitet
Indlæsningsberegner...
📚

Dokumentation

Hvad er en JavaScript-minificeringsværktøj?

Et JavaScript-minificeringsværktøj er et værktøj, der gør JavaScript-kildekode mindre ved at fjerne tegn, som en browser ikke behøver for at køre den, f.eks. ekstra mellemrum, linjeskift og kommentarer. Koden gør stadig præcis det samme efter minificeringen. Det er kun filstørrelsen, der ændres.

Mindre JavaScript-filer downloades og indlæses hurtigere, så minificering er et almindeligt trin, før et websted går i luften.

Sådan fungerer JavaScript-minificering

Dette værktøj læser koden ét tegn ad gangen og opbygger den igen, mens det fjerner alt det, som læsere har brug for, men som JavaScript-motoren ikke har brug for. Det fjerner:

  • Kommentarer, både // single-line-kommentarer og /* multi-line */-kommentarer, herunder kommentarer i JSDoc-stil.
  • Ekstra mellemrum, tabulatorer og tomme linjer, der kun findes for at gøre koden lettere at læse.

Det tilføjer eller fjerner ikke andet. Det sletter aldrig et semikolon, en parentes eller noget andet tegn, der allerede var i koden, og det indsætter aldrig ny tegnsætning. Det lader også flere ting være urørte:

  • Tekst i strenge ("like this", 'like this') og skabelonliteraler (`like this`), selv hvis teksten indeholder mellemrum eller ligner en kommentar.
  • Regulære udtryksliteraler, f.eks. /[a-z]+/g, sammen med alle deres flag: d, g, i, m, s, u, v og y.
  • Hvert semikolon, komma og hver parentes, som den oprindelige kode allerede indeholdt.

Nogle gange kan et mellemrum mellem to tokens ikke fjernes uden at ændre deres betydning. return a kan ikke blive til returna, fordi det ville blive læst som ét ord. Det samme gælder navne, der skrives med bogstaver uden for det engelske alfabet, så typeof π beholder sit mellemrum. Når fjernelse af et mellemrum ville smelte to tokens sammen, beholder værktøjet ét mellemrum.

Et linjeskift kan også have betydning. JavaScript indsætter nogle gange automatisk et semikolon i slutningen af en linje, en regel kaldet Automatic Semicolon Insertion. Hvis sletning af et linjeskift kunne udløse eller forhindre denne regel, eller hvis linjeskiftet følger efter en afsluttende klammeparentes }, beholder værktøjet et enkelt linjeskift dér. Derfor bliver minificeret kode ikke altid presset sammen på én linje: Nogle linjeskift ændrer, hvad koden betyder, og skal blive.

Sådan bruger du dette JavaScript-minificeringsværktøj

  1. Indsæt JavaScript-kode i inputfeltet.
  2. Vælg "Minify".
  3. Læs resultatet i outputfeltet sammen med den oprindelige størrelse, den minificerede størrelse og den procentvise reduktion.
  4. Vælg "Copy" for at kopiere den minificerede kode.

Minificeringen kører i browserfanen, så koden uploades ikke noget sted for at blive behandlet. Værktøjet kopierer også den indsatte kode ind i sidens adresse, hvilket gør et resultat nemt at bogmærke eller dele. Alle, der kan se adressen, kan derfor se koden.

Eksempel: minificering af en funktion

Før:

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

Efter:

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

Alle tre kommentarer forsvinder, og indrykningen er væk. Semikolonet efter a+b bliver, fordi værktøjet aldrig sletter et semikolon, der allerede var der. Linjeskiftet før const bliver også, fordi det følger efter en afsluttende }.

Eksempel: minificering af en klasse

Før:

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

Efter:

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

Bemærk, at der bliver et linjeskift før hver metode og før klassens afsluttende }. Hvert af disse linjeskift følger efter en afsluttende } i den oprindelige kode, så reglen, der beskytter Automatic Semicolon Insertion, beholder dem. Semikolonerne inde i hver metode bliver også.

Formel for størrelsesreduktion

Værktøjet viser tre tal under outputfeltet: den oprindelige størrelse, den minificerede størrelse og reduktionen. Alle størrelser er antal tegn, ikke bytes. Reduktionen er en procentdel, afrundet til nærmeste hele tal:

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

Funktionseksemplet ovenfor har 213 tegn før minificering og 103 efter. Derfor er 1–103 / 213 = 0,5164, hvilket er 51,64 %, og værktøjet viser 52 %. Klasseeksemplet går fra 515 tegn til 304, hvilket er 40,97 %, vist som 41 %.

Begrænsninger ved dette minificeringsværktøj

Dette værktøj fjerner kun kommentarer og mellemrum. I modsætning til værktøjer i build-trin som Terser eller UglifyJS omdøber det ikke variabler, sletter ikke ubrugt kode og sammenfletter ikke filer. Disse værktøjer giver normalt et mindre output, men kræver en byggeproces for at køre. Dette værktøj fungerer øjeblikkeligt i browseren uden opsætning, hvilket passer til hurtige kontroller eller små kodestykker snarere end en komplet produktionsproces.

Ofte stillede spørgsmål

Hvad fjerner et JavaScript-minificeringsværktøj?

Det fjerner kommentarer og blanktegn, som ikke er nødvendige for at køre koden. Det fjerner ikke semikoloner, parenteser eller andre tegn, der allerede var en del af koden.

Ændrer minificering af JavaScript, hvordan det kører?

Nej. Minificeret kode bør give de samme resultater som originalen. Kun formateringen ændres.

Hvorfor indeholder minificeret kode nogle gange stadig linjeskift?

Et linjeskift kan være påkrævet af JavaScripts regel Automatic Semicolon Insertion, eller det kan følge efter en afsluttende klammeparentes }. Hvis det blev fjernet, kunne det ændre, hvad koden gør, så værktøjet beholder ét linjeskift på disse steder i stedet for at slette det.

Er minificering det samme som komprimering?

Nej. Minificering fjerner tegn fra selve kildekoden. Komprimering, f.eks. med gzip eller Brotli, koder filen anderledes, så den kan overføres over et netværk. Websteder bruger almindeligvis begge dele sammen.

Sendes min kode til en server?

Selve minificeringsværktøjet kører udelukkende i browserfanen, og koden uploades ikke for at blive minificeret. Den indsatte kode gemmes i sidens adresse, så et resultat kan deles eller bogmærkes, og derfor vises den i browserens adresselinje og historik.

Kan minificeret kode føres tilbage til originalen?

Blanktegn kan gendannes af et kodeformateringsværktøj, men kommentarer og de oprindelige variabel- og funktionsnavne er væk, medmindre der blev gemt et separat source map.

Referencer

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