Pāriet uz saturu
🛠️
Whiz Tools

JavaScript Minificētājs - Bezmaksas Tiešsaistes JS Koda Optimizētājs

Bezmaksas JavaScript minificētāja rīks, lai samazinātu koda izmēru, noņemot tukšās vietas un komentārus. Optimizējiet JS failus momentāni bez instalācijas.

JavaScript Minimizators

Par šo rīku

Šis vienkāršais JavaScript minimizators noņem nevajadzīgās atstarpes un komentārus, lai samazinātu jūsu koda izmēru. Tas saglabā funkcionalitāti, padarot jūsu kodu kompaktāku.

  • Noņem nevajadzīgās atstarpes (intervālus, tabulācijas, jaunas rindas)
  • Noņem komentārus (gan vienas rindas, gan vairāku rindu)
  • Saglabā virkņu literālus un regulārās izteiksmes
  • Uztur koda funkcionalitāti
Ielādes kalkulators...
📚

Dokumentācija

Kas ir JavaScript minifikators?

JavaScript minifikators ir rīks, kas samazina JavaScript avota koda apjomu, noņemot rakstzīmes, kuras pārlūkprogrammai tā izpildei nav vajadzīgas, piemēram, liekās atstarpes, rindu pārtraukumus un komentārus. Pēc minifikācijas kods dara tieši to pašu. Mainās tikai faila lielums.

Mazāki JavaScript faili tiek lejupielādēti un ielādēti ātrāk, tāpēc minifikācija ir parasts solis pirms vietnes publicēšanas.

Kā darbojas JavaScript minifikācija

Šis rīks nolasa kodu pa vienai rakstzīmei un izveido to no jauna, atmetot visu, kas lasītājiem ir vajadzīgs, bet JavaScript dzinējam nav nepieciešams. Tas noņem:

  • Komentārus — gan // single-line komentārus, gan /* multi-line */ komentārus, tostarp JSDoc stila komentārus.
  • Lieku atstarpju, tabulācijas rakstzīmju un tukšu rindu, kas paredzētas tikai koda ērtākai lasīšanai.

Tas neko citu nepievieno un nenoņem. Tas nekad nedzēš semikolu, iekavu vai citu rakstzīmi, kas jau bija kodā, un nekad neievieto jaunas pieturzīmes. Tas arī atstāj neskartas vairākas lietas:

  • Tekstu virkņu iekšpusē ("like this", 'like this') un veidņu literāļos (`like this`), pat ja šis teksts satur atstarpes vai izskatās pēc komentāra.
  • Regulāro izteiksmju literāļus, piemēram, /[a-z]+/g, kopā ar visiem to karogiem: d, g, i, m, s, u, v un y.
  • Katru semikolu, komatu un iekavu, kas jau bija sākotnējā kodā.

Dažkārt atstarpi starp diviem tokeniem nevar noņemt, nemainot to nozīmi. return a nevar pārvērst par returna, jo tad tas tiktu lasīts kā viens vārds. Tas pats attiecas uz nosaukumiem, kuros izmantoti burti, kas nav angļu alfabētā, tāpēc typeof π saglabā atstarpi. Ja atstarpes noņemšana sapludinātu divus tokenus, rīks tās vietā saglabā vienu atstarpi.

Arī rindu pārtraukumam var būt nozīme. JavaScript dažkārt automātiski ievieto semikolu rindas beigās; šo noteikumu sauc par automātisko semikolu ievietošanu. Ja rindu pārtraukuma dzēšana varētu aktivizēt vai novērst šī noteikuma darbību vai ja rindu pārtraukums seko aizverošajai figūriekavai }, rīks tur saglabā vienu jaunrindu. Tāpēc minificētais kods ne vienmēr tiek saspiests vienā rindā: daži rindu pārtraukumi maina koda nozīmi, tādēļ tiem ir jāpaliek.

Kā izmantot šo JavaScript minifikatoru

  1. Ielīmējiet JavaScript kodu ievades laukā.
  2. Izvēlieties “Minify”.
  3. Izlasiet rezultātu izvades laukā kopā ar sākotnējo lielumu, minificēto lielumu un samazinājuma procentuālo daļu.
  4. Izvēlieties “Copy”, lai nokopētu minificēto kodu.

Minifikācija notiek pārlūkprogrammas cilnē, tāpēc kods apstrādei nekur netiek augšupielādēts. Rīks arī iekopē ielīmēto kodu lapas adresē, tādējādi rezultātu var ērti pievienot grāmatzīmēm vai kopīgot. Tāpēc ikviens, kas var redzēt šo adresi, var redzēt arī kodu.

Piemērs: funkcijas minifikācija

Pirms:

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

Pēc:

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

Visi trīs komentāri pazūd, un atkāpes tiek noņemtas. Semikols pēc a+b paliek, jo rīks nekad nedzēš semikolu, kas jau bija kodā. Arī rindu pārtraukums pirms const paliek, jo tas seko aizverošajai }.

Piemērs: klases minifikācija

Pirms:

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

Pēc:

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

Ievērojiet, ka pirms katras metodes un pirms klases aizverošās } paliek rindu pārtraukums. Katrs no šiem pārtraukumiem sākotnējā kodā seko aizverošajai }, tāpēc noteikums, kas aizsargā automātisko semikolu ievietošanu, tos saglabā. Arī semikoli katras metodes iekšpusē paliek.

Lieluma samazinājuma formula

Rīks zem izvades lauka parāda trīs skaitļus: sākotnējo lielumu, minificēto lielumu un samazinājumu. Visi lielumi ir rakstzīmju skaits, nevis baitu skaits. Samazinājums ir procentuāla vērtība, kas noapaļota līdz tuvākajam veselajam skaitlim:

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

Iepriekš minētajā funkcijas piemērā pirms minifikācijas ir 213 rakstzīmes, bet pēc tās — 103. Tātad 1–103 / 213 = 0,5164, kas ir 51,64%, un rīks parāda 52%. Klases piemērs samazinās no 515 rakstzīmēm līdz 304, kas ir 40,97%, bet tiek parādīts kā 41%.

Šī minifikatora ierobežojumi

Šis rīks noņem tikai komentārus un atstarpes. Atšķirībā no būvēšanas rīkiem, piemēram, Terser vai UglifyJS, tas nepārdēvē mainīgos, nedzēš neizmantotu kodu un neapvieno failus. Šie rīki parasti izveido mazāku izvadi, taču to darbībai nepieciešams būvēšanas process. Šis rīks darbojas uzreiz pārlūkprogrammā un nav jāiestata, tāpēc tas ir piemērots ātrām pārbaudēm vai maziem koda fragmentiem, nevis pilnam produkcijas būvēšanas procesam.

Biežāk uzdotie jautājumi

Ko JavaScript minifikators noņem?

Tas noņem komentārus un atstarpes, kas nav vajadzīgas koda izpildei. Tas nenoņem semikolus, iekavas vai citas rakstzīmes, kas jau bija koda daļa.

Vai JavaScript minifikācija maina tā izpildi?

Nē. Minificētam kodam būtu jāsniedz tādi paši rezultāti kā sākotnējam kodam. Mainās tikai formatējums.

Kāpēc minificētajā kodā dažkārt joprojām ir rindu pārtraukumi?

Rindu pārtraukumu var prasīt JavaScript automātiskās semikolu ievietošanas noteikums, vai arī tas var sekot aizverošajai figūriekavai }. Tā noņemšana varētu mainīt koda darbību, tāpēc rīks šajās vietās to nedzēš, bet saglabā vienu jaunrindu.

Vai minifikācija ir tas pats, kas saspiešana?

Nē. Minifikācija noņem rakstzīmes no paša avota koda. Saspiešana, piemēram, ar gzip vai Brotli, failu kodē citādi, lai to pārsūtītu tīklā. Vietnes parasti izmanto abas metodes kopā.

Vai mans kods tiek nosūtīts uz serveri?

Pats minifikators pilnībā darbojas pārlūkprogrammas cilnē, un kods netiek augšupielādēts minifikācijai. Ielīmētais kods tiek saglabāts lapas adresē, lai rezultātu varētu kopīgot vai pievienot grāmatzīmēm, tāpēc tas parādās pārlūkprogrammas adreses joslā un vēsturē.

Vai minificēto kodu var pārveidot atpakaļ par sākotnējo?

Atstarpes var atjaunot ar koda formatētāju, taču komentāri un sākotnējie mainīgo un funkciju nosaukumi ir zuduši, ja vien nav saglabāta atsevišķa avotu karte.

Atsauces

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