14 JavaScripti tööriistad

Javascript kaevandamine on tehnika, mis kondenseerib teie skripti palju väiksemaks. Te kaotate inimese loetavuse, kuid säilitate märkimisväärse ribalaiuse - lõpuks, Javascript on mõeldud teie brauserile, mitte teie kasutajatele.

Enamik tootmise veebisaite kasutab Javascript minigeerimist, kuid see on väga erinev. Alates lihtsatest online-muunduritest kuni ulatuslikumate GUI-tööriistadeni käsurealiidesesse on meie valikud üsna erinevad. Käesolevas artiklis vaatleme kuidas Javascripti minimeerimine toimib, kuidas me saame seda oma töövoo juurde ehitada ja millised on minigeerimise plusse ja miinuseid.

Kuidas Minification toimib

Parim viis teada saada, mis juhtub, kui te oma koodi redigeerite, on vaadata UglifyJS Githubi hoidlat. Seda skripti kasutatakse paljudes online konverterites, aga ka GUI tööriistades ja käsurea tööriistades nagu Grunt. Siin on mõned muudatused, mida see teeb teie koodi lühemaks muutmiseks:

Eemaldab tarbetu ruumi
Lühendab muutujate nimesid, tavaliselt üksikutele tähemärki
Liitub järjestikuste var-deklaratsioonidega
Võimaluse korral teisendab massiivid objektideks
Optimeerib avaldused
Arvutab lihtsaid konstantseid väljendeid
jne.

Kiireks näiteks on siin funktsioon, mis sisuliselt kirjutab mõnda antud teksti välja.

 funktsiooni hello (text) document.write (tekst);

tere ("Tere tulemast artiklisse");

Vaatame, mis juhtub siis, kui me seda vähendame. Pange tähele tühikute eemaldamist ja tekstimuutuja lühendamist.

funktsiooni hello (e) document.write (e) tere ("Tere tulemast artiklisse")

Javascript Minification Tools

JavaScripti minimiseerimiseks kasutatavaid tööriistu saab laialdaselt liigitada kolme rühma: online-tööriistad, GUI-tööriistad ja käsurea tööriistad.

Online-tööriistade puhul on tavaliselt vaja oma koodi kleepida ja tulemus kohe kopeerida.
GUI tööriistad sisaldavad sageli palju rohkem funktsioone; JS minigeerimine on vaid väike osa sellest, mida nad teevad.
Käsurea tööriistad on tavaliselt ka põhjalikumad, pakkudes moodulina kaevandamist.

Online-tööriistad

javascript-minifier.com on kena välimusega tööriist API-ga
Online YUI Compressor on võimsam tööriist, mis kasutab YUI kompressorit, millel on ka palju võimalusi ja CSS-i minimiseerimisvõimalusi.
jscompress.com on mittemurustav minifikaator, kuid see teeb tehtud töö
jsmini.com on veel üks lihtne, kuid täiesti kasutatav valik

Online-tööriistade puhul on suur asi, kui kiiresti saate nendega töötada. Keerulised GUI ja käsurea tööriistad minimeerivad kiiremini, kuid selleks, et see korralikult töötaks, tuleb teil luua projekt. Nende vahendite puudus on see, et nad on enamasti pakkuda vähe või mitte mingit kohandamist, vähemalt võrreldes käsurea tööriistadega.

GUI tööriistad

Koala on tasuta tööriist LESS, SASS kompileerimiseks, JS minigeerimiseks ja palju muud
Prepros on tasuline platvorm, mis annab teile veelgi rohkem võimalusi
Codekit on minu valik. See on tasuline Mac-i rakendus, mis pakub koodide koostamist, redigeerimist, eelvaate serveri, pakettide haldamist ja palju muud
AjaxminGui on tasuta ühekordseks kasutamiseks mõeldud Windowsi tööriist JS-i kaevandamiseks
UltraMinifier on tasuta rakendus OS X jaoks, mis minimeerib CSS ja JS lohistades
Väiksem on OS X tööriist, mis minimeerib ja koondab sinu failid

Olen siin maininud kahte tüüpi GUI-rakendusi. Lihtsad üheetapilised minimisrakendused sarnanevad oma online-kolleegidega. Nad on väga kiiresti kasutatavad, kuna saate lihtsalt faile neile lohistada ja neid ei ole vaja. See tähendab, et nad pakkuda praktiliselt mingit kohandamist.

Suuremad GUI tööriistad (Prepros, Koala, Codekit) on projektide haldamisel suured ja annavad sulle veidi rohkem pakkimisvõimalusi, kuid nad teevad seda vajab veidi seadistamist. Kiire JS-i minigeerimine võtab aega umbes 20 sekundit, mis on palju, võrreldes 2-sekundilise online- või lihtsate GUI-tööriistadega.

Teiselt poolt pakuvad nad rohkem funktsioone ja pakuvad teile automatiseerimist. Teie JS-failid minimeeritakse iga kord, kui neid salvestate, neid pole vaja käsitsi minimeerida. Kui te arendate midagi Javascriptis, on see kindlasti tee.

Käsurea tööriistad

Minify on mõeldud neile, kes soovivad JS-i käsurealt muuta, kuid ei soovi Gruntis või Gulpis midagi ette kujutada.
Eelnevalt mainitud Uglify.js on saadaval ka eraldiseisva käsurea vahendina
Gruntil on laiendus Javascript minigeerimisele, mille nimi on grunt-hozzájárus
Gulpil on ka JS-i minimeerimine, kasutades Uglify

Käsurea tööriistad ei ole ainult Linuxi geeks! Ma ei ole terminalis väga hea, kuid Grunt ja Gulp'i loomine on nende suurepärase dokumentatsiooni abil lihtne. Käsurea tööriistade tagurpidi on fantastiline paindlikkus, mis teil on valikuvõimalustest väljundini.

Teisest küljest on olemas natuke õppimiskõverat. Juurdepääs käsureale võtab mõned (mitte palju) praktikat, mida leiad piiravatena enne kasu saamist.

Ülevaade

Kui olete veebiarenduses uus, soovitaksin ühte kolmest esimesest GUI tööriistast. Need aitavad teil hallata oma projekte üldiselt ja pakkuda palju enamat kui lihtsalt JS-i kaevandamine.

Kui sa oled kogenud pro, peaksite ilmselt uurima Grunt või Gulp kuna need pakuvad automatiseerimisülesannete kõige suuremat kontrolli. Kui peate skripti kiiresti minimeerima projekti käivitamata, käsurea tööriistad võivad säästa palju aega.

Igal tööriistarühmal on oma plusse ja miinuseid ning tõesti sa lõpuks kasutad mõnda või mõnda punkti. Pidage meeles, et kui tootekeskkonnas peaksite oma Javascripti ja CSSi alati vähendama!