මොඩියුලය 13: Performance Optimization & Deployment

Angular යෙදුමක වේගය සහ ප්‍රතිචාරාත්මක බව වැඩි දියුණු කිරීමට ප්‍රධාන ක්‍රම කිහිපයක් ඇත.

Ahead-of-Time (AOT) Compilation

පෙරනිමියෙන්, production builds වලදී Angular CLI විසින් AOT compilation භාවිතා කරයි. මෙහිදී, Angular components සහ templates, development අතරතුරදී browser එකේදී compile වීම වෙනුවට, build process එකේදීම ඉහළ කාර්යක්ෂම JavaScript කේත බවට පරිවර්තනය වේ. මෙය යෙදුම browser එකේදී render වීම වඩාත් වේගවත් කරයි.

Lazy Loading & Code Splitting

මොඩියුල 6 හි සාකච්ඡා කළ පරිදි, Lazy Loading මගින් යෙදුමේ ආරම්භක bundle size එක අඩු කරයි. පරිශීලකයාට ආරම්භයේදී අවශ්‍ය වන කේතය පමණක් load කර, අනෙකුත් feature modules අවශ්‍ය වූ විට පමණක් load කිරීමෙන් යෙදුමේ ආරම්භක වේගය (initial load time) බෙහෙවින් වැඩි දියුණු වේ.

Tree Shaking

Tree shaking යනු build process එකේදී, යෙදුම තුළ භාවිතා නොකරන කේත (unused code) ස්වයංක්‍රීයව හඳුනාගෙන ඉවත් කිරීමේ ක්‍රියාවලියයි. උදාහරණයක් ලෙස, ඔබ import කළ library එකක ඇති නමුත් භාවිතා නොකරන functions ඉවත් කරනු ලැබේ. මෙය අවසාන bundle size එක කුඩා කිරීමට උපකාරී වේ.

`OnPush` Change Detection

මොඩියුල 9 හි සාකච්ඡා කළ පරිදි, ChangeDetectionStrategy.OnPush භාවිතා කිරීමෙන් අනවශ්‍ය change detection cycles අඩු කර යෙදුමේ runtime performance එක වැඩි දියුණු කළ හැක.

Development (`ng serve`) සහ production (`ng build`) අතර විශාල වෙනසක් ඇත. Production build එකක් සෑදීමට පහත CLI command එක භාවිතා කරයි:

ng build --configuration production
# or simply
ng build

මෙම command එක මගින් Angular CLI විසින් පහත ප්‍රශස්තකරණයන් (optimizations) ස්වයංක්‍රීයව සිදු කරයි:

• AOT Compilation: ඉහත විස්තර කළ පරිදි.
• Minification: JavaScript සහ CSS ගොනු වලින් අනවශ්‍ය හිස්තැන් (whitespace), comments, සහ new lines ඉවත් කර ගොනු ප්‍රමාණය කුඩා කරයි.
• Uglification/Terser: JavaScript කේතය analyse කර, variable නම් කෙටි කිරීම වැනි දේ හරහා කේතය තවදුරටත් කුඩා කරයි.
• Dead Code Elimination: Tree shaking වලට සමානව, ළඟා විය නොහැකි (unreachable) කේත ඉවත් කරයි.

මෙම ක්‍රියාවලියෙන් පසු, `dist/your-project-name/` ෆෝල්ඩරය තුළ production-ready, ප්‍රශස්ත කරන ලද ගොනු නිර්මාණය වේ.

`ng build` මගින් ජනනය කරන ලද static files (HTML, CSS, JS) ඕනෑම web server එකක host කළ හැක. පොදු ක්‍රම කිහිපයක්:

• Shared Hosting/VPS: cPanel වැනි control panel එකක් හරහා `dist/` ෆෝල්ඩරයේ අන්තර්ගතය ඔබගේ server එකට upload කිරීම.
• Firebase Hosting: Google හි Firebase platform එක මගින් static sites host කිරීමට සරල සහ වේගවත් ක්‍රමයක් සපයයි.
• Netlify / Vercel: Git repository (GitHub, GitLab) එකක් සමඟ සම්බන්ධ වී, ඔබ කේතය push කරන සෑම විටම ස්වයංක්‍රීයව build සහ deploy කරන නවීන platforms.
• Docker: යෙදුම containerize කර ඕනෑම cloud provider (AWS, Azure, Google Cloud) කෙනෙකු මත deploy කිරීම.

Router Configuration

Single-Page Application (SPA) එකක් deploy කිරීමේදී, server එකට යම් configuration එකක් අවශ්‍ය වේ. පරිශීලකයෙකු `your-site.com/users/5` වැනි deep link එකක් browser එකේ type කළ විට, server එක විසින් එම path එකට අදාළ ගොනුවක් සෙවීම වෙනුවට, සෑම විටම `index.html` ගොනුව return කළ යුතුය. ඉන්පසු Angular Router මගින් නිවැරදි component එක load කිරීම සිදු කරයි. මෙය "fallback to index.html" ලෙස හැඳින්වේ.