Preskoči na vsebino
🛠️
Whiz Tools

JavaScript Minifikator - Brezplačno Spletno Orodje za Optimizacijo JS Kode

Brezplačno orodje za minifikacijo JavaScript kode, ki zmanjša velikost kode z odstranjevanjem presledkov in komentarjev. Optimizirajte JS datoteke trenutno brez namestitve.

JavaScript Minifikator

O tem orodju

Ta preprost JavaScript minifikator odstrani nepotrebne presledke in komentarje, da zmanjša velikost vaše kode. Ohranja funkcionalnost in hkrati naredi kodo bolj kompaktno.

  • Odstrani nepotrebne presledke (presledke, tabulatorje, nove vrstice)
  • Odstrani komentarje (enojne in večvrstične)
  • Ohranja nize in regularne izraze
  • Ohranja funkcionalnost kode
Kalkulator nalaganja...
📚

Dokumentacija

Kaj je minifikator JavaScripta?

Minifikator JavaScripta je orodje, ki zmanjša izvorno kodo JavaScripta tako, da odstrani znake, ki jih brskalnik za njeno izvajanje ne potrebuje, na primer odvečne presledke, prelome vrstic in komentarje. Koda po minifikaciji še vedno počne popolnoma isto. Spremeni se samo velikost datoteke.

Manjše datoteke JavaScript se prenesejo in naložijo hitreje, zato je minifikacija običajen korak pred objavo spletnega mesta.

Kako deluje minifikacija JavaScripta

To orodje bere kodo znak za znakom in jo znova sestavi, pri tem pa izpusti vse, kar bralci potrebujejo, JavaScriptov mehanizem pa ne. Odstrani:

  • Komentarje, tako komentarje // single-line v eni vrstici kot komentarje /* multi-line */ v več vrsticah, vključno s komentarji v slogu JSDoc.
  • Odvečne presledke, tabulatorje in prazne vrstice, ki obstajajo samo zato, da je koda lažje berljiva.

Ne doda in ne odstrani ničesar drugega. Nikoli ne izbriše podpičja, oklepaja ali katerega koli drugega znaka, ki je že bil v kodi, in nikoli ne vstavi novega ločila. Prav tako pusti nespremenjenih več stvari:

  • Besedila znotraj nizov ("like this", 'like this') in predlogovnih nizov (`like this`), tudi če to besedilo vsebuje presledke ali je videti kot komentar.
  • Literale regularnih izrazov, kot je /[a-z]+/g, skupaj z vsemi njihovimi modifikatorji: d, g, i, m, s, u, v in y.
  • Vsako podpičje, vejico in oklepaj, ki jih je izvorna koda že vsebovala.

Včasih presledka med dvema žetonoma ni mogoče odstraniti, ne da bi se spremenil njun pomen. return a ne more postati returna, saj bi se to prebralo kot ena sama beseda. Enako velja za imena, zapisana s črkami zunaj angleške abecede, zato typeof π ohrani svoj presledek. Ko bi odstranitev presledka zlepila dva žetona, orodje namesto tega ohrani en sam presledek.

Tudi prelom vrstice je lahko pomemben. JavaScript včasih samodejno vstavi podpičje na koncu vrstice; to pravilo se imenuje samodejno vstavljanje podpičij. Če bi brisanje preloma vrstice sprožilo ali preprečilo to pravilo ali če prelom sledi zaklepnemu zavitemu oklepaju }, orodje tam ohrani en sam prelom vrstice. Zato minificirana koda ni vedno stisnjena v eno vrstico: nekateri prelomi vrstic spremenijo pomen kode in morajo ostati.

Kako uporabljati ta minifikator JavaScripta

  1. Prilepite kodo JavaScript v vnosno polje.
  2. Izberite »Minificiraj«.
  3. Preberite rezultat v izhodnem polju skupaj z izvirno velikostjo, minificirano velikostjo in odstotkom zmanjšanja.
  4. Izberite »Kopiraj«, da kopirate minificirano kodo.

Minifikacija se izvaja v zavihku brskalnika, zato se koda ne naloži nikamor v obdelavo. Orodje prilepljeno kodo tudi kopira v naslov strani, zato je rezultat mogoče preprosto dodati med zaznamke ali ga deliti. Kdor lahko vidi ta naslov, lahko zato vidi tudi kodo.

Primer: minifikacija funkcije

Pred:

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

Po:

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

Vsi trije komentarji izginejo in zamiki se odstranijo. Podpičje za a+b ostane, ker orodje nikoli ne izbriše podpičja, ki je že bilo v kodi. Ostane tudi prelom vrstice pred const, ker sledi zaklepnemu zavitemu oklepaju }.

Primer: minifikacija razreda

Pred:

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

Po:

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

Upoštevajte, da prelom vrstice ostane pred vsako metodo in pred zaklepnim zavitim oklepajem razreda }. Vsak od teh prelomov v izvorni kodi sledi zaklepnemu zavitemu oklepaju }, zato jih pravilo, ki ščiti samodejno vstavljanje podpičij, ohrani. Ostanejo tudi podpičja znotraj posameznih metod.

Formula za zmanjšanje velikosti

Orodje pod izhodnim poljem prikaže tri številke: izvirno velikost, minificirano velikost in zmanjšanje. Vse velikosti so število znakov, ne bajtov. Zmanjšanje je odstotek, zaokrožen na najbližje celo število:

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

Zgornji primer funkcije ima pred minifikacijo 213 znakov, po njej pa 103. Torej 1–103 / 213 = 0,5164, kar je 51,64 %, orodje pa prikaže 52 %. Primer razreda se zmanjša z 515 znakov na 304, kar je 40,97 %, prikazano kot 41 %.

Omejitve tega minifikatorja

To orodje odstranjuje samo komentarje in presledke. Za razliko od orodij za gradnjo, kot sta Terser ali UglifyJS, ne preimenuje spremenljivk, ne izbriše neuporabljene kode in ne združuje datotek. Ta orodja običajno ustvarijo manjši izhod, vendar za delovanje potrebujejo postopek gradnje. To orodje deluje takoj v brskalniku brez nastavitev, zato je primerno za hitra preverjanja ali kratke izseke, ne pa za celoten produkcijski proces.

Pogosta vprašanja

Kaj minifikator JavaScripta odstrani?

Odstrani komentarje in presledke, ki niso potrebni za izvajanje kode. Ne odstrani podpičij, oklepajev ali katerega koli drugega znaka, ki je že bil del kode.

Ali minifikacija JavaScripta spremeni način njegovega izvajanja?

Ne. Minificirana koda bi morala ustvariti enake rezultate kot izvirna. Spremeni se samo oblikovanje.

Zakaj so v minificirani kodi včasih še vedno prelomi vrstic?

Prelom vrstice lahko zahteva pravilo samodejnega vstavljanja podpičij v JavaScriptu ali pa lahko sledi zaklepnemu zavitemu oklepaju }. Njegova odstranitev bi lahko spremenila delovanje kode, zato orodje na teh mestih namesto brisanja ohrani en sam prelom vrstice.

Ali je minifikacija enaka stiskanju?

Ne. Minifikacija odstrani znake iz same izvorne kode. Stiskanje, kot sta gzip ali Brotli, datoteko za prenos po omrežju kodira na drugačen način. Spletna mesta običajno uporabljajo oboje skupaj.

Ali se moja koda pošlje strežniku?

Sam minifikator v celoti deluje v zavihku brskalnika, koda pa se ne naloži na strežnik zaradi minifikacije. Prilepljena koda se shrani v naslov strani, tako da je rezultat mogoče deliti ali dodati med zaznamke, zato se prikaže v naslovni vrstici brskalnika in njegovi zgodovini.

Ali je mogoče minificirano kodo pretvoriti nazaj v izvirno?

Oblikovalnik kode lahko obnovi presledke, vendar komentarjev ter izvirnih imen spremenljivk in funkcij ni mogoče obnoviti, razen če je bil shranjen ločen izvorni zemljevid.

Viri

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