Compresoare JavaScript: Cum și de ce să vă minimizați JS

Am aflat cu toții acolo, ați aflat cum să construiești un site web minunat , dar odată ce îl publicați, este insuportabil de lent.

Reducerea javascriptului este o modalitate de a accelera timpul de răspuns al site-ului web (împreună cu comprimarea HTML ) și, din fericire pentru dvs., este un proces ușor. Astăzi vă voi arăta tot ce trebuie să știți.

Ce înseamnă Minify?

Procesul de minificare (sau minifiere ) este un concept simplu. Când scrieți cod în JavaScript sau în orice altă limbă, există multe caracteristici care sunt necesare doar pentru a facilita înțelegerea codului de către oameni - computerelor nu le pasă de ceea ce numiți variabilele dvs. sau de cât spațiu există între paranteze, de exemplu.

Prin reducerea codului, puteți reduce drastic dimensiunea acestuia. Prin urmare, un fișier mai mic va fi descărcat mai repede pentru utilizatorii dvs. Dacă scrieți doar una sau două linii de JavaScript, probabil că nu va exista o îmbunătățire vizibilă. Cu toate acestea, dacă scrieți o mulțime de cod sau utilizați biblioteci mari, cum ar fi jQuery, performanțele vizibile cresc și dimensiunile de fișiere reduse drastic sunt ușor de realizat!

Dacă încărcați cod de pe un CDN extern, cum ar fi Bibliotecile găzduite de Google , ați folosit cod minimizat.

cum să afli despre cineva

Cum arată codul minificat?

Să ne uităm la câteva exemple. Este greu de văzut impactul minimizării asupra bazelor de coduri mici, așa că îmi cer scuze în avans pentru lungimea lor lungă.

Iată câteva neminificat JavaScript din ghidul nostru pentru utilizarea JSON cu Python și JavaScript:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

Iată codul minimizat:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

Această versiune redusă a codului este 39 la sută mai mica. În acest exemplu, numele variabilelor rămân aceleași, dar toate spațiile albe și comentariile au fost eliminate.

Iată un alt exemplu din ghidul nostru către jQuery:

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

Iată codul minimizat:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

De data aceasta a existat doar un 26 la sută reducere - asta este încă foarte bun pentru un astfel de bloc minor de cod.

Iată un ultim exemplu din ghidul nostru pentru Javascript și DOM:

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

Observați cum există mult de comentarii și spații albe. Versiunea minimizată a redus dimensiunea fișierului cu 52 la sută :

cum se micșorează un fișier jpg

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Iată dimensiunile unor biblioteci JavaScript obișnuite în comparație cu versiunile lor minificate:

Diagramele principale: 1 MB> 201 KB
jQuery: 270 KB> 90 KB
MooTools: 164 KB> 93 KB

Unele dintre aceste biblioteci prezintă o reducere semnificativă a dimensiunii atunci când sunt comprimate ( ~ 80 la sută ), în timp ce altele nu sunt chiar atât de bune ( ~ 40 la sută ). Acestea fiind spuse, orice salvare va face site-ul dvs. web mai rapid pentru utilizatori și va reduce presiunea pe serverul dvs. web.

Cum te minimizezi?

Acum știți cum funcționează și cum arată, să ne scufundăm în cum să o facem. Nu vă faceți griji, nu este deloc necesar să vă modificați manual codul! Există o varietate de instrumente disponibile gratuit care se ocupă de acest proces.

Acestea funcționează în mai multe moduri. Majoritatea instrumentelor online vă permit să copiați și să inserați cod, pe care apoi îl vor procesa și reveni la dvs. în pagină. Aceste instrumente vă vor permite adesea să încărcați mai multe fișiere.

Iată o scurtă prezentare a instrumentelor online. Majoritatea funcționează la fel, astfel încât nu trebuie să vă faceți griji prea mult cu privire la care să alegeți.

JSCompress - Eu personal folosesc acest site cel mai mult dacă este doar o treabă rapidă. Este rapid să rulezi și chiar îți arată instrumentele folosite pentru a-l construi.

JavaScript Minifier - Acest instrument funcționează bine, dar chiar strălucește ca API. Acest lucru vă permite să vă construiți propria integrare sau serviciu deasupra site-ului lor web existent.

JavaScript Minifier - Un alt site web cu același nume, acest instrument este la fel de simplu pe cât apar. Fără opțiuni sau meniuri, doar un buton.

Minimizează - Acest site web arată uimitor, iar dezvoltatorii au acordat clar atenție detaliilor de aici.

Această listă ar putea continua pentru totdeauna. Există atât de multe instrumente online pentru minimizarea site-urilor web, încât este greu să greșiți.

Instrumentele de reducere există, de asemenea, ca instrumente pentru linia de comandă sau pluginuri pentru dvs. Editor JavaScript . Aceste instrumente sunt adesea mult mai rapide de utilizat și „funcționează doar” cu codul dvs. existent. Nu este nevoie să copiați și să lipiți și nu trebuie să extrageți JavaScript din orice HTML sau CSS care ar putea fi în același fișier.

Dacă utilizați Microsoft Visual Studio, Bundler și Minifier extensia de pe piață are peste 600.000 de instalări! Nu numai asta, dar este actualizat în mod regulat și disponibil pe GitHub .

Dacă ești un fan al Text sublim cum sunt eu, atunci Minimizează pachetul este cel pe care îl doriți. Cu peste 61.000 de instalări, este un pachet foarte popular și unul care este și el disponibil pe GitHub , dacă doriți să contribuiți la un proiect open source.

În cele din urmă, dacă sunteți un PyCharm utilizator, poți configurați-l pentru a se integra direct cu multe instrumente comune de compresie precum Compresor YUI . Multe dintre aceste instrumente alimentează direct instrumentele online enumerate mai sus.

Avertismente

Acolo are a fi o captură nu? Nimic nu poate fi vreodată perfect. Ei bine, da, există o problemă, dar este destul de minoră și ușor de rezolvat:

Codul redus nu poate fi restabilit la starea sa inițială.

Când minimizați orice cod, forma sa originală se pierde. Trebuie să păstrați o copie a acestuia dacă doriți să aveți speranța de a face cu ușurință modificări majore - nu este suficient să utilizați controlul versiunii.

În timp ce este posibil să unminify codul dvs., nu mai este niciodată la fel. Toate comentariile voastre valoroase sunt pierdute, pentru un singur lucru.

Aceasta nu este o problemă uriașă, dar trebuie să o țineți cont atunci când codificați. Ca regulă de bază, necomprimat > dezvoltarea și comprimat > producție.

Acum știți tot ce trebuie să știți despre reducerea JavaScript! Minimizarea codului este una dintre modalitățile de a elimina performanța unui server și toate marile site-uri web o fac.

Ce instrumente folosiți pentru a vă minimiza codul? Ba chiar te deranjezi? Spuneți-ne în comentariile de mai jos!

cum să organizezi cărți în aplicația Kindle

Credit de imagine: NavinTar prin Shutterstock

Acțiune Acțiune Tweet E-mail Ștergeți aceste fișiere și foldere Windows pentru a elibera spațiu pe disc

Trebuie să goliți spațiul pe disc pe computerul dvs. Windows? Iată fișierele și folderele Windows care pot fi șterse în siguranță pentru a elibera spațiu pe disc.

Citiți în continuare Subiecte asemănătoare

Programare
JavaScript
Java
Web design

Despre autor Joe Coburn(136 articole publicate)

Joe este absolvent de Informatică de la Universitatea Lincoln, Marea Britanie. Este un dezvoltator de software profesionist și, atunci când nu zboară cu drone sau nu scrie muzică, poate fi găsit adesea făcând fotografii sau producând videoclipuri.

Mai multe de la Joe Coburn

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona