JavaScripti koodi vormindamine ja optimeerimine
JavaScripti arendustöös on koodi loetavus ja faili suurus kaks vastandlikku, kuid võrdselt olulist tegurit. Arenduse ja silumise faasis vajavad programmeerijad selget, hästi taandatud ja liigendatud koodi, et mõista programmi loogikat ning tuvastada vigu. Tootmiskeskkonnas ehk veebilehe avaldamisel on aga esmatähtis faili suurus, kuna väiksemad skriptid laadivad kasutaja brauseris kiiremini ja vähendavad võrguliiklust.
Selle tasakaalu saavutamiseks kasutatakse kahte peamist tehnikat: kujundamist (inglise keeles beautify) ja minimeerimist (inglise keeles minify). JavaScripti kujundaja ja minimeerija võimaldab teha mõlemat toimingut otse veebibrauseris, pakkudes paindlikke seadistusi koodi struktureerimiseks või selle mahu maksimaalseks vähendamiseks.
Koodi kujundamine ja selle mõju loetavusele
Koodi kujundamise eesmärk on muuta loetamatuks muutunud, kokkusurutud või teiste arendajate kirjutatud JavaScript arusaadavaks. See on eriti kasulik olukordades, kus on vaja uurida kolmandate osapoolte koodilõike või siluda minimeeritud skripte.
Kujundamise käigus lisatakse koodile süstemaatilised taanded ja tühikud. Tööriist võimaldab valida kolme erineva taandestiili vahel:
- 2 tühikut (2 spaces)
- 4 tühikut (4 spaces)
- Tabulaator (Tab)
Struktureeritud taanded aitavad visuaalselt eristada funktsioone, tsükleid ja tingimuslauseid, mis kiirendab koodi analüüsimist ja lihtsustab selle hooldamist. Erinevalt koodi muutmisest ei mõjuta kujundamine programmi toimimist ega loogikat, vaid muudab ainult selle esituskuju.
Koodi minimeerimine ja veebi jõudluse optimeerimine
Minimeerimine on protsess, mille käigus eemaldatakse JavaScripti failist kõik üleliigne teave, mida brauser koodi käivitamiseks ei vaja. See hõlmab tühikute, reavahetuste, kommentaaride ja kättesaamatu koodi (ehk surnud koodi) täielikku kustutamist. Kuna brauser loeb koodi ühe jada failina, ei mõjuta vorminduse puudumine programmi täitmist, kuid vähendab oluliselt faili mahtu baitides.
Minimeerimisel on võimalik määrata, kuidas käitutakse kohalike muutujate nimedega:
- Lühenda: See valik nimetab kohalikud muutujad ümber ühetähelisteks. Kuna muutujate nimed lühenevad minimaalseks, saavutatakse selle valikuga kõige väiksem võimalik failisuurus.
- Säilita: See valik jätab kohalike muutujate nimed muutmata. Fail jääb seetõttu veidi suurem, kuid kood on pärast minimeerimist paremini loetav ja hõlpsamini silutav, kui on vaja tootmiskeskkonnas vigu otsida.
Mõlemad meetodid säilitavad koodi funktsionaalsuse. Samuti säilitatakse minimeerimise käigus litsentsibännerid kujul /*! … */, et tagada autorikaitsenõuete täitmine ka optimeeritud koodis.
Tehnilised piirangud ja veatuvastus
Tööriist on mõeldud reaalajas töötlemiseks ja sellele kehtivad kindlad tehnilised piirangud stabiilsuse tagamiseks:
| Parameeter / Olek | Kirjeldus ja veateated |
|---|---|
| Maksimaalne sisendi suurus | 3 000 000 märki. Kui limiit ületatakse, kuvatakse teade: "See fail on töötlemiseks liiga suur. Proovige väiksemat." |
| Töötlemise ajalimiit | 20 sekundit. Kui protsess võtab kauem aega, see peatatakse ja kuvatakse teade: "See võttis liiga kaua aega ja peatati – proovige väiksemat faili." |
| Süntaksivead sisendis | Kui kood sisaldab vigu, mida ei saa töödelda, kuvatakse teade: "Seda JavaScripti ei saanud töödelda." |
| Tühi tulemus | Kui minimeerimise tulemusel ei jää alles käivitatavat koodi, kuvatakse teade: "Pärast minimeerimist ei jäänud midagi järele – sisend ei sisaldanud käivitatavat koodi." |
| Algolek | Kui sisendväli on tühi, on tööriist olekus "Asetage või sisestage JavaScript, et seda kujundada või minimeerida." |
Pärast edukat minimeerimist kuvab süsteem teate kujul "Minimeeritud — {pct}% väiksem.", näidates täpset mahu vähenemise protsenti. Nupu "Tühjenda" vajutamisel eemaldatakse nii sisend- kui ka väljundväli ning kustutatakse salvestatud mustand.
Privaatsus ja andmetöötlus
Kogu JavaScripti koodi töötlemine – nii kujundamine kui ka minimeerimine – toimub otse kasutaja veebibrauseris. Sisestatud koodi ja faile ei laadita BroBroGo serverisse. See tagab, et kood ei lahku kasutaja seadmest töötlemise ajal.
Korduma kippuvad küsimused
Mis vahe on kujundamisel ja minimeerimisel?
Kujundamine (beautify) taandab ja liigendab koodi, et seda oleks lihtne lugeda ja siluda – see on kiireim viis minimeeritud või risustatud failist aru saamiseks. Minimeerimine (minify) teeb vastupidist: see eemaldab tühikud, kommentaarid ja mittekasutatava koodi, et fail laadiks kiiremini. Kujundage lugemiseks, minimeerige avaldamiseks.
Kas minimeeritud koodi saab muuta tagasi algseks?
See taastab taanded ja reavahetused, et loogika oleks taas loetav, kuid see ei saa tagasi tuua algseid muutujate nimesid ega kommentaare – minimeerimine kustutab need jäädavalt, mistõttu ükski tööriist ei saa neid taastada. Tulemuseks on sama kood, kuid selgelt vormistatud kujul.
Mida teevad nimede lühendamise ja säilitamise valikud?
Mõlemad eemaldavad tühikud, kommentaarid ja kättesaamatu koodi ning kumbki ei muuda teie skripti toimimist. Lühendamine (Shorten) nimetab ka kohalikud muutujad ümber ühetähelisteks, et saavutada võimalikult väike failisuurus. Säilitamine (Keep) jätab nimed muutmata, mistõttu on tulemus veidi suurem, kuid siiski loetav ja hõlpsasti silutav.