JavaScript kompresory: Ako a prečo minimalizovať váš JS

JavaScript kompresory: Ako a prečo minimalizovať váš JS

Všetci sme tam boli, to ste sa dozvedeli ako vytvoriť úžasný web , ale keď to už publikujete, je to neznesiteľne pomalé.





Minifikácia vášho JavaScriptu je jedným zo spôsobov, ako urýchliť reakcie webových stránok (spolu s príponou komprimácia HTML ), a našťastie pre vás, je to jednoduchý proces. Dnes vám ukážem všetko, čo potrebujete vedieť.



Čo znamená minifikácia?

Proces minifikácia (alebo zhustenie ) je jednoduchý koncept. Keď píšete kód v JavaScripte alebo v inom jazyku, existuje mnoho funkcií, ktoré sú potrebné len na to, aby bol kód pre ľudí zrozumiteľnejší - počítačom je jedno, ako nazývate svoje premenné alebo koľko medzier je v zátvorkách, napríklad.





Zmenšením kódu môžete výrazne zmenšiť jeho veľkosť. Menší súbor bude preto pre vašich používateľov rýchlejšie sťahovať. Ak píšete iba jeden alebo dva riadky JavaScriptu, pravdepodobne nedôjde k citeľnému zlepšeniu. Ak však píšete veľa kódu alebo používate veľké knižnice, ako napríklad jQuery, citeľné zvýšenie výkonu a výrazne znížené veľkosti súborov sú ľahko dosiahnuteľné!

Ak načítate kód z externej siete CDN, ako napr Knižnice hostované spoločnosťou Google , použili ste zmenšený kód.



aký je volt na mojom telefóne

Ako vyzerá zmenšený kód?

Pozrime sa na niekoľko príkladov. Je ťažké vidieť vplyv minifikácie na malé základne kódu, preto sa vopred ospravedlňujem za ich dlhú dĺžku.

Tu sú niektoré nerminifikované JavaScript z nášho sprievodcu používaním JSON v jazykoch Python a 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 zmenšený kód:

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

Táto zmenšená verzia kódu je 39 percent menšie. V tomto prípade názvy premenných zostanú rovnaké, ale všetky medzery a komentáre boli odstránené.



Tu je ďalší príklad z nášho sprievodcu 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 zmenšený kód:

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

Tentoraz tu bolo iba a 26 percent redukcia - to je na taký menší blok kódu stále veľmi dobré.

Tu je posledný príklad z nášho sprievodcu Javascriptom a 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);

Všimnite si, ako existujú veľa komentárov a prázdnych miest. Minifikovaná verzia zmenšila veľkosť súboru o 52 percent :

výnimka vlákna systému Windows stop kódu nebola spracovaná
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Tu sú veľkosti niektorých bežných knižníc JavaScript v porovnaní s ich zmenšenými verziami:

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

Niektoré z týchto knižníc po komprimovaní vykazujú výrazné zmenšenie veľkosti ( ~ 80 percent ), zatiaľ čo iní nie sú tak dobrí ( ~ 40 percent ). To znamená, že akékoľvek uloženie zrýchli váš web pre vašich používateľov a zníži napätie na vašom webovom serveri.

Ako minimalizujete?

Teraz viete, ako funguje a ako vyzerá. Poďme sa teda ponoriť do toho, ako to urobiť. Nebojte sa, váš kód nie je vôbec potrebné ručne upravovať! Existuje množstvo voľne dostupných nástrojov, ktoré tento proces zvládnu za vás.

Tieto fungujú niekoľkými spôsobmi. Väčšina online nástrojov vám umožňuje skopírovať a vložiť kód, ktorý potom spracuje a vráti vám ho na stránku. Tieto nástroje vám často umožnia nahrať aj viac súborov.

Tu je krátke zhrnutie online nástrojov. Väčšinou fungujú rovnako, takže si nemusíte lámať hlavu nad tým, ktorý si vybrať.

JSCompress - Ja osobne používam tento web najviac, ak je to len rýchla práca. Spustenie je rýchle a dokonca vám ukážu nástroje, ktoré použili na jeho stavbu.

Minifikátor JavaScript - Tento nástroj funguje dobre, ale skutočne svieti ako API. To vám umožní vybudovať vlastnú integráciu alebo službu nad rámec ich existujúcich webových stránok.

Minifikátor JavaScript - Ďalší web s rovnakým názvom, tento nástroj je taký jednoduchý, ako prichádzajú. Žiadne možnosti ani ponuky, iba jedno tlačidlo.

Minifikovať - Tento web vyzerá úžasne a vývojári tu jednoznačne venovali pozornosť podrobnostiam.

Tento zoznam by mohol pokračovať donekonečna. Existuje toľko online nástrojov na minimalizáciu webových stránok, že je ťažké sa pokaziť.

Minifikačné nástroje existujú aj ako nástroje príkazového riadka alebo doplnky pre vaše JavaScript editor . Tieto nástroje sa často používajú oveľa rýchlejšie a „fungujú“ iba s vašim existujúcim kódom. Nie je potrebné kopírovať a vkladať a nemusíte extrahovať svoj JavaScript z HTML alebo CSS, ktoré môžu byť v rovnakom súbore.

Ak používate Microsoft Visual Studio, Bundler a minifikátor rozšírenie z trhu má viac ako 600 000 inštalácií! Nielen to, ale je pravidelne aktualizovaný a k dispozícii na GitHub .

Ak ste fanúšikom Vznešený text ako ja, potom Minifikovať balíček je ten, ktorý chcete. S viac ako 61 000 inštaláciami je to veľmi populárny balík a je to tiež k dispozícii na GitHub , ak by ste chceli prispieť k projektu s otvoreným zdrojovým kódom.

Nakoniec, ak ste a PyCharm užívateľ, môžeš nakonfigurujte ho tak, aby sa integroval priamo s mnohými bežnými kompresnými nástrojmi ako napr YUI kompresor . Mnoho z týchto nástrojov priamo poháňa online nástroje uvedené vyššie.

Upozornenia

Tam má byť úlovok nie? Nikdy nemôže byť nič dokonalé. Áno, existuje jeden problém, ale je to dosť malý problém a je ľahké ho vyriešiť:

Minifikovaný kód nie je možné vrátiť do pôvodného stavu.

Keď minifikujete akýkoľvek kód, stratí sa jeho pôvodný tvar. Kópiu si musíte ponechať, ak chcete mať nádej, že budete môcť ľahko vykonať veľké zmeny - nestačí používať ovládanie verzií.

Kým je to možné zrušiť váš kód, už nikdy nie je taký istý. Všetky vaše cenné komentáre sú stratené, kvôli jednej veci.

Nie je to veľký problém, ale pri kódovaní na to musíte pamätať. Ako základné pravidlo platí, nekomprimované > vyvíjať a stlačené > výroba.

Teraz viete všetko o minifikácii JavaScriptu! Minifikácia kódu je jedným zo spôsobov, ako vytlačiť výkon zo servera, a robia to všetky veľké webové stránky.

Aké nástroje používate na minimalizáciu kódu? Vadí ti to vôbec? Dajte nám vedieť v nižšie uvedených komentároch!

ako zmeniť online id na ps3

Obrazový kredit: NavinTar cez Shutterstock

zdieľam zdieľam Tweet E -mail Odstráňte tieto súbory a priečinky systému Windows, aby ste uvoľnili miesto na disku

Potrebujete uvoľniť miesto na disku v počítači so systémom Windows? Tu sú súbory a priečinky Windows, ktoré je možné bezpečne odstrániť, aby sa uvoľnilo miesto na disku.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • JavaScript
  • Java
  • Vzhľad stránky
O autorovi Joe Coburn(136 publikovaných článkov)

Joe je absolventom počítačových vied na University of Lincoln, UK. Je profesionálnym softvérovým vývojárom a keď nelieta s dronmi alebo nepíše hudbu, často ho zastihne fotografovanie alebo vytváranie videí.

Viac od Joe Coburn

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber