14 Eszközök a Javascript szerkesztéséhez

A Javascript tömörítése egy technika, amely tömöríti a szkriptet egy sokkal kisebb lábnyomra. Az emberi olvashatóságot elveszíti, de jelentős sávszélességet takarít meg - a végén, A Javascript a böngészőjéhez készült, nem a felhasználók számára.

A legtöbb termelési webhely a Javascript tömörítést használja, de az elérésének módja nagymértékben változik. Az egyszerű online konverterektől kezdve az átfogóbb GUI eszközökig a parancssori interfészekig, opcióink nagyon változatosak. Ebben a cikkben megnézzük hogyan működik a Javascript tömörítése, hogyan tudjuk építeni a munkafolyamatunkba, és mi a bányászat előnye és hátránya.

Hogyan működik a Minifikáció

A legjobb módja annak, hogy megtanuljuk, mi történik, amikor a kódot kicsinyítik, az, hogy nézd meg az UglifyJS Github Repository-t. Ezt a szkriptet számos online konverterben használják, valamint a GUI eszközöket és a parancssori eszközöket, mint a Grunt. Íme néhány olyan átalakítás, amelyet a kód rövidebbé teheti:

Eltávolítja a felesleges helyet
Rövidíti a változó neveket, általában egyetlen karakterre
Csatlakozik az egymást követő var deklarációkhoz
Lehetőség szerint átalakítja a tömböket objektumoknak
Optimalizálja, ha állítások vannak
Kiszámítja az egyszerű, állandó kifejezéseket
stb..

Gyors példa erre egy olyan funkció, amely lényegében bizonyos szöveget ír ki.

 funkció hello (text) document.write (szöveg);

hello (Üdvözöljük a cikkben);

Lássuk, mi történik, ha ezt kicseréljük. Figyeljük meg a szóközök eltávolítását és a szövegváltozó rövidítését.

funkció hello (e) document.write (e) hello ("Üdvözöljük a cikkben")

Javascript Minification Tools

A Javascript tömörítéséhez használt eszközök három csoportba sorolhatók: online eszközök, GUI eszközök és parancssori eszközök.

Az online eszközökkel általában a kód beillesztése és az eredmény másolása szükséges.
A GUI eszközök gyakran több funkciót tartalmaznak; A JS minigáció csak egy kis része annak, amit csinálnak.
A parancssori eszközök általában is átfogóbbak, és modulként modulálnak.

Online eszközök

javascript-minifier.com egy szép megjelenésű eszköz API-val
Az Online YUI Compressor egy hatékonyabb eszköz, amely a YUI kompresszort használja, sok lehetőséggel és CSS minigációs képességgel is
A jscompress.com egy non-frills minifier, de megkapja a munkát
A jsmini.com egy másik egyszerű, de teljesen használható lehetőség

Az online eszközök nagyszerű dolog az, hogy milyen sebességgel dolgozhatsz velük. A bonyolult GUI és a parancssori eszközök gyorsabbak, de szükség van egy megfelelő projekt létrehozására. Ezeknek az eszközöknek a hátránya, hogy többnyire kevéssé testreszabható, legalábbis a parancssori eszközökkel összehasonlítva.

GUI eszközök

A Koala egy ingyenes eszköz a LESS, SASS összeállítás, JS minification és még sok más
A Prepros egy több platformot fizető alkalmazás, amely még több lehetőséget kínál
A Codekit a választott alkalmazásom. Ez egy fizetett Mac-alapú alkalmazás, amely kódösszeállítással, minigációval, előnézeti szerverrel, bower csomagkezeléssel és még sok más szolgáltatással rendelkezik.
Az AjaxminGui egy ingyenes, egyszer használatos Windows eszköz a JS tömörítésére
Az UltraMinifier egy ingyenes alkalmazás az OS X-hez, amely a CSS-t és a JS-t lerövidíti
A kisebbebb az OS X eszköz, amely az Ön számára fájlokat tömörít

Itt kétféle GUI alkalmazást említettem. Az egyszerű egylépéses minigáló alkalmazások nagyon hasonlítanak az online kollégáikra. Rendkívül gyorsan használhatók, mivel csak fájlokat húzhatunk be őket, nincs szükség beállításra. Ez azt jelenti, hogy gyakorlatilag nincs testreszabás.

Nagyobb GUI eszközök (Prepros, Koala, Codekit) nagyszerűek a projektek kezelésében, és egy kicsit több lehetőséget biztosítanak a tömörítésre, de szükség van egy kis beállításra. A gyors JS minigáció körülbelül 20 másodpercet vesz igénybe, ami sok, összehasonlítva az online vagy egyszerű GUI eszközök 2 másodperces folyamatával..

Másrészről több funkciót kínálnak általában, és automatizálást biztosítanak Önnek. A JS-fájlokat minden egyes alkalommal menteni fogják, nincs szükség manuálisan finomítani őket. Ha valamit fejleszt a Javascript-ben, ez biztosan az út.

Parancssori eszközök

A Minify azoknak szól, akik a JS-t a parancssorból szeretnék lecserélni, de nem akarnak semmilyen képzeletet létrehozni Gruntban vagy Gulpban
Az uglify.js, amelyet korábban említettünk, önálló parancssori eszközként is elérhető
A Grunt kiterjeszti a Javascript tömörítést, a grunt-hozzájárulás-uglify nevű nevet
A Gulp a JS minigációval is rendelkezik Uglify.js segítségével a gulp-uglify segítségével

A parancssori eszközök nemcsak a Linux geeks! Nem vagyok nagy a terminálon, de a Grunt és a Gulp, mint például a nagyszerű dokumentáció segítségével könnyen beállítható. A parancssori eszközök fejléce a fantasztikus mennyiségű rugalmasság, amit az opcióktól a kimenetig tart.

Másrészt van egy egy kis tanulási görbe. A parancssorhoz szokás néhány (nem sok) gyakorlatot vesz igénybe, amelyet korlátozónak talál mielőtt elkezdené élvezni az előnyöket.

Áttekintés

Ha újdonság a webfejlesztésben, javaslom az első három GUI eszközt. Ezek segítenek a projektek általános kezelésében, és sokkal többet kínálnak, mint a JS minigáció.

Ha Ön tapasztalt profi, valószínűleg meg kell vizsgálnia Grunt vagy Gulp mivel ezek a legtöbb automatizálási feladatot vezérlik. Ha gyorsan le kell írnia a parancsfájlt projekt létrehozása nélkül, a parancssori eszközök sok időt takaríthatnak meg.

Minden eszközcsoportnak előnye és hátránya van, és valójában valószínűleg mindegyikből egy-egy pontot használ. Ne feledje, hogy amikor egy termelési környezetben mindig ajánlott a Javascript és a CSS!