JavaScript kompresori: Kako i zašto minimizirati vaš JS

Svi smo bili tamo, naučio si kako izgraditi sjajnu web stranicu , ali kad ga jednom objavite, to je nepodnošljivo sporo.

Umanjivanje vašeg javascripta jedan je od načina da se ubrza vrijeme odgovora web stranice (zajedno s komprimiranje HTML -a ), i na vašu sreću, to je jednostavan proces. Danas ću vam pokazati sve što trebate znati.

Što znači umanjivanje?

Postupak minifikacija (ili umanjivanje ) je jednostavan koncept. Kada pišete kôd na JavaScriptu ili bilo kojem drugom jeziku, postoje mnoge značajke koje su potrebne samo da bi ljudima olakšale razumijevanje koda - računala ne zanimaju kako nazivate svoje varijable niti koliko je razmaka oko zagrada, na primjer.

Smanjivanjem koda možete drastično smanjiti veličinu datoteke. Manja će datoteka vašim korisnicima biti brže dostupna za preuzimanje. Ako pišete samo jedan ili dva retka JavaScript -a, vjerojatno neće biti zamjetnog poboljšanja. Međutim, ako pišete mnogo koda ili koristite velike biblioteke poput jQueryja, lako se mogu postići zamjetna povećanja performansi i drastično smanjene veličine datoteka!

Ako učitavate kôd s vanjskog CDN -a, npr Knjižnice koje hostira Google , koristili ste minificirani kôd.

kako napraviti križni kabel

Kako izgleda minificirani kod?

Pogledajmo neke primjere. Teško je vidjeti utjecaj minifikacije na male baze kodova, pa se unaprijed ispričavam na njihovoj dugotrajnosti.

Evo nekih neminimiziran JavaScript iz našeg vodiča za upotrebu JSON -a s Pythonom i JavaScriptom:

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

Evo skraćenog 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()}};

Ova minificirana verzija koda je 39 posto manji. U ovom primjeru nazivi varijabli ostaju isti, ali su uklonjeni svi razmaci i komentari.

Evo još jednog primjera iz našeg vodiča 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');  
});

Evo skraćenog 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')});

Ovaj put bilo je samo a 26 posto smanjenje - to je još uvijek jako dobro za tako manji blok koda.

Evo posljednjeg primjera iz našeg vodiča za 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);

Obratite pažnju na to kako postoje puno komentara i razmaka. Minimizirana verzija smanjila je veličinu datoteke za 52 posto :

USB kontroler xbox one ne radi

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

Evo veličina nekih uobičajenih JavaScript knjižnica u usporedbi s njihovim minificiranim verzijama:

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

Neke od ovih knjižnica pokazuju značajno smanjenje veličine kada se komprimiraju ( ~ 80 posto ), dok drugi nisu baš tako dobri ( ~ 40 posto ). Međutim, svaka ušteda učinit će vašu web stranicu bržom za vaše korisnike i smanjiti opterećenje vašeg web poslužitelja.

Kako umanjujete?

Sada znate kako to funkcionira i kako izgleda, hajdemo zaroniti u to kako to učiniti. Ne brinite, nema potrebe za ručnim mijenjanjem koda! Na raspolaganju su različiti alati koji upravljaju procesom umjesto vas.

Oni djeluju na nekoliko načina. Većina mrežnih alata omogućuje vam kopiranje i lijepljenje koda, koji će zatim obraditi i vratiti vam na stranicu. Ovi alati često će vam omogućiti i učitavanje više datoteka.

Evo kratkog pregleda online alata. Uglavnom rade isto pa se ne morate previše brinuti koji ćete izabrati.

JSCompress - Osobno najviše koristim ovu web stranicu ako je to samo brz posao. Brzo se pokreće, a čak vam pokazuju i alate za izradu.

JavaScript Minifier - Ovaj alat dobro radi, ali zaista sjaji kao API. To vam omogućuje izgradnju vlastite integracije ili usluge na njihovoj postojećoj web stranici.

JavaScript Minifier - Još jedna web stranica s istim imenom, ovaj alat je jednostavan kao i oni. Nema opcija ili izbornika, samo jedno dugme.

Umanjiti - Ova web stranica izgleda nevjerojatno, a programeri su jasno obratili pozornost na detalje ovdje.

Ovaj popis mogao bi se nastaviti zauvijek. Postoji toliko mnogo mrežnih alata za umanjivanje web stranica da je teško pogriješiti.

Alati za umanjivanje također postoje kao alati naredbenog retka ili dodaci za vaš JavaScript uređivač . Ovi su alati često mnogo brži za upotrebu i 'samo rade' s vašim postojećim kodom. Nema potrebe za kopiranjem i lijepljenjem, a ne morate izdvajati svoj JavaScript iz bilo kojeg HTML -a ili CSS -a koji se mogu nalaziti u istoj datoteci.

Ako koristite Microsoft Visual Studio, Bundler i Minifier proširenje s tržišta ima više od 600.000 instalacija! I ne samo to, već se redovito ažurira i dostupno na GitHubu .

Ako ste ljubitelj Uzvišeni tekst kakav sam, onda Umanjiti paket je onaj koji želite. S više od 61.000 instalacija, to je vrlo popularan paket, a također je i takav dostupno na GitHubu , ako želite pridonijeti projektu otvorenog koda.

Konačno, ako ste a PyCharm korisniče, možeš konfigurirajte ga za integraciju izravno s mnogim uobičajenim alatima za kompresiju, kao što su YUI kompresor . Mnogi od ovih alata izravno pokreću gore navedene mrežne alate.

Upozorenja

Tamo ima biti ulov zar ne? Ništa nikada ne može biti savršeno. Pa, da, postoji jedan problem, ali on je prilično mali i lako se rješava:

Minificirani kôd se ne može vratiti u izvorno stanje.

Kada minimizirate bilo koji kôd, njegov se izvorni oblik gubi. Morate zadržati njegovu kopiju ako želite imati nadu da ćete lako napraviti velike promjene - nije dovoljno koristiti kontrolu verzija.

Iako je moguće da unminify vaš kod, nikad više nije isti. Svi vaši vrijedni komentari su izgubljeni, kao prvo.

Ovo nije veliki problem, ali morate to imati na umu pri kodiranju. Kao osnovno pravilo, nekomprimirano > razvija i stisnuta > proizvodnja.

Sada znate sve što trebate znati o umanjivanju JavaScripta! Umanjivanje koda jedan je od načina istiskivanja performansi s poslužitelja, a sve velike web stranice to rade.

Koje alate koristite za smanjivanje koda? Smetaš li uopće? Javite nam u komentarima ispod!

zašto mi se telefon sporo puni

Kredit za sliku: NavinTar putem Shutterstocka

Udio Udio Cvrkut E -pošta Izbrišite ove Windows datoteke i mape kako biste oslobodili prostor na disku

Trebate očistiti prostor na disku na računalu sa sustavom Windows? Evo Windows datoteka i mapa koje se mogu sigurno izbrisati kako bi se oslobodio prostor na disku.

Pročitajte Dalje Povezane teme

Programiranje
JavaScript
Java
Web dizajn

O autoru Joe Coburn(136 objavljenih članaka)

Joe je diplomirao računalne znanosti na Sveučilištu Lincoln, UK. On je profesionalni programer softvera, a kad ne leti bespilotnim letjelicama ili ne piše glazbu, često ga se može zateći kako fotografira ili proizvodi video zapise.

Više od Joea Coburna

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu