রুট-লেভেল কোড স্প্লিটিং ব্যবহার করে আপনার অ্যাপের পারফর্ম্যান্স উন্নত করুন!
এই পোস্টে ব্যাখ্যা করা হয়েছে যে কীভাবে Angular অ্যাপ্লিকেশনে রুট-লেভেল কোড স্প্লিটিং সেট-আপ করতে হয়, যা JavaScript বান্ডেলের সাইজ কমাতে পারে এবং Time to Interactive-এর ক্ষেত্রে নাটকীয়ভাবে উন্নতি করতে পারে।
আপনি GitHub-এ এই নিবন্ধ থেকে কোডের স্যাম্পেল খুঁজে পেতে পারেন। ইগার রাউটিংয়ের উদাহরণ ইগার ব্রাঞ্চে উপলভ্য। রুট-লেভেল কোড স্প্লিটিংয়ের উদাহরণ লেজি ব্রাঞ্চে আছে।
কোড স্প্লিটিং কেন গুরুত্বপূর্ণ
ওয়েব অ্যাপ্লিকেশনের জটিলতা ক্রমাগত বৃদ্ধি পাওয়ার কারণে ব্যবহারকারীদের কাছে পাঠানো জাভাস্ক্রিপ্টের পরিমাণ উল্লেখযোগ্যভাবে বৃদ্ধি পেয়েছে। বড় জাভাস্ক্রিপ্ট ফাইল ইন্টার্যাক্টিভিটিতে লক্ষণীয়ভাবে দেরি করতে পারে, তাই এটি একটি ব্যয়বহুল রিসোর্স হতে পারে, বিশেষ করে মোবাইলে।
আপনার অ্যাপ্লিকেশনের ফিচারগুলি ত্যাগ না করে জাভাস্ক্রিপ্ট বান্ডেলগুলি সঙ্কুচিত করার সবচেয়ে কার্যকর উপায় হল অ্যাগ্রেসিভ কোড স্প্লিটিং চালু করা।
কোড স্প্লিটিং আপনাকে বিভিন্ন রুট বা ফিচারের সাথে যুক্ত একাধিক চাঙ্কে আপনার অ্যাপ্লিকেশনের জাভাস্ক্রিপ্ট ভাগ করতে দেয়। এই পদ্ধতিতে ব্যবহারকারীদের শুধু সেই জাভাস্ক্রিপ্ট পাঠানো হয় যা প্রাথমিক অ্যাপ্লিকেশন লোড করার সময় প্রয়োজন হয়, এর ফলে লোড করার সময় কম লাগে।
কোড স্প্লিটিং টেকনিক
কোড স্প্লিটিং দুটি লেভেলে করা যেতে পারে: কম্পোনেন্ট লেভেল এবং রুট লেভেল।
- কম্পোনেন্ট-লেভেল কোড স্প্লিটিংয়ের ক্ষেত্রে, আপনি কম্পোনেন্টগুলিকে তাদের নিজস্ব জাভাস্ক্রিপ্ট চাঙ্কে সরান এবং প্রয়োজন হলে সেগুলি লেজি লোড করেন।
- রুট-লেভেল কোড স্প্লিটিংয়ের ক্ষেত্রে, আপনি প্রতিটি রুটের কার্যকারিতা আলাদা চাঙ্কে এনক্যাপসুলেট করেন। ব্যবহারকারীরা আপনার অ্যাপ্লিকেশন নেভিগেট করার সময়, তারা স্বতন্ত্র রুটের সাথে সম্পর্কিত চাঙ্ক ফেচ করেন এবং প্রয়োজন হলে সংশ্লিষ্ট কার্যকারিতা পান।
এই পোস্টে Angular-এ রুট-লেভেল স্প্লিটিং সেট-আপ করার উপর ফোকাস করা হয়েছে।
স্যাম্পেল অ্যাপ্লিকেশন
Angular-এ রুট লেভেল কোড স্প্লিটিং কীভাবে ব্যবহার করতে হয় তা জানার আগে, আসুন একটি স্যাম্পেল অ্যাপ দেখে নেওয়া যাক:
অ্যাপের মডিউল কীভাবে প্রয়োগ করা হয়েছে তা চেক করুন। AppModule-এর মধ্যে দুটি রুট নির্দিষ্ট করা আছে: HomeComponent-এর সাথে যুক্ত ডিফল্ট রুট এবং NyanComponent-এর সাথে যুক্ত nyan রুট:
@NgModule({
...
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
pathMatch: 'full'
},
{
path: 'nyan',
component: NyanComponent
}
])
],
...
})
export class AppModule {}
রুট-লেভেল কোড স্প্লিটিং
কোড স্প্লিটিং সেট-আপ করতে, nyan ইগার রুট রিফ্যাক্টর করতে হবে।
Angular CLI-এর 8.1.0 ভার্সন এই কমান্ডের মাধ্যমে আপনার জন্য সবকিছু করতে পারে:
ng g module nyan --module app --route nyan
এটি এগুলি তৈরি করবে:
- NyanModule নামের একটি নতুন রাউটিং মডিউল
- AppModule-এ nyan নামের একটি রুট যা ডায়নামিকভাবে NyanModule লোড করবে
- NyanModule-এ একটি ডিফল্ট রুট
- NyanComponent নামের একটি কম্পোনেন্ট যা ব্যবহারকারী ডিফল্ট রুটে হিট করলে রেন্ডার করা হবে
আসুন, এই ধাপগুলি ম্যানুয়ালি অনুসরণ করি যাতে Angular-এর সাথে কোড স্প্লিটিং প্রয়োগ করার বিষয়টি আরও ভালোভাবে বুঝতে পারি!
ব্যবহারকারী nyan রুটে নেভিগেট করলে, রাউটারটি রাউটার আউটলেটে NyanComponent রেন্ডার করবে।
Angular-এ রুট-লেভেল কোড স্প্লিটিং ব্যবহার করতে, রুট ডিক্লারেশনের loadChildren প্রপার্টি সেট করুন এবং ডায়নামিক ইমপোর্টের সাথে এটি একত্রিত করুন:
{
path: 'nyan',
loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}
ইগার রুটের থেকে দুটি মূল পার্থক্য আছে:
- আপনি
component-এর পরিবর্তেloadChildrenসেট করেছেন। রুট-লেভেল কোড স্প্লিটিং ব্যবহার করার সময় আপনাকে কম্পোনেন্টের পরিবর্তে ডায়নামিকভাবে লোড করা মডিউলের দিকে পয়েন্ট করতে হবে। loadChildren-এ, প্রমিস সমাধান হয়ে গেলে, আপনিNyanComponent-এ পয়েন্ট করার পরিবর্তেNyanModuleফিরিয়ে দেন।
উপরের স্নিপেট থেকে বোঝা যায় যে ব্যবহারকারী nyan-এ নেভিগেট করলে, Angular-এর উচিত nyan ডিরেক্টরি থেকে ডায়নামিকভাবে nyan.module লোড করা এবং মডিউলে ঘোষিত ডিফল্ট রুটের সাথে সম্পর্কিত কম্পোনেন্ট রেন্ডার করা।
এই ঘোষণা ব্যবহার করে আপনি ডিফল্ট রুটকে কোনও কম্পোনেন্টের সাথে যুক্ত করতে পারবেন:
import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [NyanComponent],
imports: [
RouterModule.forChild([{
path: '',
pathMatch: 'full',
component: NyanComponent
}])
]
})
export class NyanModule {}
ব্যবহারকারী https://example.com/nyan-এ নেভিগেট করলে এই কোড NyanComponent রেন্ডার করে।
আপনার লোকাল এনভায়রনমেন্টে Angular রাউটার nyan.module লেজি ডাউনলোড করে কিনা তা চেক করতে:
- DevTools খুলতে `Control+Shift+J` (বা Mac-এ `Command+Option+J`) প্রেস করুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
স্যাম্পেল অ্যাপে NYAN-এ ক্লিক করুন।
মনে রাখবেন, নেটওয়ার্ক ট্যাবে
nyan-nyan-module.jsফাইলটি দেখা যায়।
GitHub-এ এই উদাহরণটি খুঁজুন।
স্পিনার দেখান
বর্তমানে, ব্যবহারকারী NYAN বোতামে ক্লিক করলে, অ্যাপ্লিকেশনটি দেখায় না যে এটি ব্যাকগ্রাউন্ডে জাভাস্ক্রিপ্ট লোড করছে। স্ক্রিপ্ট লোড করার সময় ব্যবহারকারীকে ফিডব্যাক দিতে, আপনি হয়ত স্পিনার যোগ করতে চাইবেন।
এটি করতে, app.component.html-এ router-outlet এলিমেন্টের মধ্যে ইন্ডিকেটরের জন্য মার্কআপ যোগ করে শুরু করুন:
<router-outlet>
<span class="loader" *ngIf="loading"></span>
</router-outlet>
তারপর রাউটিং ইভেন্ট ম্যানেজ করতে AppComponent ক্লাস যোগ করুন। এই ক্লাস RouteConfigLoadStart ইভেন্ট শুনলে loading ফ্ল্যাগকে true-এ সেট করবে এবং RouteConfigLoadEnd ইভেন্ট শুনলে ফ্ল্যাগকে false-এ সেট করবে।
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loading: boolean;
constructor(router: Router) {
this.loading = false;
router.events.subscribe(
(event: RouterEvent): void => {
if (event instanceof NavigationStart) {
this.loading = true;
} else if (event instanceof NavigationEnd) {
this.loading = false;
}
}
);
}
}
নিচের উদাহরণে আমরা ৫০০ মিলি সেকেন্ডের একটি কৃত্রিম লেটেন্সি যোগ করেছি যাতে আপনি স্পিনারকে কাজ করতে দেখতে পারেন।
উপসংহার
রুট-লেভেল কোড স্প্লিটিং প্রয়োগ করে আপনি Angular অ্যাপ্লিকেশনের বান্ডেল সাইজ কমাতে পারবেন:
- ডায়নামিকভাবে লোড করা রুট অটোমেটিক স্ক্যাফোল্ড করতে, Angular CLI ধীরে ধীরে লোড করা মডিউল জেনারেটর ব্যবহার করুন।
- ব্যবহারকারী কোনও লেজি রুটে নেভিগেট করলে, কোনও অ্যাকশন চলছে তা দেখানোর জন্য একটি লোডিং ইন্ডিকেটর যোগ করুন।