Formatare și minificare JavaScript

Cum formatezi sau minifici JavaScript

1. Lipește codul sau apasă Deschide fișierul pentru a încărca un fișier .js, .mjs sau .jsx (până la 10 MB).
2. Alege Indentare și, dacă preferi stilul Allman, bifează Acoladele pe linie separată.
3. Apasă Formatează (înfrumusețează) pentru a face codul lizibil.
4. Pentru a-l micșora, setează Opțiuni de minificare și apasă Minifică. Dacă vrei doar să cauți erori, apasă Verifică sintaxa.
5. Copiază sau descarcă rezultatul. Linia de stare arată dimensiunea înainte și după și procentul economisit.

Codul este doar citit și transformat, niciodată rulat: nimic din ce lipești nu este executat pe această pagină.

Înfrumusețare cu js-beautify

Formatează (înfrumusețează) folosește js-beautify. Pune câte o instrucțiune pe linie, indentează blocurile, adaugă spații în jurul operatorilor și după cuvintele cheie și păstrează cel mult o linie goală acolo unde ai avut. Înțelege și sintaxa modernă (clase, funcții săgeată, șabloane de text, async/await) și JSX. Este cea mai rapidă cale de a citi o bibliotecă minificată sau un fragment pe o singură linie copiat de pe o pagină web.

Înfrumusețarea modifică doar spațiile. Nu verifică dacă fragmentul este valid: o paranteză lipsă produce pur și simplu o indentare ciudată. Pentru asta folosește Verifică sintaxa.

Minificare cu Terser

Minifică folosește Terser, minificatorul din majoritatea uneltelor de build pentru JavaScript. Fiind mare, este descărcat doar când apeși prima dată Minifică sau Verifică sintaxa. Opțiunile corespund direct setărilor Terser:

• Modul ES (import/export) analizează codul ca modul (module: true): se aplică modul strict, iar numele de la nivelul superior sunt private, deci pot fi redenumite, iar cele nefolosite pot fi eliminate. Lasă-l debifat pentru un script clasic ale cărui funcții globale sunt folosite de alte scripturi.
• Comprimă (compress) rescrie codul într-o variantă echivalentă mai scurtă: evaluarea constantelor (2*60 devine 120), eliminarea codului mort, unirea declarațiilor var, condiții mai scurte.
• Scurtează numele variabilelor (mangle) redenumește variabilele locale și parametrii cu una sau două litere. Numele globale și proprietățile obiectelor nu sunt niciodată redenumite.
• Păstrează comentariile de licență păstrează comentariile care încep cu /*! sau conțin @license ori @preserve. Toate celelalte comentarii sunt eliminate.

Minificarea nu poate schimba ce face codul, dar codul care se bazează pe numele funcțiilor (fn.name) sau pe eval se poate comporta diferit după redenumire. În acest caz, debifează Scurtează numele variabilelor.

Erori de sintaxă cu linie și coloană

Când Terser nu poate analiza codul, Minifică și Verifică sintaxa afișează mesajul de eroare cu linia și coloana, de exemplu „Linia 12, coloana 8 – Eroare de sintaxă: Unexpected token punc «)»”. Coloana numără caracterele începând de la 1. O cauză tipică este o paranteză lipsă mai sus în fișier, așa că uită-te și la liniile de dinaintea poziției raportate. Mesajele de eroare ale analizorului sunt în engleză.