রুট-লেভেল কোড স্প্লিটিং ব্যবহার করে আপনার অ্যাপের কর্মক্ষমতা উন্নত করুন!
এই পোস্টটি ব্যাখ্যা করে যে কীভাবে একটি কৌণিক অ্যাপ্লিকেশনে রুট-লেভেল কোড স্প্লিটিং সেট আপ করতে হয়, যা জাভাস্ক্রিপ্ট বান্ডেলের আকার কমাতে পারে এবং ইন্টারঅ্যাকটিভের সময়কে নাটকীয়ভাবে উন্নত করতে পারে।
আপনি GitHub এ এই নিবন্ধ থেকে কোড নমুনা খুঁজে পেতে পারেন। আগ্রহী রাউটিং উদাহরণ আগ্রহী শাখায় পাওয়া যায়। রুট-স্তরের কোড বিভাজন উদাহরণটি অলস শাখায় রয়েছে।
কেন কোড বিভাজন বিষয়
ওয়েব অ্যাপ্লিকেশনের ক্রমবর্ধমান জটিলতা ব্যবহারকারীদের কাছে পাঠানো জাভাস্ক্রিপ্টের পরিমাণে উল্লেখযোগ্য বৃদ্ধির দিকে পরিচালিত করেছে। বড় জাভাস্ক্রিপ্ট ফাইলগুলি লক্ষণীয়ভাবে ইন্টারঅ্যাক্টিভিটি বিলম্বিত করতে পারে, তাই এটি একটি ব্যয়বহুল সম্পদ হতে পারে, বিশেষ করে মোবাইলে।
আপনার অ্যাপ্লিকেশানগুলিতে বৈশিষ্ট্যগুলিকে ত্যাগ না করে জাভাস্ক্রিপ্ট বান্ডিলগুলিকে সঙ্কুচিত করার সবচেয়ে কার্যকর উপায় হল আক্রমণাত্মক কোড বিভাজন প্রবর্তন করা৷
কোড স্প্লিটিং আপনাকে আপনার অ্যাপ্লিকেশনের জাভাস্ক্রিপ্টকে বিভিন্ন রুট বা বৈশিষ্ট্যের সাথে যুক্ত একাধিক খণ্ডে ভাগ করতে দেয়। এই পদ্ধতিটি শুধুমাত্র ব্যবহারকারীদের প্রাথমিক অ্যাপ্লিকেশন লোডের সময় তাদের প্রয়োজনীয় জাভাস্ক্রিপ্ট পাঠায়, লোডের সময় কম রেখে।
কোড বিভাজন কৌশল
কোড বিভাজন দুটি স্তরে করা যেতে পারে: উপাদান স্তর এবং রুট স্তর ।
- কম্পোনেন্ট-লেভেল কোড বিভাজনে, আপনি উপাদানগুলিকে তাদের নিজস্ব জাভাস্ক্রিপ্ট খণ্ডে নিয়ে যান এবং যখন তাদের প্রয়োজন হয় তখন অলসভাবে লোড করেন।
- রুট-স্তরের কোড বিভাজনে, আপনি প্রতিটি রুটের কার্যকারিতাকে একটি পৃথক খণ্ডে জুড়ে দেন। যখন ব্যবহারকারীরা আপনার অ্যাপ্লিকেশনটি নেভিগেট করে তখন তারা পৃথক রুটের সাথে যুক্ত অংশগুলি নিয়ে আসে এবং যখন তাদের প্রয়োজন হয় তখন সংশ্লিষ্ট কার্যকারিতা পায়।
এই পোস্টটি কৌণিক-এ রুট-স্তরের বিভাজন সেট আপ করার উপর দৃষ্টি নিবদ্ধ করে।
নমুনা আবেদন
অ্যাঙ্গুলারে রুট লেভেল কোড স্প্লিটিং কীভাবে ব্যবহার করবেন তা খনন করার আগে, আসুন একটি নমুনা অ্যাপটি দেখি:
অ্যাপের মডিউল বাস্তবায়ন পরীক্ষা করে দেখুন। AppModule
ভিতরে দুটি রুট সংজ্ঞায়িত করা হয়েছে: HomeComponent
এর সাথে যুক্ত ডিফল্ট রুট এবং NyanComponent
এর সাথে যুক্ত একটি nyan
রুট:
@NgModule({
...
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
pathMatch: 'full'
},
{
path: 'nyan',
component: NyanComponent
}
])
],
...
})
export class AppModule {}
রুট-স্তরের কোড বিভাজন
কোড স্প্লিটিং সেট আপ করার জন্য, nyan
আগ্রহী রুটকে রিফ্যাক্টর করতে হবে।
কৌণিক CLI এর সংস্করণ 8.1.0 এই কমান্ডের সাহায্যে আপনার জন্য সবকিছু করতে পারে:
ng g module nyan --module app --route nyan
এটি তৈরি করবে: - NyanModule
নামে একটি নতুন রাউটিং মডিউল - AppModule
একটি রুট যা nyan
নামে পরিচিত যা গতিশীলভাবে NyanModule
লোড করবে - NyanModule
এ একটি ডিফল্ট রুট - NyanComponent
নামক একটি উপাদান যা ব্যবহারকারী ডিফল্ট রুটে আঘাত করলে রেন্ডার করা হবে
আসুন এই পদক্ষেপগুলি ম্যানুয়ালি পেরিয়ে যাই যাতে আমরা কৌণিকের সাথে কোড বিভাজন প্রয়োগ করার বিষয়ে আরও ভালভাবে বুঝতে পারি!
ব্যবহারকারী যখন 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
রেন্ডার করে।
কৌণিক রাউটার আপনার স্থানীয় পরিবেশে অলসভাবে 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;
}
}
);
}
}
নীচের উদাহরণে আমরা একটি কৃত্রিম 500 ms লেটেন্সি প্রবর্তন করেছি যাতে আপনি স্পিনারকে অ্যাকশনে দেখতে পারেন।
উপসংহার
আপনি রুট-লেভেল কোড স্প্লিটিং প্রয়োগ করে আপনার কৌণিক অ্যাপ্লিকেশনগুলির বান্ডিলের আকার সঙ্কুচিত করতে পারেন:
- কৌণিক CLI অলস-লোড মডিউল জেনারেটর ব্যবহার করুন স্বয়ংক্রিয়ভাবে একটি গতিশীল লোড রুট স্ক্যাফোল্ড করতে।
- একটি চলমান ক্রিয়া দেখাতে ব্যবহারকারী যখন একটি অলস রুটে নেভিগেট করেন তখন একটি লোডিং সূচক যোগ করুন৷