Sari la conținut
🛠️
Whiz Tools

Minimizator JavaScript - Optimizator Online Gratuit de Cod JS

Instrument gratuit de minimizare JavaScript pentru reducerea dimensiunii codului prin eliminarea spațiilor albe și a comentariilor. Optimizați instant fișierele JS fără instalare.

Minimizator JavaScript

Despre acest instrument

Acest minimizator simplu JavaScript elimină spațiile și comentariile inutile pentru a reduce dimensiunea codului. Păstrează funcționalitatea în timp ce face codul mai compact.

  • Elimină spațiile inutile (spații, taburi, linii noi)
  • Elimină comentariile (pe o singură linie și pe mai multe linii)
  • Păstrează literalii de șir și expresiile regulate
  • Menține funcționalitatea codului
Calculator de încărcare...
📚

Documentație

Ce este un instrument de minificare JavaScript?

Un minificator JavaScript este un instrument care micșorează codul sursă JavaScript prin eliminarea caracterelor de care un browser nu are nevoie pentru a-l executa, precum spațiile suplimentare, întreruperile de linie și comentariile. Codul face exact același lucru după minificare. Se schimbă doar dimensiunea fișierului.

Fișierele JavaScript mai mici se descarcă și se încarcă mai repede, astfel că minificarea este un pas obișnuit înainte ca un site să fie publicat.

Cum funcționează minificarea JavaScript

Acest instrument citește codul caracter cu caracter și îl reconstruiește, eliminând tot ce le este necesar cititorilor, dar nu și motorului JavaScript. Elimină:

  • Comentariile, atât comentariile // single-line pe o singură linie, cât și comentariile /* multi-line */ pe mai multe linii, inclusiv comentariile de tip JSDoc.
  • Spațiile suplimentare, tabulatorii și liniile goale care există doar pentru a face codul mai ușor de citit.

Nu adaugă și nu elimină nimic altceva. Nu șterge niciodată un punct și virgulă, o paranteză sau orice alt caracter care exista deja în cod și nu inserează niciodată semne de punctuație noi. De asemenea, lasă neschimbate mai multe elemente:

  • Textul din șirurile de caractere ("like this", 'like this') și din literalii de șablon (`like this`), chiar dacă acel text conține spații sau seamănă cu un comentariu.
  • Literalii de expresii regulate, precum /[a-z]+/g, împreună cu toate opțiunile lor: d, g, i, m, s, u, v și y.
  • Fiecare punct și virgulă, virgulă și paranteză pe care codul original le conținea deja.

Uneori, un spațiu dintre două tokenuri nu poate fi eliminat fără a le schimba sensul. return a nu poate deveni returna, deoarece astfel ar fi citit ca un singur cuvânt. Același lucru este valabil pentru numele scrise cu litere din afara alfabetului englez, astfel că typeof π își păstrează spațiul. Când eliminarea unui spațiu ar uni două tokenuri, instrumentul păstrează în schimb un singur spațiu.

Și o întrerupere de linie poate fi importantă. Uneori, JavaScript inserează automat un punct și virgulă la sfârșitul unei linii, printr-o regulă numită inserarea automată a punctului și virgulei. Dacă ștergerea unei întreruperi de linie ar declanșa sau ar împiedica această regulă ori dacă întreruperea de linie urmează după o acoladă de închidere }, instrumentul păstrează acolo un singur caracter de sfârșit de linie. De aceea, codul minificat nu este întotdeauna comprimat pe o singură linie: unele întreruperi de linie schimbă sensul codului și trebuie păstrate.

Cum se folosește acest minificator JavaScript

  1. Lipește codul JavaScript în caseta de introducere.
  2. Selectează „Minify”.
  3. Citește rezultatul în caseta de ieșire, împreună cu dimensiunea originală, dimensiunea minificată și procentul de reducere.
  4. Selectează „Copy” pentru a copia codul minificat.

Minificarea se execută în fila browserului, astfel că codul nu este încărcat nicăieri pentru a fi procesat. Instrumentul copiază, de asemenea, codul lipit în adresa paginii, ceea ce face ca rezultatul să poată fi salvat ușor ca favorit sau distribuit. Prin urmare, oricine poate vedea acea adresă poate vedea și codul.

Exemplu: minificarea unei funcții

Înainte:

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

După:

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

Toate cele trei comentarii dispar, iar indentarea este eliminată. Punctul și virgula de după a+b rămâne, deoarece instrumentul nu șterge niciodată un punct și virgulă care exista deja. Întreruperea de linie dinaintea lui const rămâne, de asemenea, deoarece urmează după o acoladă de închidere }.

Exemplu: minificarea unei clase

Înainte:

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

După:

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

Observă că se păstrează o întrerupere de linie înaintea fiecărei metode și înaintea acoladei de închidere a clasei }. Fiecare dintre aceste întreruperi urmează după o acoladă de închidere } în codul original, astfel că regula care protejează inserarea automată a punctului și virgulei le păstrează. Se păstrează și punctele și virgulele din fiecare metodă.

Formula reducerii dimensiunii

Instrumentul afișează trei numere sub caseta de ieșire: dimensiunea originală, dimensiunea minificată și reducerea. Toate dimensiunile sunt numărători de caractere, nu de octeți. Reducerea este un procent rotunjit la cel mai apropiat număr întreg:

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

Exemplul de funcție de mai sus are 213 caractere înainte de minificare și 103 după. Prin urmare, 1–103 / 213 = 0,5164, adică 51,64 %, iar instrumentul afișează 52 %. Exemplul de clasă scade de la 515 caractere la 304, ceea ce reprezintă 40,97 %, afișat ca 41 %.

Limitele acestui minificator

Acest instrument elimină doar comentariile și spațiile albe. Spre deosebire de instrumente pentru etapa de construire, precum Terser sau UglifyJS, nu redenumește variabilele, nu șterge codul neutilizat și nu combină fișierele. De obicei, aceste instrumente produc rezultate mai mici, dar au nevoie de un proces de construire pentru a rula. Acest instrument funcționează instantaneu în browser, fără configurare, fiind potrivit pentru verificări rapide sau fragmente mici, nu pentru un flux complet de producție.

Întrebări frecvente

Ce elimină un minificator JavaScript?

Elimină comentariile și spațiile albe care nu sunt necesare pentru executarea codului. Nu elimină punctele și virgulele, parantezele sau orice alt caracter care făcea deja parte din cod.

Minificarea JavaScript schimbă modul în care acesta rulează?

Nu. Codul minificat ar trebui să producă aceleași rezultate ca originalul. Se schimbă doar formatarea.

De ce codul minificat mai conține uneori întreruperi de linie?

O întrerupere de linie poate fi impusă de regula JavaScript privind inserarea automată a punctului și virgulei sau poate urma după o acoladă de închidere }. Eliminarea ei ar putea schimba comportamentul codului, astfel că instrumentul păstrează în acele locuri o singură linie nouă, în loc să o șteargă.

Minificarea este același lucru cu comprimarea?

Nu. Minificarea elimină caractere din codul sursă propriu-zis. Comprimarea, precum gzip sau Brotli, codifică fișierul într-un mod diferit pentru transferul printr-o rețea. Site-urile le folosesc în mod obișnuit pe ambele împreună.

Este codul meu trimis unui server?

Minificatorul rulează în întregime în fila browserului, iar codul nu este încărcat pentru a fi minificat. Codul lipit este stocat în adresa paginii, astfel încât rezultatul poate fi distribuit sau salvat ca favorit; prin urmare, apare în bara de adrese a browserului și în istoricul acestuia.

Poate fi readus codul minificat la forma originală?

Spațiile albe pot fi restaurate de un formatter de cod, dar comentariile și numele originale ale variabilelor și funcțiilor dispar, cu excepția cazului în care a fost salvată separat o hartă sursă.

Referințe

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