Minifikátor JavaScriptu - Bezplatný online optimalizátor JS kódu
Bezplatný nástroj pro minifikaci JavaScriptu pro zmenšení velikosti kódu odstraněním mezer a komentářů. Okamžitá optimalizace JS souborů bez nutnosti instalace.
Minifikátor JavaScriptu
O tomto nástroji
Tento jednoduchý minifikátor JavaScriptu odstraňuje zbytečné mezery a komentáře, aby zmenšil velikost vašeho kódu. Zachovává funkcionalitu a zároveň činí váš kód kompaktnějším.
- Odstraňuje zbytečné mezery (mezery, tabulátory, nové řádky)
- Odstraňuje komentáře (jednořádkové i víceřádkové)
- Zachovává řetězcové literály a regulární výrazy
- Udržuje funkcionalitu kódu
Dokumentace
Co je minifikátor JavaScriptu?
Minifikátor JavaScriptu je nástroj, který zmenšuje zdrojový kód JavaScriptu odstraněním znaků, které prohlížeč ke spuštění nepotřebuje, například nadbytečných mezer, konců řádků a komentářů. Po minifikaci kód stále dělá přesně totéž. Mění se pouze velikost souboru.
Menší soubory JavaScriptu se stahují a načítají rychleji, takže minifikace je běžným krokem před zveřejněním webu.
Jak minifikace JavaScriptu funguje
Tento nástroj čte kód znak po znaku a znovu ho sestavuje, přičemž vynechává vše, co čtenáři potřebují, ale co JavaScriptový engine nepotřebuje. Odstraňuje:
- Komentáře, jak komentáře
// single-linena jednom řádku, tak komentáře/* multi-line */na více řádcích, včetně komentářů ve stylu JSDoc. - Nadbytečné mezery, tabulátory a prázdné řádky, které slouží pouze ke snadnějšímu čtení kódu.
Nic dalšího nepřidává ani neodstraňuje. Nikdy nesmaže středník, závorku ani žádný jiný znak, který už v kódu byl, a nikdy nevloží novou interpunkci. Některé prvky také ponechává beze změny:
- Text uvnitř řetězců (
"like this",'like this') a šablonových literálů (`like this`), i když tento text obsahuje mezery nebo vypadá jako komentář. - Literály regulárních výrazů, například
/[a-z]+/g, spolu se všemi jejich příznaky:d,g,i,m,s,u,vay. - Každý středník, čárku a závorku, které původní kód již obsahoval.
Někdy nelze odstranit mezeru mezi dvěma tokeny, aniž by se změnil jejich význam. return a nelze změnit na returna, protože by se výraz četl jako jediné slovo. Totéž platí pro názvy zapsané písmeny mimo anglickou abecedu, takže typeof π si mezeru zachovává. Když by odstranění mezery spojilo dva tokeny, nástroj místo toho ponechá jednu mezeru.
Důležitý může být také konec řádku. JavaScript někdy automaticky vloží středník na konci řádku; toto pravidlo se nazývá automatické vkládání středníků (Automatic Semicolon Insertion). Pokud by odstranění konce řádku mohlo toto pravidlo aktivovat nebo mu zabránit, případně pokud konec řádku následuje po uzavírací složené závorce }, nástroj tam ponechá jeden nový řádek. Proto minifikovaný kód není vždy sloučen do jediného řádku: některé konce řádků mění význam kódu a musí zůstat.
Jak používat tento minifikátor JavaScriptu
- Vložte kód JavaScriptu do vstupního pole.
- Zvolte „Minifikovat“.
- Přečtěte si výsledek ve výstupním poli spolu s původní velikostí, minifikovanou velikostí a procentuálním zmenšením.
- Zvolte „Kopírovat“ a zkopírujte minifikovaný kód.
Minifikace probíhá na kartě prohlížeče, takže se kód nikam neodesílá ke zpracování. Nástroj také kopíruje vložený kód do adresy stránky, takže výsledek lze snadno uložit do záložek nebo sdílet. Kdokoli, kdo tuto adresu uvidí, proto může vidět i kód.
Příklad: minifikace funkce
Před:
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);
10Po:
1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3Všechny tři komentáře zmizí a odsazení je odstraněno. Středník za výrazem a+b zůstane, protože nástroj nikdy nemaže středník, který už v kódu byl. Zůstane také konec řádku před const, protože následuje po uzavírací závorce }.
Příklad: minifikace třídy
Před:
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
28Po:
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());
7Všimněte si, že před každou metodou a před uzavírací závorkou třídy } zůstává konec řádku. Každý z těchto konců řádků v původním kódu následuje po uzavírací závorce }, takže je zachová pravidlo chránící automatické vkládání středníků. Zůstanou také středníky uvnitř jednotlivých metod.
Vzorec pro zmenšení velikosti
Nástroj pod výstupním polem uvádí tři hodnoty: původní velikost, minifikovanou velikost a zmenšení. Všechny velikosti jsou počty znaků, nikoli bajtů. Zmenšení je procentuální hodnota zaokrouhlená na celé číslo:
1reduction = round((1 - minified characters / original characters) x 100)
2Výše uvedený příklad funkce má před minifikací 213 znaků a po ní 103 znaků. Proto 1–103 / 213 = 0,5164, což je 51,64 %, a nástroj zobrazí 52 %. Příklad třídy se zmenší z 515 znaků na 304, což je 40,97 %, zobrazených jako 41 %.
Omezení tohoto minifikátoru
Tento nástroj odstraňuje pouze komentáře a bílé znaky. Na rozdíl od nástrojů pro sestavení, jako jsou Terser nebo UglifyJS, nepřejmenovává proměnné, nemaže nepoužívaný kód ani nespojuje soubory. Tyto nástroje obvykle vytvářejí menší výstup, ale ke spuštění potřebují proces sestavení. Tento nástroj funguje okamžitě v prohlížeči bez nastavování, takže se hodí spíše pro rychlé kontroly nebo krátké ukázky než pro celý produkční proces.
Často kladené otázky
Co minifikátor JavaScriptu odstraňuje?
Odstraňuje komentáře a bílé znaky, které nejsou ke spuštění kódu potřeba. Neodstraňuje středníky, závorky ani žádné jiné znaky, které již byly součástí kódu.
Mění minifikace JavaScriptu způsob jeho spuštění?
Ne. Minifikovaný kód by měl poskytovat stejné výsledky jako původní kód. Mění se pouze formátování.
Proč má minifikovaný kód někdy stále konce řádků?
Konec řádku může vyžadovat pravidlo automatického vkládání středníků v JavaScriptu nebo může následovat po uzavírací závorce }. Jeho odstranění by mohlo změnit chování kódu, takže nástroj na těchto místech místo odstranění ponechá jeden nový řádek.
Je minifikace totéž co komprese?
Ne. Minifikace odstraňuje znaky přímo ze zdrojového kódu. Komprese, například pomocí gzipu nebo Brotli, kóduje soubor pro přenos přes síť jiným způsobem. Weby běžně používají obojí společně.
Odesílá se můj kód na server?
Samotný minifikátor běží celý na kartě prohlížeče a kód se neodesílá k minifikaci. Vložený kód se ukládá do adresy stránky, aby bylo možné výsledek sdílet nebo uložit do záložek, takže se zobrazí v adresním řádku prohlížeče i v jeho historii.
Lze minifikovaný kód převést zpět na původní?
Bílé znaky lze znovu doplnit pomocí formátovače kódu, ale komentáře a původní názvy proměnných a funkcí jsou ztraceny, pokud nebyla uložena samostatná zdrojová mapa.
Reference
- MDN Web Docs. "Minification." Glosář MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
- ECMA International. "ECMAScript Language Specification," oddíl 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
- ECMA International. "ECMAScript Language Specification," oddíl 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
- ECMA International. "ECMAScript Language Specification," oddíl 22.2.6, "Properties of the RegExp Prototype Object" (množina příznaků d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object