Minifying JavaScript And CSS to Improve Websites Performance

အဓိက အကြောင်းအရာ - Javascript, CSS
ကွန်ပျူတာ ပရိုဂရမ်သငေ်္ကတ (Program Code) များအတွင်းမှ မလိုအပ်သည့် Character များကို ဖယ်ထုတ်ခြင်းကို အကျဉ်းချုံးခြင်း (Minification) ဟု ခေါ်သည်။ ဤနည်းဖြင့် Program Code များ၏ အရွယ်အစားသေးငယ်လာပြီး ၀က်ဘ်ဆိုက်၏ အမြန်နှုံးတိုးတက်လာသည်။“Code များကို အကျဉ်းချုံးခြင်း” (Code Minification) ပြုလုပ်သည့်အခါတွင် - မှတ်ချက် (Comment) များ၊ မလိုအပ်သည့် နေရာလွတ်များ (Space, Newline, Tab) - စသည်တို့ကို ဖယ်ထုတ်ပစ်ရသည်။ အောက်တွင် မြင်ရသည့် ပုံမှာ - Google (Singaore) Home page ကို Viewsource ကြည့်သောအခါတွင် မြင်ရသည့် အနေအထား ဖြစ်သည်။ Minification ပြုလုပ်ထားသည့် JavaScript များနှင့် CSS များကို ပုံတွင် တွေ့ရမည်။

JavaScript ဖိုင်များတွင်လည်း မလိုအပ်သည့် နေရာလွတ်များကို ဖယ်ထုတ်ပစ်လိုက်ပြီးသည့် နောက်တွင် ဖိုင်အရွယ်အစား သေးငယ်သွားသဖြင့် ၀က်ဘ်ဆာဗာ (Web Server) မှ အင်တာနက်ကြည့်ဆော့ဖ်၀ဲ (Web Browser) ဆီသို့ ဆွဲယူရသည့် အချိန်ကို မြန်ဆန်စေသည်။ ထို့ကြောင့် ကြည့်နေသူ အနေဖြင့် အင်တာနက်စာမျက်နှာကို လျင်မြန်စွာ မြင်တွေ့ရသည်။ JavaScript code များကို အကျဉ်းချုံးနိုင်ရန်အတွက် အောက်ပါ Tool များကို အသုံးပြုနိုင်သည်။

1. JSMin - http://crockford.com/javascript/jsmin
2. YUI Compressor - http://developer.yahoo.com/yui/compressor/
3. Minify - http://code.google.com/p/minify/

အထက်ပါ Tool များအနက် YUI Compressor နှင့် Minify တို့သည် CSS ဖိုင်များကိုလည်း အကျဉ်းချုံးပေးနိုင်သည်။
Minify သည် HTTP Request များကို လျော့နည်းစေသည်။ Cache-Control Header များ သို့မဟုတ် Expire များကို ထည့်ပေးသည်။ အစိတ်အပိုင်းများကို Gzip လုပ်ပေးသည်။ JavaScript နှင့် CSS ကို အကျဉ်းချုံးပေးသည်။ ETags များကို ပြင်ဆင်ပေးသည်။ အစိတ်အပိုင်းများကို 25K အောက်လျော့နည်းစေရန် ထိန်းသိမ်းပေးသည်။

Source Code များကို နောက်ထပ် အကျဉ်းချုံးနိုင်သည့် နည်းတစ်ခုမှာ Obfuscation ဖြစ်သည်။ ဤနည်းလမ်းမှာ minification နည်းလမ်းထက် ပိုမိုရှုပ်ထွေးသည်။ ထို့ကြောင့် obfuscation လုပ်နေစဉ် အချိန်မှာပင် အမှားအယွင်း (Bug) များ ထွက်ပေါ်လာတတ်သည်။ Obfuscation နည်းလမ်းသည် ဖိုင်အရွယ်အစားကို ပိုမိုသေးငယ်စေနိုင်သော်လည်း၊ Minification နည်းလမ်းမှာ ဘေးရန်ပိုကင်းပေသည်။

ပြင်ပမှ ခေါ်ယူအသုံးပြုထားသည့် Script နှင့် Style (External JavaScript, CSS) ဖိုင်များကို အကျဉ်းချုံးသည့်နည်းတူ၊ Web Page များအတွင်း ထည့်သွင်းရေးသားထားသည့် Inlined <script> နှင့် <style> များကိုလည်း အကျဉ်းချုံး နိုင်သည်။ ကျွန်တော်တို့၏ Script နှင့် Style ဖိုင်များကို Gzip ပြုလုပ်ထား ပြီးသည့်တိုင်၊ နောက်ထပ် အကျဉ်းချုံးမည်ဆိုပါက ၅% ခန့်မျှ အရွယ်အစား ထပ်မံလျော့ကျစေနိုင်သည်။ JavaScript နှင့် CSS တို့ကို သုံးစွဲမှု မြင့်တက်လာသည်နှင့်အမျှ ပါ၀င်သည့် Code များကို တတ်နိုင်သမျှ Minify ပြုလုပ်ပေးခြင်းအားဖြင့် ၀က်ဘ်ဆိုက်များ၏ အမြန်နှုံးကို တိုးလာစေမည် ဖြစ်သည်။

REF: http://developer.yahoo.com/performance/rules.html#minify