Minifică JavaScript _

Cum funcționează minificarea JavaScript

Terser lucrează în patru etape asupra Arborelui de Sintaxă Abstractă al codului tău. Fiecare etapă este independentă, astfel încât poți activa sau dezactiva oricare dintre ele fără a le afecta pe celelalte.

1. Analiză. Terser analizează JavaScript-ul tău într-un AST. Orice eroare de sintaxă iese la suprafață aici cu tokenul și linia care au cauzat-o, astfel încât găsești problema reală înainte ca orice transformare să ruleze. Analizorul acceptă orice construcție ECMAScript standard până la cele mai recente propuneri de etapa 4.
2. Comprimă. Compresorul parcurge AST-ul și aplică zeci de transformări care păstrează semantica: plierea constantelor, eliminarea ramurilor moarte, încorporarea funcțiilor pure scurte, colapsarea declarațiilor var secvențiale și rescrierea formelor de declarații echivalente (if/else în ternare, scurtarea lanțurilor de comparație, colapsarea returnărilor condiționale). Fiecare transformare este reversibilă în principiu; compresorul nu schimbă niciodată comportamentul observabil.
3. Mangle. Manglerul redenumește legăturile locale la cei mai scurți identificatori unici (a, b, c, …) în fiecare domeniu de vizibilitate. Doar numele care nu pot scăpa de limita modulului sunt redenumite, astfel încât legăturile exportate, cheile de proprietăți și referințele globale supraviețuiesc neatinse. Rezultatul este cea mai mare economie de octeți dintr-o singură etapă.
4. Randare. Terser printează AST-ul transformat înapoi într-un șir JavaScript cu spații albe colapsate și separatori de declarații reduși la minimul pe care gramatica îl acceptă. Comentariile sunt eliminate, cu excepția cazului în care comutatorul de păstrare a licenței menține blocurile /*! … */, pe care majoritatea licențelor CDN ți cer să le păstrezi.

De ce să minifici JavaScript

• Încărcare mai rapidă a paginilor. Scripturile mai mici se analizează și se execută mai devreme. Pe o conexiune mobilă 4G, o reducere de 40% a octeților reduce secunde reale din Time to Interactive, care este metrica pe care PageSpeed Insights de la Google o măsoară cel mai agresiv.
• Facturi CDN mai mici. CloudFront, Cloudflare și Fastly facturează per gigabyte de egress. O reducere de 40% a scripturilor pe milioane de vizualizări de pagină lunar se cumulează în economii reale înainte ca orice lucrare de imagine sau CSS să fie realizată. Matematica se menține chiar și după gzip și brotli — minificarea elimină tokenuri pe care compresorul altfel ar trebui să le codifice.
• Acest minificator nu îți încarcă pagina. Terser are ~1 MB necomprimat. Majoritatea minificatoarelor online livrează întreaga bibliotecă la încărcarea paginii, ceea ce își distruge propriul scor Lighthouse și face pagina să se simtă lentă înainte ca utilizatorul să tasteze ceva. Această pagină încarcă leneș Terser doar când dai click pe Minifică sau activezi modul Live — astfel încât randarea inițială rămâne sub pragurile Core Web Vitals pe care instrumentul însuși promite să te ajute să le atingi.
• Îndeplinirea Core Web Vitals. Lighthouse și PageSpeed Insights semnalează JavaScript mare ca un contributor direct la Total Blocking Time slab. Minificarea bibliotecilor vendor și a pachetelor de aplicații este cel mai rapid câștig la auditurile „Reduceți JavaScript nefolosit" și „Eliminați modulele duplicate" — de obicei o reducere unică care valorează zece sau douăzeci de puncte.

Aplicații comune

Minificarea JavaScript apare în aproape fiecare etapă a unui proiect web modern.

• Hook-uri pre-commit: minifică scripturile utilitare individuale înainte de a le comite într-un depozit, astfel încât artefactul comis să fie gata de producție, iar diff-ul să arate schimbări de logică, nu zgomot de spații albe.
• Audituri widget-uri terțe: lipește un fragment de încorporare al unui vendor și verifică dacă este deja minificat sau poate fi micșorat în continuare înainte de a-l servi milioanelor de utilizatori.
• Curățare scripturi moștenite: comprimă pluginuri jQuery vechi și scripturi scrise manual care preced conducta ta actuală de build, fără a atinge arborele sursă.

Un exemplu practic

Ia o funcție mică: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — aproximativ 130 de octeți inclusiv comentariul. Lipește-o mai sus cu Mangle și Comprimă ambele activate. Ieșirea se scurtează la aproximativ function add(n,o){return n+o}console.log(add(1,2)); — aproximativ 55 de octeți, o reducere de 58%. Numele funcției add supraviețuiește deoarece este referit în apelul console.log; numele parametrilor firstNumber și secondNumber se scurtează la litere simple deoarece sunt locale corpului funcției. Dezactivează Mangle pentru a păstra numele parametrilor lizibili, colapsând în același timp spațiile albe și eliminând comentariul.

FAQ

Rulează acest lucru în browserul meu?

Da. Terser este încărcat leneș prima dată când dai click pe Minifică sau activezi modul Live — aproximativ 200 KB comprimați ajung în cache-ul browserului tău, apoi nu se mai descarcă nimic. Codul tău nu părăsește niciodată pagina.

Ce este mangle-ul numelor și este sigur?

Mangling-ul redenumește variabilele locale la litere simple pentru a economisi octeți. Este sigur pentru scripturi de sine stătătoare și pachete IIFE deoarece redenumirile nu părăsesc niciodată domeniul de vizibilitate. NU este sigur pentru scripturi care expun globale după nume (de ex. window.myLib = …) fără un înveliș. Dezactivează Mangle când nu ești sigur.

De ce s-a stricat codul meu după minificare?

Trei suspecți obișnuiți: eval sau with care referențiază variabile prin șir; citiri Function.name sau arguments.callee care depind de identificatorul original; sau globale expuse printr-un nume care a fost redenumit. Dezactivează Mangle mai întâi pentru a izola dacă redenumirea sau o transformare Comprimă este cauza.

Suportă acest lucru sintaxa modernă (ES2020+)?

Da. Setează ținta ECMAScript la ES2020 sau Următorul și Terser păstrează optional chaining, nullish coalescing, top-level await și operatorii de atribuire logică. Setează-l la ES5 și Terser compilă în jos acolo unde poate, dar nu este un transpilator complet — folosește Babel pentru sintaxa pe care ES5 nu o poate reprezenta deloc.

Minificarea JavaScript pe partea browserului cu Terser îți oferă ieșire de calitate pentru producție fără a adăuga un instrument de build. Lipește un script, alege ținta ECMAScript, copiază sau descarcă rezultatul. Nimic nu se încarcă, fără cont, fără conductă de build. Minificatorul în sine se încarcă doar când îl ceri — astfel încât deschiderea acestei pagini costă câțiva kiloocteți, nu un megaoctet.