Cum să reduceți JavaScript — Instrumente și metode recomandate

Majoritatea utilizatorilor își doresc o experiență elegantă de navigare pe web, iar JavaScript a fost mult timp favorit pentru dezvoltatori pentru a oferi această experiență ridicată.

Cu toate acestea, JavaScript nu este doar acolo pentru a face site-urile să arate mai frumos. De asemenea, influențează direct performanța și succesul site-ului. Accelerarea unui site web sau reducerea timpului de încărcare a paginii - două concepte care sunt esențiale pentru dezvoltarea JavaScript - sunt factori cruciali pentru îmbunătățirea experienței utilizatorului.

Dacă doriți să îmbunătățiți performanța site-ului dvs. în cel mai scurt timp, trebuie să vă familiarizați cu minimizarea JavaScript. Vă va ajuta să excludeți toate caracterele inutile din codul sursă JavaScript fără a-i modifica funcționalitatea. În plus, va reduce timpul de încărcare a site-ului dvs. și utilizarea lățimii de bandă.

Minificarea JavaScript poate fi dificilă. În acest articol, vom stabili un curs care să vă ajute să reduceți codul JavaScript pentru site-urile WordPress și non-WordPress.

Ce este JavaScript?

JavaScript este un limbaj de scripting orientat pe text pentru crearea de site-uri web interactive atât pe partea client, cât și pe partea serverului. Este un limbaj mai simplu și mai puțin complex de învățat decât majoritatea, ceea ce explică utilizarea sa pe scară largă.

În timp ce HTML și CSS construiesc structura unui site web, JavaScript adaugă caracteristici complexe care aduc interactivitate site-ului dvs. pentru a implica utilizatorii. De exemplu, JavaScript oferă elemente complexe, cum ar fi tonomat video cu defilare, videoclipuri 2D/3D și hărți interactive.

În special, browserele web pot înțelege JavaScript. Prin urmare, alături de HTML și CSS, este o alegere competentă de ales dacă sunteți interesat de dezvoltarea web. Dacă trebuie să creați un site web extrem de interactiv, care să ruleze în toate browserele fără nicio obstacol, atunci JavaScript este cea mai de încredere opțiune pe care o puteți folosi.

Ce este reducerea codului?

Minimizarea este cunoscută și sub denumirea de minimizare. Minificarea codului înseamnă optimizarea codului pentru a economisi spațiu, a reduce timpul de încărcare a paginii și a reduce utilizarea lățimii de bandă a site-ului. Cu toate acestea, cea mai mare preocupare este de a minimiza codul fără a modifica funcționalitatea.

Minimizarea codului este posibilă în toate tehnologiile de programare de bază, inclusiv HTML, CSS și, după cum urmează să vedem, JavaScript. Cu toate acestea, procesul nu este instantaneu. Unele lucrări sunt necesare pentru a face codul mai compact, păstrându-l în același timp funcțional.

Pentru a minimiza codul JavaScript, trebuie să-l analizați, să-l comprimați și să obțineți rezultatul. Odată ce a fost miniat, ar trebui să fie aproape ilizibil cu ochiul liber. Ați eliminat toate spațiile albe inutile, comentariile, caracterele de linie nouă și tot ceea ce a făcut inițial codul lizibil.

Este posibil să trebuiască să faceți și alte modificări codului - de exemplu, introducerea de funcții, eliminarea delimitatorilor de bloc, utilizarea condiționalelor implicite sau rescrierea variabilelor locale.

Exemple de coduri JavaScript neminificate vs. minimizate

Să aruncăm o privire la un exemplu de cod. Acest prim bloc este JavaScript obișnuit, neminificat:

 // program to check if the string is palindrome or not function checkPalindrome(str) { // find the length of a string const len = string.length; // loop through half of the string for (let i = 0; i < len / 2; i++) { // check if first and last string are same if (string[i] !== string[len - 1 - i]) { return 'It is not a palindrome'; } } return 'It is a palindrome'; } // take input const string = prompt('Enter a string: '); // call the function const value = checkPalindrome(string); console.log(value);

Acum, să vedem cum arată același cod odată ce a fost miniat:

 function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++) if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"} const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

După cum puteți vedea, al doilea bloc de cod este mult mai mic și mai compact. Aceasta înseamnă că se va încărca și se va reda mai rapid, reducând timpul de încărcare a paginii și accelerând conținutul.

Aici, am redus 529 de octeți la 324 de octeți, câștigând 205 de octeți de spațiu liber și reducând încărcarea paginii cu aproape 40%.

Este ca și cum ai lua o carte de 529 de pagini și ai condensa-o într-o carte de 324 de pagini. Desigur, un om s-ar chinui să-l citească, dar o mașină s-ar străbate fără probleme.

Când conectați mai multe fișiere JavaScript într-un fișier micificat individual, minimizarea codului scade numărul de solicitări HTTP către server. Acest lucru reduce, de asemenea, consumul de lățime de bandă al site-ului. Mai mult, reducerea codului reduce timpul de rulare a unui script - toate lucrurile care reduc timpul până la primul octet (TTFB).

De ce ar trebui să reduceți codul JavaScript?

În timp ce scriu codul inițial, majoritatea dezvoltatorilor se concentrează în primul rând pe realizarea lucrurilor. Pe acel drum, ei tind să folosească o mulțime de comentarii, spațiere și variabile pentru a face codul mai lizibil pentru cei care lucrează cu el în viitor.

În ciuda faptului că este un limbaj de programare excelent, JavaScript afectează paginile web prin încetinirea lor. Pentru a recâștiga spațiu și a îmbunătăți viteza de încărcare a paginii, trebuie să minimizați codul JavaScript.

Versiunea redusă a codului JavaScript poate reduce dimensiunea fișierului cu până la 30-90%. În consecință, minimizarea JavaScript a devenit un ritual familiar pentru toți dezvoltatorii.

Fiecare dezvoltator major de bibliotecă JavaScript (Angular, Bootstrap și așa mai departe) oferă o versiune redusă de JavaScript pentru implementarea în producție. Și fiecare folosește o extensie min.js pentru a indica acest lucru.

Beneficiile minimizării codului JavaScript

Iată o scurtă prezentare a beneficiilor pe care le veți obține după folosirea minimizării JavaScript:

• Reducerea timpului de încărcare a paginii
• Consum mai puțin de lățime de bandă a site-ului dvs
• Timp de execuție mai mic al scriptului
• Mai puține solicitări HTTP către (și o încărcare mai ușoară pe) server
• Protecție împotriva furtului (versiunile reduse sau urâte sunt complicat de citit și furat pentru reutilizare)

Diferența dintre minimizarea, uglificarea și compresia JavaScript

Minificarea, ușurarea sau compresia JavaScript sunt similare în funcționalitatea lor. Cu toate acestea, au scopuri diferite.

Uglificarea JavaScript rescrie codul pentru a-l face mai puțin lizibil de către om. Procesul elimină spațiile albe, punctele și virgulă și comentariile în timp ce redenumește variabilele și funcțiile inline pentru a face codul dificil de citit.

JavaScript are o bibliotecă numită UglifyJS pentru a uglifica codul automat. Îmbunătățește performanța și scade lizibilitatea pentru a face codul sigur și mai puțin atrăgător pentru hoți.

Comprimarea este spre deosebire de minificare sau urâre. Folosește un algoritm de compresie precum GZIP pentru a rescrie codul într-un format binar, făcându-l mult mai mic și o încărcare mai rapidă.

În timp ce minificarea înseamnă reducerea spațiilor albe și a comentariilor, urârea completă a unui cod îl transformă într-o formă ilizibilă prin schimbarea numelor funcțiilor, numelor variabilelor etc. Și compresia rescrie codul în binar pentru a reduce dimensiunea fișierului.

Atât minificarea, cât și compresia sunt reversibile, ceea ce înseamnă că puteți întoarce codul la forma sa originală, dar urârea este ireversibilă.

Cum să reduceți codul JavaScript

Puteți reduce codul JavaScript într-o varietate de moduri. Fiecare dintre aceste metode are o abordare distinctă față de celelalte.

Este aproape imposibil să minimizezi manual toate codurile din fișierele JavaScript mari. Minimizarea manuală a fișierelor JavaScript este posibilă numai pentru fișierele mici, deoarece necesită mult timp.

Pentru a începe procesul manual de reducere a JavaScript, trebuie să deschideți fișierul JavaScript în editorul dvs. de text preferat și să ștergeți manual toate spațiile unul după unul. Va dura câteva minute pentru a elimina toate spațiile și comentariile care au fost setate pentru fișierul JavaScript. Unele dintre aceste editoare de text pot suporta chiar și expresii regulate, ceea ce ar putea accelera semnificativ procesul.

Cealaltă opțiune este să instalați instrumente de minificare pe computer și să le utilizați din linia de comandă. Ar trebui să selectați fișierul pe care doriți să-l minimizați și să-l adăugați la comutatorul din linia de comandă împreună cu fișierul de destinație. Apoi instrumentul de minificare s-ar ocupa de restul.

Cum să reduceți manual JavaScript: Top 5 instrumente

Dezvoltatorii se bazează pe mai multe instrumente de minimizare JavaScript pentru a minimiza codul și pentru a obține performanțe mai bune. Cu toate acestea, fiecare dezvoltator are preferințele sale individuale și optează pentru un instrument diferit. Există o mulțime de instrumente de minimizare JavaScript, toate având calități distincte, așa că va trebui să luați în considerare cu atenție alegerea dvs.

Nu listăm aceste instrumente în funcție de nicio clasare sau categorie. Am inclus doar cele mai eficiente și populare instrumente de minimizare JavaScript.

Iată cele mai bune instrumente de minimizare JavaScript care vă pot ajuta să vă îmbunătățiți performanța web.

1. JSMin

JSMin este o linie de comandă dedicată instrument de minificare JavaScript și o bibliotecă pentru a minimiza codul JavaScript și a face codul cât mai ușor posibil. Doar instalați JSMin ca script global și va elimina foarte eficient toate spațiile albe și comentariile inutile din cod. Ca rezultat, poate reduce instantaneu dimensiunea fișierului JavaScript cu aproximativ 50%.

Deci, dimensiunea redusă va oferi oportunități pentru descărcări rapide. Veți observa, de asemenea, o creștere a stilului de programare mai comunicativ, ca și costul descărcării de noi documente literare.

Cu toate acestea, JSMin are un dezavantaj că nu produce economii optime. Datorită algoritmului său simplist, lasă neschimbate multe caractere de avans de linie. În caz contrar, poate introduce noi erori în cod.

2. Microsoft Ajax Minify

Microsoft Ajax Minifier vă permite să îmbunătățiți performanța aplicațiilor dvs. web prin reducerea dimensiunii fișierelor JavaScript și CSS. Acesta șterge comentariile, spațiul inutil, punctul și virgulă, funcțiile și parantezele.

Pe langa scurtarea variabilelor locale, nume de functii, ghilimele/ ghilimele duble, combinarea declaratiilor de variabile adiacente, sterge codurile neexecutate.

Cu AjaxMin, puteți analiza productivitatea și încărcați miniatorul JS în fundal. Și, când termină minificarea, puteți deschide folderul de productivitate.

3. Google Closure Compiler

Google Closure Compiler este un alt instrument excelent de minificare JavaScript. Formulează JavaScript pentru descărcare rapidă și performanță mai fluidă. De asemenea, verifică sintaxa și sugestiile modificabile, elimină codul și tipurile nefuncționale și vă informează cu privire la dezavantajele JavaScript. Acest instrument adună JavaScript, îl evaluează, elimină codul redundant și îl rescrie.

De asemenea, oferă avertismente pentru JavaScript ilegal și operațiuni potențial periculoase. În plus, este un compilator adecvat de la JavaScript obișnuit la un JavaScript mai bun și redus.

4. Compresor YUI

Compresorul YUI este un instrument de minificare JavaScript și CSS în linie de comandă care vă asigură un raport de compresie mai mare decât majoritatea celorlalți. Este un instrument de minificare scris în Java și se bazează pe Rhino pentru a tokeniza fișierul JavaScript sursă.

În primul rând, YUI examinează fișierul JavaScript sursă pentru a determina construcția acestuia. Apoi tipărește fluxul de simboluri. Apoi, elimină cât mai multe caractere de spațiu alb și înlocuiește toate simbolurile locale cu un simbol de 1 (sau 2 sau 3) litere.

Deoarece YUI Compressor este open-source, puteți examina codul sursă pentru a afla cum funcționează. În plus, YUI este cel mai sigur instrument de minificare JavaScript cu un raport de compresie elocvent.

5. UglifyJS

UglifyJS este unul dintre cele mai populare instrumente de minimizare JavaScript. Poate analiza, reduce și comprima codul JavaScript. În plus, instrumentul generează un fișier de hartă sursă în timp ce comprimă pentru a urmări înapoi la codul original.

De asemenea, poate lua mai multe fișiere de intrare simultan, analizând mai întâi fișierele de intrare, apoi analizând opțiunile.

UglifyJS analizează fișierele de intrare în ordine și aplică orice opțiuni de compresie. Fișierele sunt analizate în același domeniu global, ceea ce înseamnă că o referință dintr-un fișier la o variabilă/funcție declarată într-un alt fișier va fi potrivită în mod corespunzător.

Cum să reduceți automat JavaScript: Top 5 instrumente online

Există o mulțime de minificatoare JavaScript online pentru a vă comprima codul online. Aproape toate instrumentele online de minimizare JavaScript urmează un proces similar de minimizare.

Mai întâi, veți copia și lipi codul sursă JavaScript sau încărcați fișierul cu codul sursă în instrument. Apoi, veți optimiza setările instrumentului de minificare pentru a obține o ieșire specifică bazată pe cerințe, dacă sunt disponibile opțiuni.

În cele din urmă, veți lua acel fișier miniat și îl veți folosi pe site în loc de codul original extins (deși ar trebui să păstrați fișierul original cu codul sursă în siguranță, pentru orice eventualitate).

Iată 5 dintre cele mai bune instrumente online de minimizare JavaScript care vă pot ajuta să vă îmbogățiți performanța web. Deși nu listăm aceste instrumente într-o anumită ordine sau categorie, am inclus doar cele mai populare și eficiente soluții de minimizare JavaScript.

1. Toptal JavaScript Minifier

Toptal JavaScript Minifier oferă un micificator JavaScript online eficient, dar simplu, unde vă puteți condensa JavaScript în câteva secunde. De asemenea, vă permite să convertiți codul într-un fișier .js pentru utilizare ulterioară.

2. JSCompress

JSCompress poate reduce și reduce dimensiunea JavaScript cu 80%. Oferă o interfață simplă click-and-go, în care puteți fie să lipiți codul, fie să încărcați fișierul .js pentru minificare. Veți primi rezultatul minimizat ca cod curat, copiabil, mai degrabă decât un fișier .js . În special, instrumentul folosește UglifyJS și Babel-minify pentru a reduce și a comprima JavaScript.

3. Minifier.org

Minfier.org este unul dintre cele mai simpliste miniaturi JavaScript pe care le puteți utiliza pentru a vă minimiza codurile. Folosește mai multe metode pentru a minimiza codul JavaScript. Instrumentul cântărește dimensiunea codului JavaScript atât înainte, cât și după minificare. Apoi calculează câștigul scriptului după minificare și îl afișează pe ecran.

4. TutorialsPoint Online JavaScript Minifier

Puteți introduce un fișier .js , puteți furniza o adresă URL sau puteți lipi direct codul brut în instrumentul de reducere a JavaScript TutorialsPoint. Instrumentul are un câmp editabil pentru a codifica direct dacă doriți. În plus, are o opțiune de minificare cu un singur clic și puteți descărca codul minimizat într-un fișier .js .

5. Ambalator: Dean Edwards JavaScript Compressor

Dacă aveți nevoie să comprimați codul JavaScript, Packer by Dean Edwards vă poate oferi una dintre cele mai satisfăcătoare experiențe de compresie JavaScript online. Funcționează cu jetoane/atomi JavaScript și modele de biți și octeți.

În plus, vă permite să implementați opțiunea de codificare Base62 și de micșorare a variabilelor în timp ce vă reduceți codul. Pentru a reduce codul dvs. JS, copiați și inserați-l în JavaScript și apăsați butonul de pachet. Va genera automat codul minimizat pentru dvs.

Cum să reduceți JavaScript în WordPress: Top 5 instrumente și pluginuri

Minificarea JavaScript urmează o procedură diferită în WordPress. Minimizarea JavaScript necesită fie suport pentru gazdă, fie instalarea unui plugin WordPress. După instalarea unui plugin de minificare WordPress, acesta se va ocupa de procesul de minificare pentru dvs.

Există numeroase plugin-uri WordPress de minimizare JavaScript. Majoritatea acestor plugin-uri urmează aceeași procedură pentru minimizare și pot fi rulate din tabloul de bord WordPress.

Să explorăm câteva dintre cele mai eficiente instrumente pentru modificarea JavaScript în WordPress:

1. Minificarea codului în MyKinsta

Dacă sunteți client Kinsta, puteți utiliza funcția noastră de reducere a codului pentru a reduce fișierele JS și CSS ale site-ului dvs. Tot ce trebuie să faceți este să activați Kinsta CDN și să bifați câteva casete de selectare în tabloul de bord MyKinsta. Nu trebuie să instalați pluginuri terțe - fișierele dvs. vor fi acum minimizate.

Această minimizare are loc pe rețeaua de margine a Cloudflare, care alimentează și Kinsta CDN. Toate fișierele dvs. reduse sunt, de asemenea, stocate în cache în rețeaua Cloudflare, traducându-se în beneficii suplimentare de performanță.

2. W3 Total Cache

W3 Total Cache vă permite să reduceți JavaScript, CSS și HTML cu control granular. În plus, vă permite să minimizați codul JavaScript sau CSS inline, încorporat sau orice terță parte. De asemenea, amână JavaScript și CSS pentru o încărcare mai rapidă a paginii, în afară de minimificare. În plus, pluginurile oferă mai multe oportunități de minificare JavaScript pentru site-urile WordPress.

3. WP-Optimize

WP-Optimize este un plugin de optimizare WordPress care oferă un instrument avansat de minificare pentru a minimiza CSS și JavaScript, alături de ștergerea memoriei cache și optimizarea site-ului dvs. WordPress. De asemenea, vă dă putere să amânați CSS și JavaScript. Drept urmare, site-ul încarcă activele necritice după încărcarea paginii principale, îmbunătățind performanța paginii.

4. Optimizare automată

Autoptimize este un plugin de minificare WordPress care agregează, minimizează și memorează cache CSS și JavaScript neagregate pentru a reduce timpul de încărcare a paginii și a îmbunătăți performanța site-ului dvs. Poate să minimizeze și să memoreze în cache scripturile, să integreze JavaScript critic și să asincronizeze JavaScript neagregat.

Dacă aștepți cu nerăbdare un plugin WordPress de minificare JavaScript care se va concentra în primul rând pe performanța site-ului tău, Autoptimize este o alegere excelentă.

5. Minimizare rapidă a vitezei

Fast Velocity Minify oferă JavaScript, CSS și minimizarea HTML avansată pentru utilizatorii WordPress. Ea face minificarea pe front-end atunci când are loc prima solicitare necache. În plus, pluginul are o interfață de utilizator simplă și o utilizare simplă.

rezumat

Obținerea performanței maxime de pe pagina dvs. web necesită atenție la detalii minore. Astfel, minimizarea HTML, CSS și JavaScript, introduceți lista de sarcini pentru performanța site-ului dvs.

Am explorat numeroase instrumente și plugin-uri care vă pot ajuta în reducerea JavaScript. Cu toate acestea, fiecare instrument sau plugin menționat servește aceluiași scop și funcționează eficient.
Minificarea JavaScript poate fi dificilă... dar acest ghid este aici pentru a vă ajuta Faceți clic pentru a Tweet
Pe baza cazului dvs. de utilizare, selectați un instrument din această listă și începeți să reduceți codul JavaScript pentru o performanță mai rapidă a site-ului.

Am ratat vreun instrument de minimizare JavaScript sau un plugin de minimizare WordPress care vă place? Anunțați-ne în secțiunea de comentarii!