ကုဒ် & ဖော်မတ်

JS လျှော့ချကိရိယာ (Minifier)

သင့်ရဲ့ JavaScript ကုဒ်ကို အခမဲ့ လျှော့ချလိုက်ပါ- မှတ်ချက်များနှင့် အပို whitespace များကို ဖယ်ရှားခြင်းဖြင့် ဖိုင်အရွယ်အစားကို လျှော့ချပြီး ချက်ချင်း ငွေစုရာခိုင်နှုန်းကို ကြည့်ရှုလိုက်ပါ။

JS လျှော့ချကိရိယာ (Minifier)
ကုဒ်ကို လျှော့ချထားသည်
မူရင်းအရွယ်အစား —
အရွယ်အစားလျှော့ချထားသည် —
သိမ်းဆည်းခြင်း —
output.min.js
ရိုးရှင်းသော minification (မှတ်ချက်များ + နေရာလွတ်ဖယ်ရှားခြင်း)။ ထုတ်လုပ်မှုပတ်ဝန်းကျင်အတွက် Terser/esbuild ကဲ့သို့သော full minifier ကို အကြံပြုထားသည်။
အချက်အလက်

JS Minimizer အကြောင်း

JavaScript ဖိုင်တွေရဲ့ အရွယ်အစားက သင့်ဝက်ဘ်ဆိုက်ရဲ့ loading speed နဲ့ Core Web Vitals ရမှတ်တွေကို တိုက်ရိုက်သက်ရောက်မှုရှိပါတယ်။ Minification က source code မှာ comment တွေ၊ မလိုအပ်တဲ့ space တွေ၊ line break တွေနဲ့ indentation တွေကို ဖယ်ရှားပေးခြင်းအားဖြင့် browser ကို file ပို့ဖို့ လိုအပ်တဲ့ byte အရေအတွက်ကို သိသိသာသာ လျှော့ချပေးပါတယ်။

ဒါက အခမဲ့ပါ။ JS လျှော့ချကိရိယာ (Minifier) ဤကိရိယာသည် သင်၏ဘရောက်ဆာတွင် ကူးထည့်သည့် JavaScript ကုဒ်ကို လုပ်ဆောင်ပြီး မည်သည့်ဒေတာကိုမျှ ဆာဗာသို့ မပို့ပါ။ တစ်ကြောင်းတည်းသော မှတ်ချက်များ (//), လိုင်းပေါင်းစုံ မှတ်ချက်များ (/* ... */), လိုင်းများ၏ အစနှင့်အဆုံးရှိ နေရာလွတ်များကို ဖယ်ရှားသည်။ String ("...", '...', `...``<script>` နှင့် `regex` စာသားများအတွင်းရှိ အကြောင်းအရာကို ထိန်းသိမ်းထားပါသည်၊ ၎င်းသည် လုပ်ဆောင်ချက် ယိုယွင်းပျက်စီးမှုအန္တရာယ်ကို အနည်းဆုံးဖြစ်စေပါသည်။

ကိရိယာ၊ မူရင်း နှင့် လျှော့ချထားသော ၎င်းသည် ကုဒ်အရွယ်အစားများကို နှိုင်းယှဉ်ပြီး ရာခိုင်နှုန်း ချွေတာမှုကို ပြသသည်။ မှတ်စုများ- ဒီ tool က အခြေခံအဆင့် downscaling ကို လုပ်ဆောင်ပါတယ်။ variable renaming၊ tree-shaking နဲ့ production environment တွေအတွက် advanced optimization တွေကို ပေးပါတယ်။ ပြောင်းပြန်, esbuild သို့မဟုတ် UglifyJS ဤကဲ့သို့သော အပြည့်အဝအင်္ဂါရပ်ရှိသော minifier tools များကို အကြံပြုထားပါသည်။

ဘယ်လိုသုံးရမလဲ။

တစ်ဆင့်ပြီးတစ်ဆင့်

  1. မင်းအဲဒါကို လျှော့ချချင်တယ် JavaScript ကုဒ် အထက်ပါနေရာတွင် ကူးထည့်ပါ သို့မဟုတ် ရိုက်ထည့်ပါ။
  2. လျှော့ချပါ ခလုတ်ကို နှိပ်ပါ၊ မှတ်ချက်များနှင့် အပိုနေရာလွတ်များကို ချက်ချင်းဖယ်ရှားပေးပါမည်။
  3. ငွေစုရာခိုင်နှုန်း နှင့် byte အရွယ်အစားများကို ရလဒ်အပိုင်းတွင် ပြသထားသည်။
  4. အသေးစားကုဒ် မိတ္တူကူးပါ ခလုတ်ကို အသုံးပြု၍ clipboard တွင် သိမ်းဆည်းပြီး သင့်ပရောဂျက်တွင် အသုံးပြုပါ။
  5. မတူညီတဲ့ ကုဒ်တစ်ခုအတွက် သန့်ရှင်းသည် ခလုတ်ကို နှိပ်ပြီး လုပ်ငန်းစဉ်ကို ပြန်လုပ်ပါ။
SSS

မကြာခဏမေးလေ့ရှိသော မေးခွန်းများ

နံပါတ် ကိရိယာ စာကြောင်း ("...", '...'နမူနာစာသား `...`၎င်းသည် regex literals နှင့် comment character များ၏ အကြောင်းအရာကို ရှာဖွေပြီး ထိန်းသိမ်းပေးသည်။ ၎င်းသည် comment character များအဖြစ် ပေါ်လာသော်လည်း အမှန်တကယ် data ဖြစ်သော အစိတ်အပိုင်းများကို မဖျက်ပစ်ကြောင်း သေချာစေသည်။

ရိုးရှင်းသော ပရောဂျက်များနှင့် မြန်ဆန်သော ကနဦးစစ်ဆေးမှုများအတွက် သင့်လျော်ပါသည်။ သို့သော်၊ ၎င်းသည် ထုတ်လုပ်မှုပတ်ဝန်းကျင်တွင် variable shortening၊ tree-shaking နှင့် source mapping တို့အတွက် ပံ့ပိုးမှုပေးပါသည်။ ပြောင်းပြန်, esbuild သို့မဟုတ် UglifyJS ဤကဲ့သို့သော အင်္ဂါရပ်အပြည့်အစုံပါသည့်ကိရိယာများကို အသုံးပြုရန် အကြံပြုအပ်ပါသည်။

မဟုတ်ပါ။ လုပ်ငန်းစဉ်တစ်ခုလုံးသည် သင့်ဘရောက်ဆာ (client ဘက်ခြမ်း) တွင် အပြည့်အဝဖြစ်ပေါ်သည်။ ကုဒ်လိုင်းများကို ဆာဗာသို့ မပို့ပါ သို့မဟုတ် သိမ်းဆည်းထားပါ။

မှတ်ချက်အရေအတွက်နှင့် whitespace ပေါ် မူတည်၍ အရွယ်အစားလျှော့ချမှုကို ယေဘုယျအားဖြင့် ၁၀-၄၀% ရရှိသည်။ မှတ်ချက်များစွာပါသော ကုဒ်တွင် ဤရာခိုင်နှုန်း ပိုမိုမြင့်မားနိုင်သည်။ byte ကွာခြားချက်နှင့် ရာခိုင်နှုန်း နှစ်မျိုးလုံးကို ရလဒ်အပိုင်းတွင် ပြသထားသည်။

မဟုတ်ပါ။ Minification က ဖိုင်အရွယ်အစားလျှော့ချဖို့ မလိုအပ်တဲ့ စာလုံးတွေကိုပဲ ဖယ်ရှားပေးပါတယ်။ ကုဒ်ယုတ္တိဗေဒကို မပြောင်းလဲပါဘူး။ တစ်ဖက်မှာတော့ obfuscation က ကုဒ်ကို တမင်တကာဖတ်လို့မရအောင် လုပ်ပါတယ်။ ဒီ tool က minification ကိုပဲ လုပ်ဆောင်ပါတယ်။
အခမဲ့ကိရိယာများအားလုံးသို့ ပြန်သွားပါ