JavaScript snyrtir og þjappi

Tilgangur snyrtingar og þjöppunar í JavaScript-þróun

Í vefþróun gegna snyrting (beautification) og þjöppun (minification) á JavaScript-kóða tveimur ólíkum en mikilvægum hlutverkum. Snyrting snýst um að auka læsileika kóða sem hefur verið þjappaður eða dulin. Með því að bæta við inndrætti og viðeigandi línubilum geta forritarar og tæknilegir notendur rannsakað virkni kóðans, greint villur og áttað sig á uppbyggingu hans.

Þjöppun snýst aftur á móti um að lágmarka skráarstærð eins og framast er unnt til að flýta fyrir flutningi á vefnum. Þegar JavaScript-kóði er þjappaður eru óþörf stafabil, línubil og athugasemdir fjarlægð, auk þess sem ónotaður kóði (dead code) er hreinsaður út. Þetta flýtir fyrir niðurhali í vöfrum notenda og bætir afköst vefsvæða.

Munurinn á stærð kóða og læsileika

Þegar JavaScript-kóði er undirbúinn fyrir útgáfu þurfa þróunaraðilar að gera málamiðlun á milli þess hversu auðvelt er að lesa kóðann og hversu hratt hann hleðst niður. Í þróunarumhverfi er læsileiki og viðhaldsmöguleiki kóðans í fyrirrúmi. Í framleiðsluumhverfi (production) er hins vegar stefnt að sem minnstri skráarstærð.

Hvít rými (whitespace) og athugasemdir í kóða eru nauðsynleg fyrir mennska forritara en hafa engin áhrif á það hvernig tölvan keyrir kóðann. Þessi aukalegu tákn taka hins vegar pláss í flutningi yfir netið. Með því að fjarlægja þau minnkar gagnamagnið sem þarf að flytja, sem leiðir til hraðari hleðslutíma án þess að virkni forritsins breytist.

Meðhöndlun breytunafna við þjöppun

Einn mikilvægasti þátturinn í því að minnka stærð JavaScript-skráa er meðhöndlun á staðbundnum breytunöfnum. Þegar kóði er þjappaður er hægt að velja á milli tveggja leiða:

• Stytta: Þessi valkostur endurnefnir staðbundnar breytur í einn staf. Þetta skilar minnstu mögulegu skráarstærðinni sem hentar best fyrir útgáfu á vefnum.
• Varðveita: Þessi valkostur heldur upprunalegum nöfnum á staðbundnum breytum. Skráin verður fyrir vikið aðeins stærri, en hún er áfram læsileg og mun auðveldari í kembingu (debugging) ef upp koma villur.

Þjöppun er einstefnuferli hvað varðar breytunöfn og athugasemdir. Þegar búið er að þjappa kóða og stytta breytunöfn er ekki hægt að endurheimta upprunalegu nöfnin eða athugasemdirnar aftur, þar sem þeim gögnum hefur verið eytt til að spara pláss. Tól sem snyrta kóða geta aðeins endurheimt skipulag og inndrátt, en ekki upprunaleg heiti. Ein undantekning er þó gerð við þjöppun: leyfisborðar sem byrja á /*! … */ eru varðveittir svo höfundarréttarupplýsingar glatist ekki.

Takmarkanir og villumeðhöndlun

Tólið vinnur úr JavaScript-kóða allt að ákveðnum stærðarmörkum og fylgir ströngum reglum um tíma og setningafræði:

• Hámarksstærð: Inntakið má að hámarki vera 3.000.000 stafir. Ef farið er yfir þau mörk birtast villuboðin: „Þessi skrá er of stór til að vinna úr henni. Prófaðu minni skrá.“
• Tímamörk: Ef vinnsla á kóðanum tekur lengri tíma en 20 sekúndur stöðvast ferlið og sýnir villuna: „Þetta tók of langan tíma og var stöðvað — prófaðu minni skrá.“
• Setningafræðivillur: Ef kóðinn inniheldur villur sem koma í veg fyrir að hægt sé að greina hann, birtast villuboðin: „Ekki tókst að vinna úr þessu JavaScript.“
• Tómur kóði: Ef þjöppun leiðir til þess að enginn keyranlegur kóði stendur eftir, birtast skilaboðin: „Ekkert stendur eftir eftir þjöppun — inntakið innihélt engan keyranlegan kóða.“

Ef ekkert inntak er sett í tólið helst það í biðstöðu. Þegar smellt er á „Hreinsa“ eyðast bæði inntak og úttak, ásamt öllum vistuðum uppköstum. Eftir að þjöppun er lokið sýnir tólið árangurinn með skilaboðunum „Þjappað — {pct}% minna.“ þar sem prósentuhlutfallið sýnir raunverulega stærðarminnkun.

Öryggi og vinnsla gagna

Öll vinnsla á kóðanum fer fram beint í vafra notandans. Engin gögn eða kóðabútar eru sendir til ytri netþjóna eða vistaðir á BroBroGo. Þetta tryggir að kóðinn fer aldrei út af tölvu notandans meðan á snyrtingu eða þjöppun stendur.

Algengar spurningar

Hver er munurinn á því að snyrta og þjappa?

Snyrting (beautify) endurinn dregur og bætir við bilum í kóðann svo auðveldara sé að lesa hann og rekja sig í gegnum hann — fljótlegasta leiðin til að átta sig á þjappaðri eða dulinni skrá. Þjöppun (minify) gerir hið gagnstæða: hún fjarlægir bil, athugasemdir og ónotaðan kóða svo skráir hlaðist hraðar niður. Snyrtu til að lesa, þjappaðu til að gefa út.

Er hægt að breyta þjöppuðum kóða aftur í upprunalega formið?

Hún endurheimtir inndrátt og línubil svo rökfræðin verði læsileg á ný, varðveitir leyfisborða á borð við /*! … */, en hún getur ekki endurheimt upprunalegu breytunöfnin eða athugasemdirnar — þjöppun eyðir þeim fyrir fullt og allt, svo ekkert tól getur endurheimt þau. Það sem þú færð er sami kóðinn, settur upp á skýran hátt.

Hvað gera breytuvalkostirnir Stytting (Shorten) og Varðveita (Keep)?

Báðar stillingar fjarlægja bil, athugasemdir og ónotaðan kóða, og hvorug breytir því hvað skriftan þín gerir. Stytting (Shorten) endurnefnir einnig staðbundnar breytur í einn staf til að fá sem minnsta skrá — þá sem þú myndir gefa út. Varðveita (Keep) skilur nöfnin eftir eins og þau eru, svo útkoman er aðeins stærri en áfram læsileg og auðveld í kembingu.

Hvaða valkostir eru í boði fyrir inndrátt þegar kóði er snyrtur?

Þegar kóði er snyrtur er hægt að velja á milli þriggja mismunandi gerða af inndrætti: 2 spaces (tvö bil), 4 spaces (fjögur bil) eða Tab.