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

Am fost toți acolo, ați învățat cum să construiți un site minunat Cum să faci un site web: Pentru începători Cum să faci un site web: Pentru începători Azi te voi îndruma prin procesul de a face un site complet de la zero. Nu vă faceți griji dacă acest lucru pare dificil. Te voi îndruma în fiecare pas al drumului. Citește mai mult, dar o dată ce o publici, este insuportabil de lentă.

Minifierea javascript-ului dvs. este o modalitate de a accelera timpul de răspuns al site-ului web (împreună cu comprimarea codului HTML) Cum funcționează HTML comprimat și de ce aveți nevoie de el Cum funcționează HTML comprimat și de ce aveți nevoie de el În acest articol vom trece peste cele două metode principale pentru HTML-ul comprimat, de ce ar trebui să fie reduse fișierele HTML și cum să procedați. Citiți mai multe) și, din fericire pentru dvs., este un proces ușor. Astăzi vă voi arăta tot ce trebuie să știți.

Ce înseamnă minime??

Procesul de minification (sau Minimizarea) este un concept simplu. Când scrieți un cod în JavaScript sau într-o altă limbă, există multe caracteristici necesare numai pentru a face codul mai ușor de înțeles de către oameni - computerele nu le pasă de ceea ce numiți variabilele dvs. sau cât de mult spațiu există între paranteze, pentru exemplu.

Prin diminuarea codului, puteți reduce drastic dimensiunea fișierului. Un fișier mai mic va fi, prin urmare, mai rapid pentru descărcarea de către utilizatori. Dacă scrieți doar una sau două linii de JavaScript, probabil că nu va fi o îmbunătățire semnificativă. Cu toate acestea, dacă scrieți o mulțime de cod sau folosind biblioteci mari, cum ar fi jQuery, creșterile remarcabile ale performanței și dimensiunile reduse drastic ale fișierelor sunt ușor de atins!

Dacă încărcați codul dintr-un CDN extern Ce CDN-uri sunt și de ce spațiul de stocare nu mai este o problemă Ce CDN-uri sunt și de ce spațiul de stocare nu mai este o problemă CDN-urile fac internetul rapid și site-urile web accesibile chiar și atunci când scalați la milioane de utilizatori. În primul rând, lățimea de bandă costă bani; cei din noi pe contracte limitate știu prea bine. Nu numai că ... Citește mai mult, cum ar fi Google Librări găzduite, ați folosit codul miniatural.

Ce arată codul miniatural??

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

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

// configurați unele JSON pentru a utiliza var cars = "make": "Porsche", "model": "911S", "make" "face": "Jaguar", "model": "Mark VII"]; window.onload = function () // setati butonul click document.getElementById ("theButton") onclick = function () doWork ();  functie doWork () // ajax JSON la server $ .post ("receptor", masini, functie () ); // stop link reîncărcarea paginii event.preventDefault (); 

Iată codul miniaturat:

(de exemplu, "Porsche", model: "911S", make: "" Mercedes-Benz ", model:" 220SE ", marca: Jaguar", model: "Mark VII" munceste();

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

Iată un alt exemplu din ghidul nostru pentru jQuery:

// dfd == amânat var dfd = $ .Deferred (); funcția doThing () $ .get ('some / slow / url', funcția () dfd.resolve ();); returnați dfd.promise ();  $ .when (doThing ()), apoi (funcția () console.log ('YAY, este terminată'););

Iată codul miniaturat:

() dtdd (), dfd (), dfd ($). () () console.log ("YAY, este terminat"));

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

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

// declarați o nouă variabilă pentru a ține un nou element h1 var newHeading = document.createElement ("h1"); // adăugați nodul text în documentul var h1Text = document.createTextNode ("Nivelul 1"); // faceți un nod copil al noii poziții newHeading.appendChild (h1Text); // adăugați acest lucru ca un copil al elementului definit ca "bt" document.getElementById ("bt") appendChild (newHeading);

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

var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Nivelul 1"), newHeading.appendChild (h1Text), document.getElementById ("bt") appendChild (newHeading);

Iată dimensiunile unor biblioteci JavaScript obișnuite comparativ cu versiunile lor miniaturate:

1. Highcharts: 1 MB> 201 KB
2. jQuery: 270 KB> 90 KB
3. MooTools: 164 KB> 93 KB

Unele dintre aceste biblioteci prezintă o reducere semnificativă a dimensiunilor atunci când sunt comprimate (~ 80%), în timp ce altele nu sunt atât de bune (~ 40%). Acestea fiind spuse, orice salvare va face site-ul dvs. mai rapid pentru utilizatorii dvs. și va reduce solicitarea serverului dvs. web.

Cum vă minificați?

Acum știi cum funcționează și cum arată, hai să ne aruncăm cum se face. Nu vă faceți griji, nu este nevoie să vă modificați manual codul! Există o varietate de instrumente disponibile în mod gratuit, care gestionează procesul pentru dvs..

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

Iată o scurtă rotundă a instrumentelor online. Ele lucrează cel mai mult la fel, astfel încât să nu aveți nevoie să vă faceți griji prea mult despre care să alegeți.

JSCompress - Eu personal folosesc acest site cel mai mult dacă este doar o treabă rapidă. E rapid pentru a alerga și chiar vă arată instrumentele pe care le-au construit.

JavaScript Minifier - Acest instrument funcționează bine, dar într-adevăr strălucește ca un API. Aceasta vă permite să vă construiți propria integrare sau serviciu pe site-ul dvs. existent.

JavaScript Minifier - Un alt site cu același nume, acest instrument este la fel de simplu ca și cum vin. Nu există opțiuni sau meniuri, doar un singur buton.

Minify - Acest site pare uimitor, iar dezvoltatorii au acordat atenție detaliilor de aici.

Această listă ar putea continua pentru totdeauna. Există atât de multe instrumente online pentru a minima site-urile web că este greu să meargă bine.

Instrumentele de miniatură există, de asemenea, ca unelte de linie de comandă sau pluginuri pentru editorul dvs. JavaScript Cele mai bune 5 editori Javascript pentru codificatori productivi și programatori Cele mai bune 5 editori Javascript pentru codificatori și programatori productivi În prezent, există doar cinci editori care merită atenția dvs. atunci când scrieți JavaScript. Puteți găsi zeci de alternative, dar niciunul dintre ele nu deține o lumânare la acestea, deci nu pierdeți timpul. Citeste mai mult . Aceste instrumente sunt adesea mult mai rapide de utilizat și “doar munca” cu codul existent. Nu este nevoie să copiați și să lipiți și nu trebuie să extrageți JavaScript din orice HTML sau CSS care poate fi în același fișier.

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

Dacă sunteți un fan al textului sublim ca mine, atunci pachetul Minify este cel pe care îl doriți. Cu peste 61.000 de instalări, este un pachet foarte popular și unul disponibil și pe GitHub, dacă doriți să contribuiți la un proiect open source.

În cele din urmă, dacă sunteți utilizator PyCharm, îl puteți configura să se integreze direct cu multe instrumente comune de compresie, cum ar fi compresorul YUI. Multe dintre aceste instrumente activează direct instrumentele online enumerate mai sus.

caveats

Acolo are a fi un drept de captură? Nimic nu poate fi vreodată perfect. Ei bine, da, există o problemă, dar este destul de minor și ușor de lucrat în jurul valorii de:

Codul miniaturat nu poate fi restabilit în starea inițială.

Când minifiționați orice cod, forma sa originală este pierdută. Aveți nevoie să păstrați o copie a acesteia dacă vreți să aveți speranță de a face schimbări majore - nu este suficient să utilizați controlul versiunii Ce este Git și de ce ar trebui să utilizați controlul versiunii Dacă sunteți dezvoltator Ce este Git & Ar trebui să utilizați controlul versiunii Dacă sunteți dezvoltator Ca dezvoltatori web, o mulțime de timp avem tendința de a lucra pe site-uri de dezvoltare locală, apoi încărcați totul atunci când am terminat. Acest lucru este bine când este doar tine și schimbările sunt mici, ... Citește mai mult .

Deși este posibil să vă dezmințiți codul, nu este niciodată același lucru din nou. Toate comentariile tale valoroase sunt pierdute, pentru un singur lucru.

Aceasta nu este o problemă uriașă, dar trebuie să țineți minte la codificare. Ca regulă de bază, necomprimat > dezvoltare și comprimat > producție.

Acum știți tot ce trebuie să știți despre minimizarea JavaScript-ului! Minificarea codului este una dintre modalitățile de a stoarce performanța dintr-un server, iar toate site-urile mari o fac.

Ce instrumente folosiți pentru a vă micșora codul? Chiar te deranjezi? Spuneți-ne în comentariile de mai jos!

Credit de imagine: NavinTar prin Shutterstock

Explorați mai multe despre: Java, JavaScript, Web Design.