Kompresorji JavaScript: Kako in zakaj minimizirati vaš JS

Kompresorji JavaScript: Kako in zakaj minimizirati vaš JS

Vsi smo bili tam, naučili ste se kako zgraditi super spletno stran , a ko ga enkrat objaviš, je neznosno počasen.





Zmanjšanje vašega javascripta je eden od načinov za pospešitev odzivnega časa spletnega mesta (skupaj z stiskanje HTML -ja ) in na srečo za vas je to enostaven postopek. Danes vam bom pokazal vse, kar morate vedeti.



Kaj pomeni pomanjšati?

Postopek pomanjšanje (oz pomanjševanje ) je preprost koncept. Ko pišete kodo v JavaScript ali katerem koli drugem jeziku, obstaja veliko funkcij, ki so potrebne le za lažje razumevanje kode - računalnikom je vseeno, kako imenujete svoje spremenljivke ali koliko je razmika med oklepaji, na primer.





Z zmanjšanjem kode lahko drastično zmanjšate njeno velikost. Manjša datoteka bo zato uporabnikom hitreje naložena. Če pišete samo eno ali dve vrstici JavaScript, verjetno ne bo opaznega izboljšanja. Če pa pišete veliko kode ali uporabljate velike knjižnice, kot je jQuery, je opazno povečanje zmogljivosti in drastično zmanjšanje velikosti datotek enostavno dosegljivo!

Če kodo naložite iz zunanjega CDN -ja, kot je npr Knjižnice, ki jih gosti Google ste uporabili poenostavljeno kodo.



kako videti, kdo je naročen na vas na youtube

Kako izgleda poenostavljena koda?

Poglejmo nekaj primerov. Težko je videti vpliv pomanjšanja na majhne kode, zato se vnaprej opravičujem za njihovo dolžino.

Tukaj je nekaj minimiziran JavaScript iz našega priročnika za uporabo JSON s Pythonom in 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();
}

Tu je pomanjšana koda:

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()}};

Ta poenostavljena različica kode je 39 odstotkov manjši. V tem primeru imena spremenljivk ostajajo enaka, vendar so bili odstranjeni vsi presledki in komentarji.



Tu je še en primer iz našega vodnika za 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');
});

Tu je pomanjšana koda:

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')});

Tokrat je bil samo a 26 odstotkov zmanjšanje - to je še vedno zelo dobro za tako manjši blok kode.

Tu je še zadnji primer iz našega priročnika za Javascript in 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);

Opazujte, kako obstajajo veliko komentarjev in presledkov. Pomanjšana različica je zmanjšala velikost datoteke za 52 odstotkov :

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

Tu so velikosti nekaterih običajnih knjižnic JavaScript v primerjavi z njihovimi pomanjšanimi različicami:

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

Nekatere od teh knjižnic pri stiskanju pokažejo znatno zmanjšanje velikosti ( ~ 80 odstotkov ), drugi pa niso tako dobri ( ~ 40 odstotkov ). Kljub temu bo vsak prihranek pospešil vaše spletno mesto za uporabnike in zmanjšal obremenitev vašega spletnega strežnika.

Kako pomanjšate?

Zdaj veste, kako deluje in kako izgleda, poglejmo, kako to storiti. Brez skrbi, kode sploh ni treba ročno spreminjati! Na voljo so različna orodja, ki za vas vodijo postopek.

Ti delujejo na več načinov. Večina spletnih orodij vam omogoča kopiranje in lepljenje kode, ki jo nato obdelajo in vam jo vrnejo na stran. Ta orodja vam pogosto omogočajo tudi nalaganje več datotek.

Tu je kratek povzetek spletnih orodij. Večinoma delujejo enako, zato vam ni treba preveč skrbeti, katero izbrati.

JSCompress - Osebno najbolj uporabljam to spletno stran, če gre le za hitro delo. Hitro teče in pokažejo vam celo orodja, ki so jih uporabili za izdelavo.

JavaScript Minifier - To orodje dobro deluje, vendar resnično sije kot API. To vam omogoča, da na svoji obstoječi spletni strani zgradite lastno integracijo ali storitev.

JavaScript Minifier - Še eno spletno mesto z istim imenom, to orodje je tako preprosto, kot se pojavi. Ni možnosti ali menijev, samo en gumb.

Pomanjšaj - To spletno mesto izgleda neverjetno, razvijalci pa so očitno pozorni na podrobnosti tukaj.

Ta seznam se lahko nadaljuje za vedno. Spletnih orodij za poenostavitev spletnih mest je toliko, da je težko zgrešiti.

Orodja za minimiziranje obstajajo tudi kot orodja ali vtičniki za ukazno vrstico Urejevalnik JavaScript . Ta orodja so pogosto veliko hitrejša za uporabo in 'samo delujejo' z obstoječo kodo. Ni vam treba kopirati in prilepiti, JavaScript pa vam ni treba izvleči iz kode HTML ali CSS, ki je morda v isti datoteki.

Če uporabljate Microsoft Visual Studio, je Komplet in minifikator razširitev s trga ima več kot 600.000 namestitev! Ne samo to, ampak se redno posodablja in na voljo na GitHubu .

Če ste ljubitelj Vrhunsko besedilo takšen kot sem, potem Pomanjšaj paket je tisti, ki ga želite. Z več kot 61.000 namestitvami je zelo priljubljen in tudi takšen na voljo na GitHubu , če želite prispevati k odprtokodnemu projektu.

Končno, če ste a PyCharm uporabnik, lahko konfigurirajte za integracijo neposredno s številnimi običajnimi orodji za stiskanje, kot so YUI kompresor . Mnoga od teh orodij neposredno poganjajo zgoraj navedena spletna orodja.

Opozorila

Tam ima biti ulov kajne? Nič ne more biti popolno. No, ja, obstaja en problem, vendar je precej majhen in ga je enostavno rešiti:

Minimizirane kode ni mogoče obnoviti v prvotno stanje.

Ko pomanjšate katero koli kodo, se njena prvotna oblika izgubi. Če želite imeti upanje, da boste zlahka naredili velike spremembe, morate obdržati njegovo kopijo - ni dovolj, da uporabite nadzor različic.

Čeprav je možno razminirati vaša koda, nikoli več ni ista. Vsi vaši dragoceni komentarji so izgubljeni.

To ni velik problem, vendar ga morate upoštevati pri kodiranju. Kot osnovno pravilo, nestisnjen > razvoj in stisnjen > proizvodnja.

Zdaj veste vse, kar morate vedeti o poenostavitvi JavaScript! Zmanjševanje kode je eden od načinov, kako iz streha iztisniti zmogljivost, in to počnejo vsa velika spletna mesta.

Katera orodja uporabljate za poenostavitev kode? Se sploh motiš? Sporočite nam v spodnjih komentarjih!

koliko časa bo Windows 10 brezplačen

Zasluge za sliko: NavinTar prek Shutterstock

Deliti Deliti Cvrkutati E-naslov Izbrišite te datoteke in mape Windows, da sprostite prostor na disku

Ali morate v računalniku s sistemom Windows počistiti prostor na disku? Tu so datoteke in mape Windows, ki jih je mogoče varno izbrisati, da sprostite prostor na disku.

Preberite Naprej Sorodne teme
  • Programiranje
  • JavaScript
  • Java
  • Oblikovanje spletnih strani
O avtorju Joe Coburn(136 objavljenih člankov)

Joe je diplomiral iz računalništva na Univerzi v Lincolnu v Veliki Britaniji. Je poklicni razvijalec programske opreme in ko ne leti z brezpilotnimi letali ali ne piše glasbe, ga pogosto najdejo pri fotografiranju ali ustvarjanju videoposnetkov.

Več od Joea Coburna

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite