14 Orodja za zmanjševanje Javascripta

Javascript skrčenje je tehnika, ki zgoščuje vaš scenarij v veliko manjši odtis. Izgubite človeško berljivost, vendar ohranite veliko pasovno širino - na koncu, Javascript je namenjen vašemu brskalniku in ne vašim uporabnikom.

Večina spletnih strani za produkcijo uporablja Javascript, vendar se način, kako se to doseže, zelo razlikuje. Od preprostih spletnih pretvornikov do bolj obsežnih orodij GUI v vmesnike ukazne vrstice, so naše možnosti precej raznolike. V tem članku si bomo ogledali kako deluje Javascript minifikacija, kako ga lahko vgradimo v naš potek dela in kakšne so prednosti in slabosti predelave.

Kako minimalno deluje

Najboljši način, da se naučite, kaj se zgodi, ko zmanjšate kodo, je, da si ogledate skladišče UglifyJS Github. Ta skript se uporablja v mnogih spletnih pretvornikih, kot tudi v orodjih grafičnega uporabniškega vmesnika in orodjih ukazne vrstice, kot je Grunt. Tukaj je nekaj sprememb, ki veljajo za krajšo kodo:

Odstrani nepotreben prostor
Skrajša imena spremenljivk, običajno na posamezne znake
Združuje zaporedne deklaracije var
Pretvori polja v objekte, kjer je to mogoče
Optimizira izjave
Izračuna preproste konstantne izraze
itd.

Za hiter primer je funkcija, ki v bistvu zapiše nekaj besedil.

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

hello ('Dobrodošli v članku');

Poglejmo, kaj se zgodi, ko to zmanjšamo. Upoštevajte odstranitev presledkov in zamikov ter skrajšanje besedilne spremenljivke.

hello (e) document.write (e) Pozdravljeni ("Dobrodošli v članku")

Orodja za zmanjševanje Javascripta

Orodja, ki se uporabljajo za zmanjševanje Javascripta, je mogoče široko razvrstiti v tri skupine: spletna orodja, orodja GUI in orodja ukazne vrstice.

Pri spletnih orodjih je ponavadi stvar lepljenja kode in takoj kopiranje rezultata.
Orodja za uporabniški vmesnik pogosto vsebujejo veliko več funkcionalnosti; JS minification je le majhen del tega, kar počnejo.
Orodja za ukazne vrstice so običajno tudi bolj obsežna in ponujajo modifikacijo.

Spletna orodja

javascript-minifier.com je prijazno orodje z API-jem
Spletni YUI kompresor je zmogljivejše orodje, ki uporablja YUI kompresor, z veliko opcijami in zmožnostmi CSS minification.
jscompress.com je brezžičen minifier, vendar je delo opravljeno
jsmini.com je še ena preprosta, a povsem uporabna možnost

Najboljša stvar pri spletnih orodjih je hitrost, s katero lahko delate z njimi. Kompleksni GUI in orodja ukazne vrstice se hitreje zmanjšajo, vendar pa morate imeti projekt, ki bo omogočil pravilno delovanje. Slaba stran teh orodij je, da so večinoma ne prinašajo malo ali nič prilagoditve, vsaj v primerjavi z orodji ukazne vrstice.

Orodja GUI

Koala je brezplačno orodje za LESS, SASS kompilacijo, JS minification in še veliko več
Prepros je plačljiva aplikacija, ki vam omogoča več možnosti
Codekit je moja izbira. Gre za plačljivo aplikacijo za Mac, ki ponuja zbiranje, pomanjševanje, predogled strežnika, upravljanje paketov bowerjev in še veliko več
AjaxminGui je brezplačno orodje za enkratno uporabo operacijskega sistema Windows za zmanjšanje vašega JS
UltraMinifier je brezplačna aplikacija za OS X, ki zmanjšuje CSS in JS s povleci in spusti
Manjša je orodje OS X, ki za vas prepiše in združi datoteke

Tukaj sem omenil dve vrsti aplikacij GUI. Preprosti enostopenjski programi za prilagajanje so podobni njihovim spletnim sogovornikom. So zelo hitra za uporabo, saj lahko preprosto povlečete in spustite datoteke vanje, ne potrebujete nastavitve. To so rekli praktično brez prilagajanja.

Večja orodja grafičnega uporabniškega vmesnika (Prepros, Koala, Codekit) so odlična pri upravljanju projektov in vam dajejo malo več možnosti za stiskanje, vendar pa potrebujete malo namestitve. Hitro zmanjšanje JS bi zahtevalo približno 20 sekund namestitve, kar je veliko v primerjavi z 2 sekundnim procesom spletnih ali preprostih orodij GUI.

Po drugi strani pa vam ponujajo več funkcij na splošno in vam omogočajo avtomatizacijo. Vaše datoteke JS bodo zmanjšane vsakič, ko jih shranite, ni jih potrebno ročno razčistiti. Če ste v razvoju nekaj v Javascript to je definitivno pot.

Orodja za ukazno vrstico

Minify je za tiste, ki želijo zmanjšati JS iz ukazne vrstice, vendar ne želijo nastaviti nič posebnega v Grunt ali Gulp
Uglify.js, ki smo jih že omenili, je na voljo tudi kot samostojno orodje ukazne vrstice
Grunt ima razširitev za Javascript, ki se imenuje grunt-contrib-uglify
Gulp ima tudi JS minification z uporabo Uglify.js skozi gulp-uglify

Orodja za ukazno vrstico niso samo za geeke z Linuxom! Nisem dober na terminalu, toda postavitev stvari, kot sta Grunt in Gulp, je preprosta skozi njihovo veliko dokumentacijo. Glavna orodja ukazne vrstice so odlična prilagodljivost, ki jo imate od možnosti do izhoda.

Po drugi strani pa obstaja del krivulje učenja. Spoznavanje ukazne vrstice traja nekaj (ne veliko) prakse, ki jo boste videli kot omejevalne preden začnete uživati ugodnosti.

Pregled

Če ste novi v razvoju spletnih strani, vam priporočam eno od prvih treh orodij GUI. Ti vam bodo pomagali pri upravljanju vaših projektov na splošno in nudili veliko več kot samo prireditev JS.

Če ste izkušeni profesionalci, morate verjetno pogledati Grunt ali Gulp ker ti nudijo največ nadzora nad avtomatizacijskimi nalogami. Če želite hitro skriti skript brez vzpostavitve projekta, orodja ukazne vrstice vam lahko prihranijo veliko časa.

Vsaka skupina orodij ima svoje prednosti in slabosti in v resnici boste verjetno končali z uporabo ene od obeh na neki točki. Upoštevajte, da morate v produkcijskem okolju vedno zmanjšati Javascript in CSS!