Mga Compressor ng JavaScript: Paano at Bakit Minimize ang Iyong JS

Mga Compressor ng JavaScript: Paano at Bakit Minimize ang Iyong JS

Nandoon na tayong lahat, natutunan mo kung paano bumuo ng isang kahanga-hangang website , ngunit sa sandaling nai-publish mo ito, ito ay hindi mabagal mabagal.





Ang pag-minimize ng iyong javascript ay isang paraan upang mapabilis ang mga oras ng pagtugon sa website (kasama ang pag-compress ng HTML ), at sa kabutihang palad para sa iyo, ito ay isang madaling proseso. Ngayon ipapakita ko sa iyo ang lahat ng kailangan mong malaman.



Ano ang Ibig Sabihin ng Minify?

Ang proseso ng pagliit (o minifying ) ay isang simpleng konsepto. Kapag nagsulat ka ng code sa JavaScript o anumang ibang wika, maraming mga tampok na kinakailangan lamang upang gawing mas madali ang code para maunawaan ng mga tao - walang pakialam sa mga computer kung ano ang tawag sa iyong mga variable, o kung gaano karaming puwang ang nasa paligid ng mga braket, Halimbawa.





Sa pamamagitan ng minifying code, maaari mong mabawasan nang husto ang laki ng file nito. Samakatuwid ang isang mas maliit na file ay magiging mas mabilis para sa pag-download ng iyong mga gumagamit. Kung nagsusulat ka lamang ng isa o dalawang linya ng JavaScript, malamang na walang kapansin-pansin na pagpapabuti. Gayunpaman, kung nagsusulat ka ng maraming code, o gumagamit ng malalaking aklatan tulad ng jQuery, ang kapansin-pansin na pagtaas ng pagganap at labis na nabawasan ang mga laki ng file ay madaling makamit!

Kung naglo-load ka ng code mula sa isang panlabas na CDN, tulad ng Mga Hosted na Library ng Google , gumamit ka ng minified code.



gaano katagal ang isang mac

Ano ang hitsura ng Minified Code?

Tingnan natin ang ilang mga halimbawa. Mahirap makita ang epekto ng pagliit sa mga maliliit na base ng code, kaya't humihingi ako ng paumanhin nang maaga para sa kanilang mahabang haba.

Narito ang ilan hindi binago Ang JavaScript mula sa aming gabay sa paggamit ng JSON na may Python at 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();
}

Narito ang minified code:

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

Ang minified na bersyon ng code na ito ay 39 porsyento mas maliit. Sa halimbawang ito, mananatiling pareho ang mga variable na pangalan, ngunit ang lahat ng whitespace at mga puna ay tinanggal.



Narito ang isa pang halimbawa mula sa aming gabay sa 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');
});

Narito ang minified code:

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

Sa oras na ito ay mayroon lamang isang 26 porsyento pagbawas - napakahusay pa rin para sa isang maliit na bloke ng code.

Narito ang isang huling halimbawa mula sa aming gabay sa Javascript at sa 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);

Pansinin kung paano mayroong marami ng mga komento at whitespace. Ang minified na bersyon ay binawasan ang mga fileize ng 52 porsyento :

liham na humihingi ng paumanhin para sa hindi inapropratang email na taht ay nakopya sa kanila
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Narito ang mga laki ng ilang mga karaniwang JavaScript Library na inihambing sa kanilang minified na mga bersyon:

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

Ang ilan sa mga silid-aklatan na ito ay nagpapakita ng isang makabuluhang pagbawas ng laki kapag na-compress ( ~ 80 porsyento ), habang ang iba ay hindi gaanong maganda ( ~ 40 porsyento ). Sinabi na, ang anumang pag-save ay gagawing mas mabilis ang iyong website para sa iyong mga gumagamit, at mababawas ang pilay sa iyong web server.

Paano Ka Minify?

Ngayon alam mo kung paano ito gumagana at kung ano ang hitsura nito, sumisid tayo sa kung paano ito gawin. Huwag magalala, hindi na kailangang manu-manong baguhin ang iyong code! Mayroong iba't ibang mga tool na malayang magagamit na hawakan ang proseso para sa iyo.

Gumagana ang mga ito sa maraming paraan. Pinapayagan ka ng karamihan sa mga tool sa online na kopyahin at i-paste ang code, na iproseso at ibabalik sa iyo sa pahina. Ang mga tool na ito ay madalas na magpapahintulot sa iyo na mag-upload din ng maraming mga file.

Narito ang isang maikling pag-ikot ng mga online tool. Karaniwan silang gumagana nang pareho kaya hindi mo na kailangang mag-alala nang labis tungkol sa alin ang pipiliin.

JSCompress - Personal kong ginagamit ang website na ito kung ito ay isang mabilis na trabaho lamang. Mabilis itong tumakbo at ipinakita din sa iyo ang mga tool na ginamit nila upang itayo ito.

Minifier ng JavaScript - Gumagana nang maayos ang tool na ito, ngunit talagang kumikinang ito bilang isang API. Hinahayaan ka nitong bumuo ng iyong sariling pagsasama o serbisyo sa tuktok ng kanilang mayroon nang website.

JavaScript Minifier - Isa pang website na may parehong pangalan, ang tool na ito ay kasing simple ng pagdating nila. Walang mga pagpipilian o menu, isang pindutan lamang.

Minify - Mukhang kamangha-mangha ang website na ito, at malinaw na binigyan ng pansin ng mga developer ang mga detalye dito.

Ang listahang ito ay maaaring magpatuloy magpakailanman. Maraming mga online tool upang mabawasan ang mga website na mahirap magkamali.

Ang mga tool sa pag-minimize ay mayroon din bilang mga tool ng command line o plugin para sa iyong Editor ng JavaScript . Ang mga tool na ito ay madalas na mas mabilis na gamitin, at 'gagana lamang' sa iyong umiiral na code. Hindi na kailangang kopyahin at i-paste, at hindi mo kailangang kunin ang iyong JavaScript mula sa anumang HTML o CSS na maaaring nasa parehong file.

Kung gumagamit ka ng Microsoft Visual Studio, ang Bundler at Minifier ang extension mula sa merkado ay may higit sa 600,000 mga pag-install! Hindi lamang iyon, ngunit regular itong nai-update at magagamit sa GitHub .

Kung ikaw ay isang tagahanga ng Sublime Text tulad ko, pagkatapos ang Minify package ang gusto mo. Sa higit sa 61,000 mga pag-install, ito ay isang napaka-tanyag na pakete, at isa rin magagamit sa GitHub , kung nais mong mag-ambag sa isang bukas na proyekto ng mapagkukunan.

Panghuli, kung ikaw ay PyCharm gumagamit, kaya mo i-configure ito upang isama direkta sa maraming mga karaniwang tool ng compression tulad ng Tagapiga ng YUI . Marami sa mga tool na ito ay direktang nagbibigay lakas sa mga online tool na nakalista sa itaas.

Caveats

Ayan ay mayroon upang maging isang catch di ba? Walang maaaring maging perpekto. Sa gayon, oo, may isang problema, ngunit medyo menor de edad ito at madaling gumana:

Ang minified code ay hindi maibabalik sa orihinal nitong estado.

Kapag binawasan mo ang anumang code, nawala ang orihinal na form nito. Kailangan mong panatilihin ang isang kopya nito kung nais mong magkaroon ng anumang pag-asa na madaling makagawa ng mga pangunahing pagbabago - hindi sapat na gamitin ang kontrol sa bersyon.

Habang posible na unminify ang iyong code, hindi na ito pareho. Ang lahat ng iyong mahalagang mga komento ay nawala, para sa isang bagay.

Hindi ito isang malaking problema, ngunit kailangan mong tandaan kapag naka-coding. Bilang pangunahing panuntunan, hindi naka-compress > pagbuo at naka-compress > paggawa.

Ngayon alam mo na ang lahat na dapat malaman tungkol sa pag-minimize ng JavaScript! Ang minifying code ay isa sa mga paraan upang pigain ang pagganap sa isang server, at ginagawa ito ng lahat ng malalaking website.

Anong mga tool ang ginagamit mo upang mabawasan ang iyong code? Nag-abala ka pa ba? Ipaalam sa amin sa mga komento sa ibaba!

kung paano i-on ang mga abiso sa youtube

Credit sa Larawan: NavinTar sa pamamagitan ng Shutterstock

Magbahagi Magbahagi Mag-tweet Email Tanggalin ang Mga Windows File at Folder na Ito upang Palayain ang Space ng Disk

Kailangang i-clear ang disk space sa iyong Windows computer? Narito ang mga Windows file at folder na maaaring ligtas na matanggal upang mapalaya ang puwang ng disk.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • JavaScript
  • Java
  • Disenyo ng web
Tungkol sa May-akda Joe Coburn(136 Mga Artikulo Na-publish)

Si Joe ay nagtapos sa Computer Science mula sa University of Lincoln, UK. Siya ay isang propesyonal na developer ng software, at kapag hindi siya lumilipad ng mga drone o sumusulat ng musika, madalas siyang matagpuan na kumukuha ng mga larawan o gumawa ng mga video.

Higit pa Mula kay Joe Coburn

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe