Minificator JS

Minificator JS este un instrument gratuit care elimină caracterele inutile din JavaScript și afișează numărul de caractere înainte și după minificare.

Ce problemă rezolvă minificarea codului JavaScript?

Minificarea JavaScript reduce cantitatea de cod sursă pe care trebuie să o descarce browserul. De obicei, elimină formatarea inutilă, precum indentarea, întreruperile de linie și spațiile care nu sunt necesare pentru sintaxa JavaScript.

Un script mai mic poate reduce volumul transferat și efortul de analizare, mai ales când un site livrează mai multe pachete mari. Compresia HTTP, precum Brotli sau gzip, rămâne importantă, deoarece minificarea și compresia la transfer rezolvă aspecte diferite. Minificarea elimină caractere din codul sursă, iar compresia codifică mai compact datele repetitive în timpul transferului.

Operațiunea se efectuează de obicei în etapa de compilare dinaintea publicării. Este utilă și când verifici un script neminificat furnizat de un terț, compari dimensiunile pachetelor sau pregătești un fișier separat pentru un site fără un flux automat de compilare.

Minificarea nu dovedește că JavaScript-ul funcționează corect. Un script poate fi minificat cu succes chiar dacă include apeluri API greșite, variabile inaccesibile sau cod care eșuează doar în timpul execuției.

Cum folosesc Minificator JS?

Inserează codul JavaScript în câmpul JS, rulează instrumentul, apoi copiază valoarea returnată în JS minificat. Păstrează fișierul sursă original în sistemul de control al versiunilor și publică versiunea compactă, în loc să înlocuiești sursa ușor de citit.

1. Verifică mai întâi sintaxa codului sursă și rulează un linter și testele automate.
2. Inserează scriptul complet în JS, inclusiv toate importurile de module sau funcțiile învelitoare care fac parte din fișier.
3. Consultă Caractere JS și Caractere JS minificate pentru a vedea modificarea numărului de caractere.
4. Testează dacă JavaScript-ul minificat se execută corect în același browser și în același context de publicare ca fișierul din producție.
5. Folosește un nume de fișier ușor de recunoscut, precum app.min.js, dacă versiunea minificată și cea lizibilă vor fi stocate împreună.

Procesarea are loc pe server. Datele introduse sunt transmise serverului prin HTTPS și nu sunt stocate. Totuși, serverul trebuie să primească acel cod JavaScript pentru a-l procesa, așa că nu trimite cod sursă pe care organizația ta interzice să îl transmiți unui serviciu extern.

Ce conține rezultatul minificat?

Rezultatul conține codul JavaScript compact și două valori pentru numărul de caractere. Caractere JS reprezintă lungimea datelor introduse, iar Caractere JS minificate reprezintă lungimea valorii returnate în JS minificat.

Valorile sunt calculate cu funcția mb_strlen din PHP, care măsoară lungimea unui șir multioctet, nu doar numărul de octeți. Prin urmare, numărul de caractere nu este același cu dimensiunea finală transferată prin rețea. Caracterele UTF-8 pot ocupa mai mult de un octet, iar gzip sau Brotli pot reduce și mai mult fișierul transmis.

Acest instrument nu returnează un câmp separat pentru validare sau diagnosticare. Nu te aștepta să identifice fiecare paranteză lipsă, expresie regulată incorectă sau funcționalitate de limbaj incompatibilă. În special, erorile asociate cu JSON, precum numele de proprietăți fără ghilimele sau virgulele finale, nu reprezintă verificări fiabile pentru JavaScript, deoarece sintaxa literalelor obiect JavaScript diferă de sintaxa JSON. Pentru date JSON, folosește Validator și înfrumusețator JSON.

Exemple simple și situații mai dificile

O modificare simplă a spațierii poate arăta astfel.

Intrare

function add(a, b) { return a + b; }

Formă compactă

function add(a,b){return a+b;}

Formatarea din jurul unui obiect poate fi eliminată fără a modifica valorile proprietăților sale.

Intrare

const settings = { theme: "dark", retries: 2 };

Formă compactă

const settings={theme:"dark",retries:2};

Formatarea exactă poate varia de la un minificator la altul, mai ales în jurul punctelor și virgulelor opționale. Codul JavaScript nu poate fi compactat în siguranță prin eliminarea tuturor spațiilor și întreruperilor de linie. O minificare sigură trebuie să țină cont de contextul lexical și sintactic, pentru a deosebi formatarea de caracterele care influențează programul.

• Spațiile din șiruri sunt date. Spațiul din "Newcastle upon Tyne" trebuie păstrat.
• Semnele de punctuație pot avea rol sintactic. Eliminarea spațiului din a + +b poate produce o succesiune diferită de simboluri lexicale.
• Întreruperile de linie influențează uneori inserarea automată a punctului și virgulei, inclusiv în codul care urmează după return, break sau continue. O întrerupere de linie imediat după throw nu este permisă, deoarece expresia aferentă trebuie să înceapă pe aceeași linie.
• Caracterele accentuate și cele din alte alfabete decât cel latin pot apărea în șiruri și, dacă regulile JavaScript pentru identificatori permit acest lucru, în identificatori. Dimensiunea lor în octeți poate fi diferită de numărul de caractere.
• Numerele sunt elemente lexicale ale codului sursă, nu instrucțiuni privind numărul de caractere. Minificatorul trebuie să le păstreze valoarea numerică, chiar dacă alege o notație echivalentă mai scurtă.

Când nu merită să minific JavaScript?

De obicei, nu merită să repeți minificarea dacă fișierul este deja minificat. O a doua trecere poate economisi foarte puțin sau deloc, poate îngreuna urmărirea rezultatului compilării și poate afecta hărțile sursă existente.

De asemenea, nu prea are rost să reformatezi și apoi să minifici un cod JavaScript care va fi citit doar de o mașină. Păstrează sursa într-o formă lizibilă pentru întreținere și generează din ea artefactele pentru publicare. Pentru o aplicație matură, un instrument de compilare precum esbuild, Rollup sau webpack este, în general, mai potrivit, deoarece poate automatiza gruparea modulelor și generarea hărților sursă. Minificarea poate fi inclusă sau adăugată prin configurare ori printr-un plugin, în timp ce Terser este un minificator dedicat.

Nu considera minificarea o metodă de ofuscare sau de control al accesului. Numele funcțiilor și variabilelor pot rămâne vizibile, literalii șir pot fi citiți în continuare, iar instrumentele pentru dezvoltatori din browser pot reformata codul compact. Secretele, cheile private și datele de autentificare privilegiate nu trebuie incluse niciodată în codul JavaScript executat pe partea clientului.

Dacă pregătești toate resursele statice ale unei pagini, Minificator CSS și Minificator HTML pot aplica operațiunea corespunzătoare acestor formate. Folosește instrumentul dedicat fiecărui format, deoarece regulile de analizare și de tratare a spațiilor diferă.

Întrebări frecvente

Instrumentul generează o hartă sursă?

Nu este returnat niciun câmp pentru harta sursă. Dacă ai nevoie ca urmele de stivă din producție să trimită la fișierele originale, generează scriptul minificat și fișierul .map corespunzător în cadrul aceluiași proces de compilare. Publicarea unei hărți sursă provenite din altă compilare poate genera referințe incorecte la linii și coloane.

Minificarea îi poate împiedica pe alții să-mi copieze codul JavaScript?

Nu. Browserele trebuie să primească acel cod executabil pe partea clientului, deci orice vizitator îl poate descărca și analiza. Minificarea face sursa mai greu de citit, dar nu asigură confidențialitatea, respectarea licenței sau o protecție reală pentru secretele incluse în cod.

Pot insera un cod care conține chei API?

Nu insera chei API secrete, tokenuri sau date de autentificare private. Datele introduse sunt trimise prin HTTPS și nu sunt stocate, dar procesarea are loc pe server. Cheile publice pentru browser, distribuite în mod intenționat fiecărui vizitator, trebuie totuși restricționate în funcție de domeniu, origine, cotă sau permisiuni, dacă serviciul respectiv oferă aceste opțiuni.

Un număr mai mic de caractere face întotdeauna pagina să se încarce mai repede?

Nu. Efectul depinde de dimensiunea fișierului original, stocarea în cache, condițiile conexiunii, compresia aplicată de server și volumul de cod JavaScript pe care browserul trebuie să îl analizeze și să îl execute. Verifică dimensiunea transferului comprimat și comportamentul la execuție, nu doar numărul total de caractere.

Trebuie să păstrez extensia .js după minificare?

Da. Fișierele JavaScript minificate păstrează în mod normal extensia .js, iar .min.js este folosită prin convenție când sunt disponibile ambele versiuni. Înainte de publicare, confirmă că serverul trimite un tip de conținut adecvat pentru JavaScript și că importul din HTML sau din modul indică fișierul dorit.