Hoppa till innehåll
🛠️
Whiz Tools

JavaScript Minifierare - Gratis Online JS Kodoptimering

Gratis JavaScript minifieringsverktyg för att minska kodstorlek genom att ta bort blanksteg och kommentarer. Optimera JS-filer direkt utan installation.

JavaScript Minifierare

Om detta verktyg

Denna enkla JavaScript-minifierare tar bort onödig blanksteg och kommentarer för att minska storleken på din kod. Den bevarar funktionaliteten samtidigt som koden blir mer kompakt.

  • Tar bort onödigt blanksteg (mellanslag, tabbar, radbrytningar)
  • Tar bort kommentarer (både enkelradiga och flerradiga)
  • Bevarar strängliterals och reguljära uttryck
  • Bibehåller kodens funktionalitet
Laddningsberäknare...
📚

Dokumentation

Vad är en JavaScript-minifierare?

En JavaScript-minifierare är ett verktyg som krymper JavaScript-källkod genom att ta bort tecken som en webbläsare inte behöver för att köra den, till exempel extra blanksteg, radbrytningar och kommentarer. Koden gör fortfarande exakt samma sak efter minifieringen. Det är bara filstorleken som ändras.

Mindre JavaScript-filer hämtas och läses in snabbare, så minifiering är ett vanligt steg innan en webbplats publiceras.

Så fungerar JavaScript-minifiering

Verktyget läser koden ett tecken i taget och bygger upp den igen, samtidigt som det tar bort sådant som läsare behöver men JavaScript-motorn inte behöver. Det tar bort:

  • Kommentarer, både // single-line-kommentarer och /* multi-line */-kommentarer, inklusive kommentarer i JSDoc-stil.
  • Extra blanksteg, tabbar och tomma rader som bara finns för att göra koden lättare att läsa.

Det lägger inte till eller tar bort något annat. Det tar aldrig bort ett semikolon, en parentes eller något annat tecken som redan fanns i koden, och det infogar aldrig nya skiljetecken. Det lämnar också flera saker orörda:

  • Text i strängar ("like this", 'like this') och mallitteraler (`like this`), även om texten innehåller blanksteg eller ser ut som en kommentar.
  • Reguljära uttryckslitteraler, till exempel /[a-z]+/g, tillsammans med alla deras flaggor: d, g, i, m, s, u, v och y.
  • Alla semikolon, kommatecken och hakparenteser som fanns i den ursprungliga koden.

Ibland kan ett blanksteg mellan två token inte tas bort utan att deras betydelse ändras. return a kan inte bli returna, eftersom det då skulle läsas som ett enda ord. Detsamma gäller namn som skrivs med bokstäver utanför det engelska alfabetet, så typeof π behåller sitt blanksteg. När ett blanksteg skulle slå ihop två token behåller verktyget i stället ett enda blanksteg.

En radbrytning kan också ha betydelse. JavaScript infogar ibland automatiskt ett semikolon i slutet av en rad, enligt en regel som kallas Automatic Semicolon Insertion. Om borttagning av en radbrytning skulle utlösa eller förhindra regeln, eller om radbrytningen följer efter en avslutande klammerparentes }, behåller verktyget en enda radbrytning där. Därför pressas minifierad kod inte alltid ihop till en enda rad: vissa radbrytningar ändrar kodens betydelse och måste vara kvar.

Så använder du denna JavaScript-minifierare

  1. Klistra in JavaScript-kod i inmatningsrutan.
  2. Välj ”Minify”.
  3. Läs resultatet i utdatans ruta, tillsammans med den ursprungliga storleken, den minifierade storleken och den procentuella minskningen.
  4. Välj ”Copy” för att kopiera den minifierade koden.

Minifieringen körs i webbläsarfliken, så koden laddas inte upp någonstans för bearbetning. Verktyget kopierar också den inklistrade koden till sidans adress, vilket gör resultatet enkelt att bokmärka eller dela. Alla som kan se adressen kan därför se koden.

Exempel: minifiering av en funktion

Före:

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

Alla tre kommentarer försvinner och indragningen tas bort. Semikolonet efter a+b blir kvar, eftersom verktyget aldrig tar bort ett semikolon som redan fanns där. Radbrytningen före const blir också kvar, eftersom den följer efter en avslutande }.

Exempel: minifiering av en klass

Före:

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

Lägg märke till att en radbrytning blir kvar före varje metod och före klassens avslutande }. Alla dessa radbrytningar följer efter en avslutande } i den ursprungliga koden, så regeln som skyddar Automatic Semicolon Insertion bevarar dem. Semikolonen inuti varje metod blir också kvar.

Formel för storleksminskning

Verktyget visar tre tal under utdatans ruta: den ursprungliga storleken, den minifierade storleken och minskningen. Alla storlekar är antal tecken, inte byte. Minskningen anges i procent och avrundas till närmaste heltal:

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

Funktionsexemplet ovan har 213 tecken före minifieringen och 103 efteråt. Alltså är 1–103 / 213 = 0,5164, vilket är 51,64 %, och verktyget visar 52 %. Klassexemplet går från 515 tecken till 304, vilket är 40,97 %, visat som 41 %.

Begränsningar hos denna minifierare

Verktyget tar bara bort kommentarer och blanksteg. Till skillnad från verktyg i byggsteg, som Terser eller UglifyJS, byter det inte namn på variabler, tar inte bort oanvänd kod och slår inte ihop filer. Sådana verktyg ger vanligtvis mindre utdata, men kräver en byggprocess för att köras. Detta verktyg fungerar direkt i webbläsaren utan installation, vilket passar för snabba kontroller eller små kodavsnitt snarare än en fullständig produktionsprocess.

Vanliga frågor och svar

Vad tar en JavaScript-minifierare bort?

Den tar bort kommentarer och blanksteg som inte behövs för att koden ska köras. Den tar inte bort semikolon, hakparenteser eller något annat tecken som redan ingick i koden.

Ändrar minifiering av JavaScript hur koden körs?

Nej. Minifierad kod ska ge samma resultat som originalet. Det är bara formateringen som ändras.

Varför innehåller minifierad kod ibland fortfarande radbrytningar?

En radbrytning kan krävas av JavaScripts regel Automatic Semicolon Insertion, eller följa efter en avslutande klammerparentes }. Om den togs bort skulle kodens funktion kunna ändras, så verktyget behåller en enda radbrytning på dessa ställen i stället för att ta bort den.

Är minifiering samma sak som komprimering?

Nej. Minifiering tar bort tecken från själva källkoden. Komprimering, till exempel med gzip eller Brotli, kodar filen på ett annat sätt för överföring över ett nätverk. Webbplatser använder ofta båda tillsammans.

Skickas min kod till en server?

Själva minifieraren körs helt i webbläsarfliken, och koden laddas inte upp för att minifieras. Den inklistrade koden lagras i sidans adress så att ett resultat kan delas eller bokmärkas, och därför syns den i webbläsarens adressfält och historik.

Kan minifierad kod återställas till originalet?

Blanksteg kan återställas av ett kodformateringsverktyg, men kommentarer och de ursprungliga variabel- och funktionsnamnen är borta om inte en separat källkarta sparades.

Referenser

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