Pereiti prie turinio
🛠️
Whiz Tools

JavaScript Minifikatorius - Nemokamas Internetinis JS Kodo Optimizatorius

Nemokamas JavaScript minifikavimo įrankis, skirtas sumažinti kodo dydį pašalinant tarpus ir komentarus. Akimirksniu optimizuokite JS failus be jokio diegimo.

JavaScript Minifikatorius

Apie šį įrankį

Šis paprastas JavaScript minifikatorius pašalina nereikalingus tarpus ir komentarus, kad sumažintų jūsų kodo dydį. Išsaugo funkcionalumą padarydamas kodą kompaktiškesnį.

  • Pašalina nereikalingus tarpus (tarpus, tabuliacijas, naujas eilutes)
  • Pašalina komentarus (vienos eilutės ir kelių eilučių)
  • Išsaugo eilučių literalus ir reguliariąsias išraiškas
  • Išlaiko kodo funkcionalumą
Įkrovimo skaičiuotuvas...
📚

Dokumentacija

Kas yra „JavaScript“ minifikatorius?

„JavaScript“ minifikatorius – tai įrankis, kuris sumažina „JavaScript“ pradinio kodo dydį pašalindamas simbolius, kurių naršyklei nereikia kodui vykdyti, pavyzdžiui, papildomus tarpus, eilučių lūžius ir komentarus. Po minifikavimo kodas atlieka lygiai tą patį. Pasikeičia tik failo dydis.

Mažesni „JavaScript“ failai atsisiunčiami ir įkeliami greičiau, todėl minifikavimas dažnai atliekamas prieš paskelbiant svetainę.

Kaip veikia „JavaScript“ minifikavimas

Šis įrankis skaito kodą po vieną simbolį ir jį sukuria iš naujo, pašalindamas viską, ko reikia skaitytojams, bet ne „JavaScript“ varikliui. Jis pašalina:

  • Komentarus: ir // single-line komentarus, ir /* multi-line */ komentarus, įskaitant JSDoc stiliaus komentarus.
  • Papildomus tarpus, tabuliacijos simbolius ir tuščias eilutes, kurios reikalingos tik tam, kad kodą būtų lengviau skaityti.

Jis nieko daugiau neprideda ir nepašalina. Įrankis niekada neištrina kabliataškio, skliausto ar bet kurio kito kode jau buvusio simbolio ir neįterpia naujų skyrybos ženklų. Jis taip pat nekeičia kelių dalykų:

  • Eilučių tarpų eilutėse ("like this", 'like this') ir šabloninių literalų (`like this`), net jei tame tekste yra tarpų arba jis panašus į komentarą.
  • Reguliariųjų reiškinių literalų, pavyzdžiui, /[a-z]+/g, kartu su visomis jų vėliavėlėmis: d, g, i, m, s, u, v ir y.
  • Kiekvieno kabliataškio, kablelio ir skliausto, kuris jau buvo pradiniame kode.

Kartais tarpo tarp dviejų ženklų negalima pašalinti nepakeitus jų reikšmės. return a negali tapti returna, nes tada tai būtų skaitoma kaip vienas žodis. Tas pats pasakytina apie pavadinimus, užrašytus ne anglų abėcėlės raidėmis, todėl typeof π tarpas išlieka. Kai pašalinus tarpą du ženklai susilietų į vieną, įrankis palieka vieną tarpą.

Eilutės lūžis taip pat gali būti svarbus. „JavaScript“ kartais automatiškai įterpia kabliataškį eilutės pabaigoje; ši taisyklė vadinama automatiniu kabliataškio įterpimu (Automatic Semicolon Insertion). Jei pašalinus eilutės lūžį ši taisyklė būtų suaktyvinta arba jai būtų sutrukdyta, arba jei eilutės lūžis eitų po uždarančiojo skliausto }, įrankis ten palieka vieną naują eilutę. Todėl minifikuotas kodas ne visada suspaudžiamas į vieną eilutę: kai kurie eilučių lūžiai pakeistų kodo reikšmę ir turi likti.

Kaip naudoti šį „JavaScript“ minifikatorių

  1. Įklijuokite „JavaScript“ kodą į įvesties lauką.
  2. Pasirinkite „Minify“.
  3. Išvesties lauke perskaitykite rezultatą, taip pat pradinį dydį, sumažintą dydį ir sumažėjimo procentą.
  4. Pasirinkite „Copy“, kad nukopijuotumėte minifikuotą kodą.

Minifikavimas vykdomas naršyklės kortelėje, todėl kodas niekur neįkeliamas apdoroti. Įrankis taip pat nukopijuoja įklijuotą kodą į puslapio adresą, todėl rezultatą lengva įtraukti į žymas arba bendrinti. Taigi kiekvienas, galintis matyti tą adresą, gali matyti ir kodą.

Pavyzdys: funkcijos minifikavimas

Prieš:

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

Visi trys komentarai pašalinami, o įtraukos nelieka. Kabliataškis po a+b išlieka, nes įrankis niekada neištrina kode jau buvusio kabliataškio. Eilutės lūžis prieš const taip pat išlieka, nes jis eina po uždarančiojo }.

Pavyzdys: klasės minifikavimas

Prieš:

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

Atkreipkite dėmesį, kad prieš kiekvieną metodą ir prieš klasės uždarantįjį } išlieka eilutės lūžis. Kiekvienas iš šių lūžių pradiniame kode eina po uždarančiojo }, todėl juos išsaugo automatinio kabliataškio įterpimo taisyklė. Kabliataškiai kiekvieno metodo viduje taip pat išlieka.

Dydžio sumažėjimo formulė

Po išvesties lauku įrankis pateikia tris skaičius: pradinį dydį, minifikuotą dydį ir sumažėjimą. Visi dydžiai nurodo simbolių, o ne baitų, skaičių. Sumažėjimas yra procentinė dalis, suapvalinta iki artimiausio sveikojo skaičiaus:

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

Pirmiau pateiktame funkcijos pavyzdyje prieš minifikavimą yra 213 simbolių, o po jo – 103. Taigi 1–103 / 213 = 0,5164, tai yra 51,64 %, todėl įrankis rodo 52 %. Klasės pavyzdžio dydis sumažėja nuo 515 simbolių iki 304, o tai sudaro 40,97 %, rodoma kaip 41 %.

Šio minifikatoriaus ribos

Šis įrankis pašalina tik komentarus ir tarpus. Kitaip nei kūrimo etapo įrankiai, tokie kaip „Terser“ ar „UglifyJS“, jis nepervadina kintamųjų, neištrina nenaudojamo kodo ir nejungia failų. Šie įrankiai paprastai sukuria mažesnę išvestį, tačiau jiems paleisti reikia kūrimo proceso. Šis įrankis veikia iškart naršyklėje ir jo nereikia nustatyti, todėl tinka greitai patikrinti kodą ar apdoroti mažus fragmentus, o ne visam programinės įrangos kūrimo procesui.

Dažnai užduodami klausimai

Ką pašalina „JavaScript“ minifikatorius?

Jis pašalina komentarus ir tarpus, kurie nėra reikalingi kodui vykdyti. Jis nepašalina kabliataškių, skliaustų ar bet kurio kito simbolio, kuris jau buvo kodo dalis.

Ar „JavaScript“ minifikavimas pakeičia jo veikimą?

Ne. Minifikuotas kodas turėtų pateikti tokius pačius rezultatus kaip pradinis. Pasikeičia tik formatavimas.

Kodėl minifikuotame kode kartais vis dar būna eilučių lūžių?

Eilutės lūžio gali reikėti dėl „JavaScript“ automatinio kabliataškio įterpimo taisyklės arba jis gali eiti po uždarančiojo skliausto }. Jį pašalinus galėtų pasikeisti kodo veikimas, todėl tose vietose įrankis palieka vieną naują eilutę, o ne ją ištrina.

Ar minifikavimas yra tas pats, kas glaudinimas?

Ne. Minifikavimas pašalina simbolius iš paties pradinio kodo. Glaudinimas, pavyzdžiui, naudojant gzip arba Brotli, kitaip koduoja failą, kad jis būtų perduotas tinklu. Svetainėse abu būdai dažnai naudojami kartu.

Ar mano kodas siunčiamas į serverį?

Pats minifikatorius veikia tik naršyklės kortelėje, o kodas neįkeliamas minifikuoti. Įklijuotas kodas išsaugomas puslapio adrese, kad rezultatą būtų galima bendrinti arba įtraukti į žymas, todėl jis rodomas naršyklės adreso juostoje ir istorijoje.

Ar galima minifikuotą kodą atkurti į pradinę būseną?

Tarpus gali atkurti kodo formatuoklis, tačiau komentarai ir pradiniai kintamųjų bei funkcijų pavadinimai prarandami, nebent buvo išsaugotas atskiras šaltinio atvaizdavimo failas.

Šaltiniai

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