Build Process ဆိုတာဘာလဲ

နားလည်ထားရမယ့် အချက်

Developer ရေးတဲ့ code ဟာ browser ဆီရောက်တဲ့ code အတိအကျ မဖြစ်တတ်ပါ။ ကြားထဲမှာ build process ရှိပါတယ် — source files ကို deploy လုပ်ဖို့အသင့် production assets အဖြစ်ပြောင်းပေးတဲ့ automated steps တွေဖြစ်ပြီး npm run build လို command တစ်ခုနဲ့ trigger လုပ်လေ့ရှိပါတယ်။

Browser အဟောင်းတွေ နားလည်တဲ့ syntax အဖြစ် JS/TS အသစ်ကို compile လုပ်ခြင်း
File သေးသေးလေးတွေများစွာကို file အနည်းငယ်ပိုကြီးအဖြစ် bundle လုပ်ခြင်း
Whitespace၊ comment၊ name ရှည်တွေဖယ်ပြီး size လျှော့ဖို့ minify လုပ်ခြင်း

Project တိုင်းမှာ build step ရှိစရာမလိုပါ — လက်ရေးရေးထားတဲ့ static site ရိုးရိုးဆိုရင် ရေးထားတဲ့အတိုင်း deploy လုပ်လို့ရပါတယ်။ ဒါပေမယ့် modern frontend framework အများစုနဲ့ backend project တော်တော်များများက build step ကို အားကိုးကြပါတယ်။

Build အမျိုးအစား	Characteristics
Development Build	ချက်ချင်း rebuild လုပ်ပြီး minify မလုပ်ထားတဲ့ code၊ debug လွယ်အောင် stack trace အပြည့်အစုံ။
Production Build	Generate ပိုကြာပြီး aggressive minify/optimize လုပ်ကာ error အတွင်းရေးအသေးစိတ်ကို ဖျောက်ထား။

text

SOURCE TO PRODUCTION
--------------------
Source Code  -->  Build Step  -->  Production Assets  -->  Deploy
(readable,        (compile,        (minified, bundled,
 many files)        bundle,          few files)
                     minify)

DEV BUILD:  fast rebuilds, unminified, verbose errors
PROD BUILD: optimized, minified, small bundle size

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

JS/TS project အများစုမှာ နေ့စဉ်သုံး command နှစ်ခုရှိပါတယ် — edit တိုင်း ချက်ချင်း rebuild လုပ်ပေးတဲ့ dev command တစ်ခုနဲ့ optimize လုပ်ထားတဲ့ production output ကို ထုတ်ပေးတဲ့ build command တစ်ခု၊ ဒီ output ကို platform က serve လုပ်ပေးတဲ့ folder ထဲ ရေးထည့်လေ့ရှိပါတယ်။

Deployment platform တွေက push တိုင်းမှာ ဒီ build command ကို automatic run ပေးလေ့ရှိပါတယ်၊ ကိုယ်တိုင် run ပြီး result upload လုပ်ဖို့ မလိုပါ။

Local မှာ build ကို တစ်ခါ run ကြည့်ပါ

Bug အချို့က production build မှာသာပေါ်ပြီး development မှာ ဘယ်တော့မှ မပေါ်တတ်ပါ။

Output size ကို စောင့်ကြည့်ပါ

ရုတ်တရက် size ကျယ်လာရင် dependency ကြီးတစ်ခုကို သတိမမူဘဲ ထည့်မိလို့ဖြစ်နိုင်ပါတယ်။

Build step ဟာ source code ကို compile၊ bundle၊ minify လုပ်ပြီး optimize လုပ်ထားတဲ့ production assets အဖြစ် ပြောင်းပေးပါတယ်။
Development build က speed နဲ့ ဖတ်ရလွယ်တဲ့ error ကို ဦးစားပေးပြီး production build ကတော့ size နဲ့ performance ကို ဦးစားပေးပါတယ်။
Project တိုင်းမှာ build step မလိုအပ်ပေမယ့် modern frontend framework အများစုက build step ကို အားကိုးကြပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

javascript

function simpleMinify(source) {
  return source
    .replace(/\/\/.*$/gm, "")
    .replace(/\s+/g, " ")
    .trim();
}

const devSource = `
// Add two numbers together
function add(a, b) {
  // return the sum
  return a + b;
}
`;

const prodSource = simpleMinify(devSource);

console.log("Dev build size:", devSource.length, "chars");
console.log("Prod build size:", prodSource.length, "chars");
console.log("Prod output:", prodSource);

You should see

Dev build size: 88 chars
Prod build size: 36 chars
Prod output: function add(a, b) { return a + b; }
(Comment နဲ့ whitespace တွေကို ဖယ်ရှားလိုက်လို့ character ၅၂ လျော့သွားပါတယ်)

၅ မိနစ် စမ်းကြည့်

သင့်ရဲ့ JS/CSS snippet သေးသေးလေးတစ်ခုကို ဒီ lesson ရဲ့ code ဥပမာက minify function ထဲ ဖြတ်ပြေးကြည့်ပါ။ မတိုင်ခင်/ပြီးနောက် character count ကို နှိုင်းယှဉ်ပြီး production မှာ ကျန်ရစ်ခဲ့ရင် အရေးပါမယ့် minification ဖယ်ရှားတာ နှစ်ခုကို မှတ်ချက်ချပါ။

သတိလေးတစ်ချက်

Development build ကို production ကို မှားပြီး deploy လုပ်မိတာ — byte များစွာပို့ရုံသာမက debug information ပါ ပေါက်ကြားစေနိုင်ပါတယ်။

Build command ကို local မှာ တစ်ခါမှ မ run ဘူးလို့ production-only bug ကို user အစစ်ရောက်မှသာ တွေ့ရတာ။

Minification — MDN Web Docs Glossary — Cloud & Deployment