14 Nástroje pre zmenšovanie Javascript

Javascript minification je technika, ktorá kondenzuje skript na oveľa menšiu stopu. Stratíte čitateľnosť človeka, ale ušetríte značnú šírku pásma - nakoniec, Javascript je určený pre váš prehliadač nie pre vašich používateľov.

Väčšina výrobných webových stránok používa zmenu jazyka Javascript, ale spôsob, akým sa to dosiahne, sa značne líši. Od jednoduchých online konvertorov až po komplexnejšie nástroje GUI pre rozhranie príkazového riadku sú naše možnosti celkom rozmanité. V tomto článku sa pozrieme na ako funguje Javascript minification, ako ju môžeme stavať do nášho pracovného postupu a aké sú výhody a nevýhody zmlúv.

Ako minie funguje

Najlepší spôsob, ako sa dozvedieť, čo sa stane, keď zmeníte kód, je pozrieť sa na úložisko UglifyJS Github. Tento skript sa používa v mnohých online konvertoroch, ako aj v nástrojoch GUI a nástrojoch príkazového riadku, ako je Grunt. Tu sú niektoré z transformácií, ktoré sa týkajú toho, aby bol váš kód kratší:

Odstráni zbytočný priestor
Skráti názvy premenných, zvyčajne na jednotlivé znaky
Spája sa s následnými deklaráciami var
Konvertuje súbory na objekty, ak je to možné
Optimalizuje, či sú výkazy
Vypočíta jednoduché konštantné výrazy
atď.

Ako rýchly príklad tu je funkcia, ktorá v podstate píše nejaký daný text.

 funkcia ahoj (text) document.write (text);

ahoj ("Vitajte v článku");

Pozrime sa, čo sa stane, keď to minimalizujeme. Všimnite si odstránenie medzery a odsadenia a skrátenie textovej premennej.

funkcia hello (e) document.write (e) ahoj ("Vitajte v článku")

Nástroje na zminovanie jazyka Javascript

Nástroje používané na zmenšovanie jazyka Javascript môžu byť široko roztriedené do 3 skupín: online nástroje, nástroje GUI a nástroje príkazového riadku.

Pomocou nástrojov online je zvyčajne záležitosť vložiť kód a ihneď kopírovať výsledok.
GUI nástroje často obsahujú oveľa viac funkcií; Miniatúra JS je len malou časťou toho, čo robia.
Nástroje príkazového riadku sú zvyčajne komplexnejšie a ponúkajú minifikáciu ako modul.

Online nástroje

javascript-minifier.com je pekný nástroj s API
Online YUI kompresor je výkonnejší nástroj, ktorý používa kompresor YUI s množstvom možností a miniatúrnych možností CSS
jscompress.com je miniatúrne no-frills, ale to robí prácu
jsmini.com je ďalšia jednoduchá, ale úplne použiteľná možnosť

Skvelá vec v online nástrojoch je rýchlosť, s ktorou môžete s nimi pracovať. Komplexné grafické používateľské rozhranie a nástroje príkazového riadku sa rýchlejšie zmenšujú, ale musíte mať nastavený projekt, aby fungoval správne. Nevýhodou týchto nástrojov je, že väčšinou poskytujú málo alebo žiadne prispôsobenie, prinajmenšom v porovnaní s nástrojmi príkazového riadku.

Nástroje GUI

Koala je bezplatný nástroj pre LESS, SASS kompiláciu, miniatúru JS a oveľa viac
Prepros je platená aplikácia, ktorá vám ponúka ešte viac možností
Codekit je moja voľba. Jedná sa o platenú aplikáciu Mac-only, ktorá ponúka kompiláciu kódu, minifikáciu, ukážkový server, správu balíkových balíkov a oveľa viac
AjaxminGui je bezplatný, jednoúčelový nástroj Windows na zmenšovanie vášho JS
UltraMinifier je bezplatná aplikácia pre OS X, ktorá miniaturizuje CSS a JS drag and drop
Menší je nástroj OS X, ktorý miniaturizuje a zlučuje súbory pre vás

Spomenul som tu dva typy aplikácií GUI. Jednoduché jednostupňové minifikačné aplikácie sú podobne ako ich online protějšky. Sú veľmi rýchlo použiteľné, pretože do nich môžete jednoducho presúvať súbory, nie je potrebné žiadne nastavenie. To povedali, oni prakticky žiadne úpravy.

Väčšie nástroje GUI (Prepros, Koala, Codekit) sú skvelé pri riadení projektov a dávajú vám trochu viac možností kompresie, ale robia to potrebujete trochu nastavenia. Rýchle zmiernenie JS by trvalo asi 20 sekúnd nastavenia, čo je veľa v porovnaní s 2-sekundovým procesom on-line alebo jednoduchých GUI nástrojov.

Na druhej strane ponúkajú viac funkcií vo všeobecnosti a poskytujú vám automatizáciu. Vaše súbory JS budú zmenené pri každom ukladaní, nie je potrebné manuálne ich skomprimovať. Ak vyvíjate niečo v Javascripe, je to určite spôsob, ako ísť.

Nástroje príkazového riadku

Minify je určený pre tých, ktorí chcú zmenšiť JS z príkazového riadku, ale nechcú nastaviť čokoľvek, čo by bolo v Grunt alebo Gulp
Uglify.js, ktoré sme už spomenuli, je k dispozícii aj ako samostatný nástroj príkazového riadku
Grunt má rozšírenie pre miniatúru Javascript s názvom grunt-contrib-uglify
Gulp má tiež miniatúru JS pomocou nástroja Uglify.js prostredníctvom gulp-uglify

Nástroje príkazového riadku nie sú len pre Linuxov! Nie som skvelý na termináli, ale nastavenie vecí ako Grunt a Gulp je jednoduché prostredníctvom ich skvelej dokumentácie. Nárast nástrojov príkazového riadku je úžasné množstvo flexibility, ktorú máte od možností až po výstup.

Na druhej strane existuje a bitová krivka učenia. Zvyknúť si na príkazový riadok trvá niekoľko (nie veľa) praxe, ktoré nájdete ako obmedzujúce skôr ako začnete užívať výhody.

Prehľad

Ak ste nový vývoj webu, odporučil by som jeden z prvých troch nástrojov grafického rozhrania. Pomôžu spravovať vaše projekty vo všeobecnosti a ponúkajú oveľa viac ako len miniatúry JS.

Ak ste skúsený profesionál, mali by ste sa pravdepodobne pozrieť do Grunt alebo Gulp pretože tieto ponúkajú najväčšiu kontrolu nad automatizačnými úlohami. Ak potrebujete rýchlo skrátiť skript bez nastavenia projektu, nástroje pre príkazový riadok vám môžu ušetriť veľa času.

Každá skupina nástrojov má svoje výhody a nevýhody a v skutočnosti pravdepodobne skončíte s použitím jedného z nich v určitom alebo druhom bode. Majte na pamäti, že keď sa nachádzate vo výrobnom prostredí, mali by ste vždy vymažiť svoje Javascript a CSS!