14 Työkalut Javascriptin minimoimiseksi

Javascript-minimointi on tekniikka, joka tiivistää käsikirjoituksesi paljon pienemmäksi. Menetät ihmisen luettavuuden, mutta säästät huomattavaa kaistanleveyttä - lopulta, Javascript on tarkoitettu selaimellesi, ei käyttäjille.

Useimmat tuotantosivustot käyttävät Javascript-minifikaatiota, mutta tapa, jolla tämä saavutetaan, vaihtelee suuresti. Yksinkertaisista online-muuntimista kattavampiin GUI-työkaluihin komentoriviliittymiin meidän vaihtoehdot ovat melko erilaisia. Tässä artikkelissa tarkastellaan miten Javascript-minimointi toimii, miten voimme rakentaa sen työnkulkuun ja mitä minimoinnin edut ja haitat ovat.

Miten minimointi toimii

Paras tapa oppia, mitä tapahtuu, kun koodit pienennetään, on tarkastella UglifyJS Githubin arkistoa. Tätä komentosarjaa käytetään monissa online-muuntimissa sekä GUI-työkaluissa ja komentorivityökaluissa, kuten Gruntissa. Seuraavassa on muutamia muutoksia, joita se tekee koodin lyhentämiseksi:

Poistaa tarpeettoman tilan
Lyhentää muuttujien nimiä, yleensä yksittäisiin merkkeihin
Liittyy peräkkäisiin var-ilmoituksiin
Muuntaa taulukot mahdollisuuksien mukaan kohteiksi
Optimoi lausunnot
Laskee yksinkertaiset pysyvät lausekkeet
jne.

Nopeana esimerkkinä tässä on funktio, joka olennaisesti kirjoittaa jonkin tietyn tekstin.

 toiminto hello (text) document.write (teksti);

Hei (Tervetuloa artikkeliin);

Katsotaanpa, mitä tapahtuu, kun minimoimme sen. Huomaa välilyöntien ja sisennyksen poistaminen ja tekstimuuttujan lyhentäminen.

toimi hello (e) document.write (e) hei ("Tervetuloa artikkeliin")

Javascript Minification Tools

Javascriptin minimointiin käytetyt työkalut voidaan luokitella laajasti kolmeen ryhmään: online-työkalut, GUI-työkalut ja komentorivityökalut.

Online-työkaluilla on yleensä kysymys koodin liittämisestä ja tuloksen kopioinnista välittömästi.
GUI-työkalut sisältävät usein paljon enemmän toimintoja; JS-minimointi on vain pieni osa siitä, mitä he tekevät.
Komentorivin työkalut ovat yleensä myös kattavampia, ja ne tarjoavat moduulina minifioinnin.

Online-työkalut

javascript-minifier.com on mukava työkalu, jossa on API
Online YUI Compressor on tehokkaampi työkalu, joka käyttää YUI-kompressoria, jossa on myös paljon vaihtoehtoja ja CSS-minimointiominaisuuksia
jscompress.com on no-frills-minifikaattori, mutta se saa tehtävän
jsmini.com on toinen yksinkertainen mutta täysin käyttökelpoinen vaihtoehto

Online-työkalujen suuri asia on nopeus, jolla voit työskennellä heidän kanssaan. Monimutkaiset GUI- ja komentorivityökalut minifioidaan nopeammin, mutta sinun täytyy olla hanke, jonka avulla se toimii oikein. Näiden työkalujen haittapuoli on se, että ne ovat enimmäkseen tarjota vähän tai ei lainkaan räätälöintiä, ainakin verrattuna komentorivityökaluihin.

GUI-työkalut

Koala on ilmainen työkalu LESS, SASS-kokoelmaan, JS-minimointiin ja paljon muuta
Prepros on maksullinen sovellus, joka antaa sinulle enemmän vaihtoehtoja
Codekit on minun valinta. Se on maksullinen Mac-sovellus, joka tarjoaa koodin kokoamisen, minimoinnin, esikatselupalvelimen, bower-paketin hallinnan ja paljon muuta
AjaxminGui on ilmainen, kertakäyttöinen Windows-työkalu JS: n minimoimiseksi
UltraMinifier on ilmainen sovellus OS X: lle, joka minimoi CSS: n ja JS: n vetämällä ja pudottamalla
Pienempi on OS X -työkalu, joka minimoi ja yhdistää tiedostot sinulle

Olen maininnut kahdenlaisia GUI-sovelluksia täällä. Yksinkertaiset yksivaiheiset minimointiohjelmat ovat paljon kuin heidän online-kollegansa. Ne ovat erittäin helppokäyttöisiä, koska voit vain vetää ja pudottaa tiedostoja niihin, mitään asetuksia ei tarvita. Se sanoi, he tarjota käytännössä mitään räätälöintiä.

Suuremmat GUI-työkalut (Prepros, Koala, Codekit) ovat suuria projektien hallinnassa ja antamalla sinulle hieman enemmän pakkausmahdollisuuksia, mutta ne tekevät tarvitsemme hieman asennusta. Nopea JS-minimointi vie noin 20 sekuntia asennusta, joka on paljon verrattuna 2 sekunnin online- tai yksinkertaisten GUI-työkalujen prosessiin.

Toisaalta ne tarjoavat sinulle enemmän ominaisuuksia ja tarjoavat sinulle automaation. JS-tiedostoja puretaan joka kerta, kun tallennat ne, ei tarvitse käsitellä niitä manuaalisesti. Jos kehität jotain Javascriptissä, tämä on ehdottomasti tie.

Komentorivityökalut

Minify on tarkoitettu niille, jotka haluavat minimoida JS: n komentoriviltä, mutta eivät halua perustaa mitään hienoa Gruntissa tai Gulpissa
Uglify.js, jota olemme aiemmin maininneet, on saatavana myös erillisenä komentorivityökaluna
Gruntilla on laajennus Javascript-minifikaatioon, jonka nimi on grunt-osallistuminen
Gulpilla on myös JS-minimointi käyttäen Uglify.js: ää gulp-uglifyn kautta

Komentorivin työkalut eivät ole vain Linux-geeksille! En ole hyvä terminaalissa, mutta Gruntin ja Gulpin kaltaisten asioiden perustaminen on helppoa dokumenttiensa avulla. Komentorivityökalujen huipulla on mahtava määrä joustavuutta, jota sinulla on vaihtoehdoista lähtöön.

Toisaalta on vähän oppimiskäyrää. Käytetään komentoriville vie jonkin verran (ei paljon) käytäntöä, jota löydät rajoittavaksi ennen kuin alat nauttia eduista.

Yleiskatsaus

Jos olet uusi web-kehitykseen, suosittelisin yhtä kolmesta ensimmäisestä GUI-työkalusta. Ne auttavat sinua hallitsemaan projektejasi yleensä ja tarjoamaan paljon enemmän kuin vain JS-minimointi.

Jos olet kokenut ammattilainen, sinun pitäisi luultavasti tutkia Grunt tai Gulp koska ne tarjoavat automaatiotehtävien eniten hallintaa. Jos haluat pienentää komentosarjan nopeasti ilman hankkeen perustamista, komentorivin työkalut voivat säästää paljon aikaa.

Jokaisella työkaluryhmällä on hyvät ja huonot puolensa, ja todellisuudessa päädyt todennäköisesti käyttämään yhtä jokaisesta tai toisesta. Muista, että kun tuotantoympäristössä sinun pitäisi aina minimoida Javascript ja CSS!