Preskočiť na obsah
🛠️
Whiz Tools

Minifikátor JavaScriptu - Bezplatný online optimalizátor JS kódu

Bezplatný nástroj na minifikáciu JavaScriptu na zmenšenie veľkosti kódu odstránením medzier a komentárov. Okamžite optimalizujte JS súbory bez potreby inštalácie.

Minifikátor JavaScriptu

O tomto nástroji

Tento jednoduchý minifikátor JavaScriptu odstraňuje nepotrebné medzery a komentáre, aby zmenšil veľkosť vášho kódu. Zachováva funkcionalitu a zároveň robí váš kód kompaktnejším.

  • Odstraňuje nepotrebné medzery (medzery, tabulátory, nové riadky)
  • Odstraňuje komentáre (jednoriadkové aj viacriadkové)
  • Zachováva reťazcové literály a regulárne výrazy
  • Udržiava funkcionalitu kódu
Kalkulačka načítavania...
📚

Dokumentácia

Čo je minifikátor JavaScriptu?

Minifikátor JavaScriptu je nástroj, ktorý zmenšuje zdrojový kód JavaScriptu odstránením znakov, ktoré prehliadač nepotrebuje na jeho spustenie, napríklad nadbytočných medzier, zalomení riadkov a komentárov. Kód po minifikácii stále robí presne to isté. Mení sa iba jeho veľkosť súboru.

Menšie súbory JavaScriptu sa sťahujú a načítavajú rýchlejšie, takže minifikácia je bežným krokom pred zverejnením webového sídla.

Ako funguje minifikácia JavaScriptu

Tento nástroj číta kód po jednom znaku a znova ho zostavuje, pričom vynecháva všetko, čo čitatelia potrebujú, ale JavaScriptový engine nie. Odstraňuje:

  • Komentáre, jednoriadkové komentáre // single-line aj viacriadkové komentáre /* multi-line */ vrátane komentárov v štýle JSDoc.
  • Nadbytočné medzery, tabulátory a prázdne riadky, ktoré slúžia iba na uľahčenie čítania kódu.

Nič iné nepridáva ani neodstraňuje. Nikdy nevymaže bodkočiarku, zátvorku ani iný znak, ktorý už bol v kóde, a nikdy nevloží novú interpunkciu. Niekoľko vecí tiež ponecháva nedotknutých:

  • Text v reťazcoch ("like this", 'like this') a šablónových literáloch (`like this`), aj keď tento text obsahuje medzery alebo vyzerá ako komentár.
  • Literály regulárnych výrazov, napríklad /[a-z]+/g, spolu so všetkými ich príznakmi: d, g, i, m, s, u, v a y.
  • Každú bodkočiarku, čiarku a zátvorku, ktoré už pôvodný kód obsahoval.

Niekedy nemožno odstrániť medzeru medzi dvoma tokenmi bez zmeny ich významu. return a sa nemôže zmeniť na returna, pretože by sa to čítalo ako jedno slovo. To isté platí pre názvy zapísané písmenami mimo anglickej abecedy, takže typeof π si zachováva medzeru. Keď by odstránenie medzery spojilo dva tokeny, nástroj namiesto toho ponechá jednu medzeru.

Dôležité môže byť aj zalomenie riadka. JavaScript niekedy automaticky vloží na koniec riadka bodkočiarku podľa pravidla automatického vkladania bodkočiarok. Ak by odstránenie zalomenia mohlo toto pravidlo aktivovať alebo mu zabrániť, alebo ak zalomenie nasleduje po uzatváracej zloženej zátvorke }, nástroj tam ponechá jeden nový riadok. Preto minifikovaný kód nie je vždy stlačený do jedného riadka: niektoré zalomenia menia význam kódu a musia zostať.

Ako používať tento minifikátor JavaScriptu

  1. Vložte kód JavaScriptu do vstupného poľa.
  2. Vyberte možnosť „Minify“.
  3. Prečítajte si výsledok vo výstupnom poli spolu s pôvodnou veľkosťou, minifikovanou veľkosťou a percentuálnym zmenšením.
  4. Vyberte možnosť „Copy“ a skopírujte minifikovaný kód.

Minifikácia prebieha na karte prehliadača, takže kód sa nikam neodovzdáva na spracovanie. Nástroj tiež skopíruje vložený kód do adresy stránky, vďaka čomu sa výsledok dá jednoducho uložiť do záložiek alebo zdieľať. Každý, kto túto adresu uvidí, preto môže vidieť aj kód.

Príklad: minifikácia funkcie

Predtým:

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

Potom:

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

Všetky tri komentáre zmiznú a odsadenie sa odstráni. Bodkočiarka za a+b zostane, pretože nástroj nikdy neodstraňuje bodkočiarku, ktorá už v kóde bola. Zostane aj zalomenie riadka pred const, pretože nasleduje po uzatváracej zátvorke }.

Príklad: minifikácia triedy

Predtým:

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

Potom:

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

Všimnite si, že pred každou metódou a pred uzatváracou zátvorkou triedy } zostáva zalomenie riadka. Každé z týchto zalomení v pôvodnom kóde nasleduje po uzatváracej zátvorke }, takže pravidlo automatického vkladania bodkočiarok ich ponechá. Zostávajú aj bodkočiarky vo vnútri jednotlivých metód.

Vzorec na výpočet zmenšenia

Nástroj pod výstupným poľom uvádza tri čísla: pôvodnú veľkosť, minifikovanú veľkosť a zmenšenie. Všetky veľkosti sú počty znakov, nie bajtov. Zmenšenie je percento zaokrúhlené na najbližšie celé číslo:

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

Príklad funkcie vyššie má pred minifikáciou 213 znakov a po nej 103 znakov. Teda 1–103 / 213 = 0,5164, čo je 51,64 %, a nástroj zobrazí 52 %. Príklad triedy sa zmenší z 515 znakov na 304, čo je 40,97 %, zobrazených ako 41 %.

Obmedzenia tohto minifikátora

Tento nástroj odstraňuje iba komentáre a biele znaky. Na rozdiel od nástrojov používaných pri zostavovaní, ako sú Terser alebo UglifyJS, nepremenúva premenné, nemaže nepoužitý kód ani nespája súbory. Tieto nástroje zvyčajne vytvárajú menší výstup, ale na svoje spustenie potrebujú proces zostavenia. Tento nástroj funguje okamžite v prehliadači bez nastavovania, takže je vhodný skôr na rýchle kontroly alebo malé úryvky než na celý produkčný proces.

Najčastejšie otázky

Čo minifikátor JavaScriptu odstraňuje?

Odstraňuje komentáre a biele znaky, ktoré nie sú potrebné na spustenie kódu. Neodstraňuje bodkočiarky, zátvorky ani iné znaky, ktoré už boli súčasťou kódu.

Mení minifikácia JavaScriptu spôsob jeho spúšťania?

Nie. Minifikovaný kód by mal vytvárať rovnaké výsledky ako pôvodný kód. Mení sa iba formátovanie.

Prečo má minifikovaný kód niekedy stále zalomenia riadkov?

Zalomenie riadka môže vyžadovať pravidlo automatického vkladania bodkočiarok v JavaScripte alebo môže nasledovať po uzatváracej zátvorke }. Jeho odstránenie by mohlo zmeniť správanie kódu, preto nástroj na týchto miestach ponechá jeden nový riadok namiesto jeho vymazania.

Je minifikácia to isté ako kompresia?

Nie. Minifikácia odstraňuje znaky zo samotného zdrojového kódu. Kompresia, napríklad gzip alebo Brotli, kóduje súbor pri prenose cez sieť iným spôsobom. Webové sídla bežne používajú oboje naraz.

Odosiela sa môj kód na server?

Samotný minifikátor beží celý na karte prehliadača a kód sa na minifikáciu neodovzdáva. Vložený kód sa uloží do adresy stránky, aby sa výsledok dal zdieľať alebo uložiť do záložiek, takže sa zobrazí v adresnom riadku prehliadača aj v jeho histórii.

Dá sa minifikovaný kód zmeniť späť na pôvodný?

Formátovač kódu môže obnoviť biele znaky, ale komentáre a pôvodné názvy premenných a funkcií sú preč, pokiaľ sa neuložila samostatná zdrojová mapa.

Referencie

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