14 Alati za smanjivanje Javascripta

Javascript minification je tehnika koja kondenzira vašu skriptu na mnogo manji trag. Gubite ljudsku čitljivost, ali ćete sačuvati značajnu propusnost - na kraju, Javascript je namijenjen vašem pregledniku, a ne vašim korisnicima.

Većina proizvodnih web-mjesta koristi Javascript snižavanje, ali način na koji se to postiže uvelike varira. Od jednostavnih mrežnih pretvarača do sveobuhvatnijih GUI alata za sučelja komandne linije, naše opcije su prilično različite. U ovom članku ćemo pogledati kako funkcionira Javascript minification, kako ga možemo ugraditi u naš tijek rada i što su prednosti i mane miniranja.

Kako minimalno funkcionira

Najbolji način da saznate što se događa kada smanjite kôd jest pogledati spremište UglifyJS Github. Ova skripta se koristi u mnogim online pretvaračima, kao i GUI alatima i alatima naredbenog retka kao što je Grunt. Evo nekih promjena koje se primjenjuju kako bi vaš kod bio kraći:

Uklanja nepotreban prostor
Skraćuje imena varijabli, obično na pojedinačne znakove
Spaja uzastopne var deklaracije
Pretvara nizove u objekte gdje je to moguće
Optimizira tvrdnje
Izračunava jednostavne konstantne izraze
itd.

Kao brz primjer, ovdje je funkcija koja u osnovi piše neke dane tekstove.

 funkcija hello (text) document.write (text);

hello ('Dobro došli u članak');

Da vidimo što će se dogoditi kada to smanjimo. Zabilježite uklanjanje razmaka i uvlačenje te skraćivanje tekstualne varijable.

hello (e) document.write (e) hello ("Dobro došli u članak")

Alati za izmjenu Javascripta

Alati za smanjivanje Javascripta mogu se široko kategorizirati u 3 skupine: online alati, GUI alati i alati naredbenog retka.

S online alatima obično je potrebno zalijepiti vaš kod i odmah kopirati rezultat.
GUI alati često sadrže mnogo više funkcionalnosti; JS minification je samo mali dio onoga što rade.
Alati naredbenog retka su također obično sveobuhvatniji, nudeći minification kao modul.

Online alati

javascript-minifier.com je zgodan alat s API-jem
Online YUI Compressor je moćniji alat koji koristi YUI kompresor, s mnogo mogućnosti i mogućnostima CSS minification-a.
jscompress.com je ne-osnovni minifier, ali to obavlja posao
jsmini.com je još jedna jednostavna, ali potpuno upotrebljiva opcija

Velika je stvar kod online alata brzina kojom možete raditi s njima. Složeni GUI i alati naredbenog retka smanjuju se brže, ali morate imati projekt postavljen da radi ispravno. Loša strana ovih alata je da su uglavnom pružaju malo ili nimalo prilagođavanja, barem u usporedbi s alatima naredbenog retka.

GUI alati

Koala je besplatan alat za LESS, SASS kompilaciju, JS minification i mnogo više
Prepros je platforma plaćena aplikacija koja vam daje još više mogućnosti
Codekit je moj izbor. To je plaćena Mac-aplikacija koja nudi kompilaciju koda, minifikaciju, poslužitelj za pregled, upravljanje bower paketima i mnogo više
AjaxminGui je besplatan, jednokratni Windows alat za smanjivanje vašeg JS-a
UltraMinifier je besplatna aplikacija za OS X koja minira CSS i JS s povlačenjem i ispuštanjem
Manji je OS X alat koji minificira i spaja datoteke za vas

Ovdje sam spomenuo dvije vrste GUI aplikacija. Jednostavne aplikacije u jednom koraku su slične njihovim kolegama na mreži. Vrlo su brzi za korištenje jer možete samo povući i ispustiti datoteke u njih, bez potrebe za postavljanjem. To su rekli ne pružaju gotovo nikakvu prilagodbu.

Veći GUI alati (Prepros, Koala, Codekit) izvrsni su u upravljanju projektima i daju vam malo više mogućnosti za kompresiju, ali oni rade treba malo podešavanja. Brzoj izmjeni JS-a trebalo bi oko 20 sekundi postavljanja, što je mnogo, u usporedbi s 2-sekundnim procesom mrežnih ili jednostavnih GUI alata.

S druge strane, oni vam nude više mogućnosti općenito i pružaju vam automatizaciju. Vaše JS datoteke bit će smanjene svaki put kada ih spremite, bez potrebe da ih ručno smanjite. Ako ste u razvoju nešto u Javascript ovo je definitivno put to ići.

Alati naredbenog retka

Minify je za one koji žele smanjiti JS iz naredbenog retka, ali ne žele postaviti ništa zanimljivo u Grunt ili Gulp
Uglify.js koji smo već spomenuli je također dostupan kao samostalan alat za naredbeni redak
Grunt ima proširenje za JavaScript s dodavanjem naziva grunt-contrib-uglify
Gulp također ima JS minification koristeći Uglify.js kroz gulp-uglify

Alati naredbenog retka nisu samo za Linux geekove! Nisam dobar u terminalu, ali postavljanje stvari kao što su Grunt i Gulp lako je kroz njihovu veliku dokumentaciju. Dobra strana alata naredbenog retka je strašna količina fleksibilnosti koju imate od opcija do izlaza.

S druge strane, postoji krivulja učenja. Naviknuti se na naredbeni redak potrebno je (ne mnogo) prakse koje ćete smatrati restriktivnima prije nego počnete uživati u blagodatima.

Pregled

Ako ste novi u web razvoju, preporučio bih vam jedno od prva tri GUI alata. Oni će vam pomoći upravljati svojim projektima općenito i ponuditi mnogo više od samo JS minification.

Ako ste iskusan profesionalac, vjerojatno biste trebali pogledati Grunt ili Gulp jer oni nude najveću kontrolu nad zadacima automatizacije. Ako trebate brzo smanjiti skriptu bez postavljanja projekta, alati naredbenog retka mogu vam uštedjeti mnogo vremena.

Svaka skupina alata ima svoje prednosti i mane, a vjerojatno ćete završiti koristeći jednu od njih u nekom ili drugom trenutku. Imajte na umu da u proizvodnom okruženju uvijek morate smanjiti Javascript i CSS!