„JavaScript“ kompresoriai: kaip ir kodėl sumažinti JS

Mes visi ten buvome, jūs išmokote kaip sukurti nuostabią svetainę , bet kai tik jį paskelbsi, jis bus nepakeliamai lėtas.

„JavaScript“ sumažinimas yra vienas iš būdų paspartinti svetainės atsako laiką (kartu su HTML suspaudimas ), o jūsų laimei, tai lengvas procesas. Šiandien aš jums parodysiu viską, ką reikia žinoti.

Ką reiškia sumažinti?

Procesas minifikacija (arba minifikavimas ) yra paprasta sąvoka. Kai rašote kodą „JavaScript“ ar bet kuria kita kalba, yra daug funkcijų, kurių reikia tik tam, kad žmonėms būtų lengviau suprasti kodą - kompiuteriams nerūpi, kaip jūs vadinate kintamuosius, ar kiek tarpų yra skliausteliuose, pavyzdžiui.

Sumažinus kodą, galite drastiškai sumažinti jo failo dydį. Todėl vartotojai galės greičiau atsisiųsti mažesnį failą. Jei rašote tik vieną ar dvi „JavaScript“ eilutes, pastebimo pagerėjimo greičiausiai nebus. Tačiau jei rašote daug kodo arba naudojate dideles bibliotekas, pvz., „JQuery“, pastebimai padidėja našumas ir labai sumažėja failų dydis!

Jei įkeliate kodą iš išorinio CDN, pvz „Google“ priglobtos bibliotekos , naudojote sutrumpintą kodą.

kaip patobulinti nešiojamąjį kompiuterį žaidimams

Kaip atrodo sumažintas kodas?

Pažvelkime į keletą pavyzdžių. Sunku pastebėti minifikacijos poveikį mažiems kodams, todėl iš anksto atsiprašau už jų ilgį.

Štai keletas neminimalus „JavaScript“ iš mūsų vadovo, kaip naudoti JSON su „Python“ ir „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();  
}

Štai sutrumpintas kodas:

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

Ši sutrumpinta kodo versija yra 39 proc mažesnis. Šiame pavyzdyje kintamųjų pavadinimai išlieka tie patys, tačiau visi tarpai ir komentarai buvo pašalinti.

Štai dar vienas „jQuery“ vadovo pavyzdys:

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

Štai sutrumpintas kodas:

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

Šį kartą buvo tik a 26 proc sumažinimas - tai vis tiek labai gerai tokiam nedideliam kodo blokui.

Štai paskutinis pavyzdys iš mūsų „Javascript“ ir DOM vadovo:

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

Atkreipkite dėmesį, kaip yra daug komentarų ir tarpų. Sumažinta versija sumažino failo dydį 52 proc :

kas yra lte mano telefone

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

Štai kai kurių įprastų „JavaScript“ bibliotekų dydžiai, palyginti su jų sumažintomis versijomis:

Aukščiausios diagramos: 1 MB> 201 KB
„jQuery“: 270 KB> 90 KB
„MooTools“: 164 KB> 93 KB

Kai kurios iš šių bibliotekų suspaudus žymiai sumažina dydį ( ~ 80 proc ), o kiti nėra tokie geri ( ~ 40 proc ). Be to, bet koks išsaugojimas pagreitins jūsų svetainę naudotojams ir sumažins jūsų tinklo serverio apkrovą.

Kaip sumažinti?

Dabar žinote, kaip tai veikia ir kaip atrodo, pasinerkime, kaip tai padaryti. Nesijaudinkite, nereikia rankiniu būdu keisti kodo! Yra daugybė laisvai prieinamų įrankių, kurie atlieka šį procesą už jus.

Šie veikia keliais būdais. Dauguma internetinių įrankių leidžia nukopijuoti ir įklijuoti kodą, kurį jie apdoros ir grąžins jums puslapyje. Šie įrankiai dažnai leidžia įkelti ir kelis failus.

Pateikiame trumpą internetinių įrankių apžvalgą. Jie dažniausiai veikia vienodai, todėl nereikia per daug sukti galvos, kurį pasirinkti.

JSCompress - Aš asmeniškai labiausiai naudojuosi šia svetaine, jei tai tik greitas darbas. Jis veikia greitai ir netgi parodo įrankius, kuriuos jie panaudojo kurdami.

„JavaScript Minifier“ - Šis įrankis veikia gerai, tačiau jis tikrai šviečia kaip API. Tai leidžia sukurti savo integraciją ar paslaugą ant esamos svetainės.

„JavaScript Minifier“ - kita svetainė tuo pačiu pavadinimu, šis įrankis yra toks paprastas, koks yra. Nėra parinkčių ar meniu, tik vienas mygtukas.

Sumažinti - Ši svetainė atrodo nuostabiai, o kūrėjai aiškiai atkreipė dėmesį į čia esančias detales.

Šį sąrašą būtų galima tęsti amžinai. Yra tiek daug internetinių įrankių svetainėms sumažinti, kad sunku suklysti.

Sumažinimo įrankiai taip pat yra jūsų komandų eilutės įrankiai arba papildiniai „JavaScript“ redaktorius . Šie įrankiai dažnai yra daug greičiau naudojami ir „tiesiog veikia“ su esamu kodu. Nereikia kopijuoti ir įklijuoti, taip pat nereikia išgauti „JavaScript“ iš jokių HTML ar CSS failų, kurie gali būti tame pačiame faile.

Jei naudojate „Microsoft Visual Studio“, Bundler ir Minifier plėtinys iš turgavietės turi daugiau nei 600 000 įdiegimų! Negana to, ji reguliariai atnaujinama ir galima rasti „GitHub“ .

Jei esate gerbėjas Aukščiausias tekstas kaip ir aš, tada Sumažinti paketas yra tas, kurio norite. Įdiegus daugiau nei 61 000, tai labai populiarus paketas, kuris taip pat yra galima rasti „GitHub“ , jei norite prisidėti prie atviro kodo projekto.

Galiausiai, jei esate a „PyCharm“ vartotojas, tu gali sukonfigūruokite jį integruoti tiesiogiai su daugeliu įprastų suspaudimo įrankių, tokių kaip YUI kompresorius . Daugelis šių įrankių tiesiogiai maitina aukščiau išvardytus internetinius įrankius.

Įspėjimai

Ten turi būti laimikiu, tiesa? Niekas niekada negali būti tobulas. Taip, yra viena problema, tačiau ji gana nedidelė ir lengvai išsprendžiama:

Sutrumpinto kodo negalima atkurti į pradinę būseną.

Kai sumažinate bet kurį kodą, jo pradinė forma prarandama. Turite išsaugoti jo kopiją, jei norite turėti vilčių lengvai atlikti esminius pakeitimus - nepakanka naudoti versijų valdymą.

Nors tai įmanoma nepanaikinti kodą, jis nebebus tas pats. Visi jūsų vertingi komentarai yra prarasti dėl vieno dalyko.

Tai nėra didžiulė problema, tačiau koduojant reikia to nepamiršti. Kaip pagrindinė taisyklė, nesuspaustas > vystosi ir suspaustas > gamyba.

Dabar jūs žinote viską, ką reikia žinoti apie „JavaScript“ sumažinimą! Sumažinti kodą yra vienas iš būdų, kaip išspausti našumą iš serverio, ir visos didžiosios svetainės tai daro.

Kokius įrankius naudojate savo kodui sumažinti? Ar tu net vargini? Praneškite mums toliau pateiktose pastabose!

už ką tu stovi

Vaizdo kreditas: „NavinTar“ per „Shutterstock“

Dalintis Dalintis „Tweet“ Paštu Ištrinkite šiuos „Windows“ failus ir aplankus, kad atlaisvintumėte vietos diske

Reikia išvalyti vietos diske „Windows“ kompiuteryje? Čia yra „Windows“ failai ir aplankai, kuriuos galima saugiai ištrinti, kad būtų atlaisvinta vietos diske.

Skaityti toliau Susijusios temos

Programavimas
„JavaScript“
„Java“
Interneto svetainės dizainas

Apie autorių Joe Coburn(Paskelbti 136 straipsniai)

Joe yra baigęs informatikos studijas Linkolno universitete, JK. Jis yra profesionalus programinės įrangos kūrėjas, o kai jis neskraido dronais ir nerašo muzikos, jį dažnai galima rasti fotografuojant ar kuriant vaizdo įrašus.

Daugiau iš Joe Coburn

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia