রুট-লেভেল কোড স্প্লিটিং ব্যবহার করে আপনার অ্যাপের কর্মক্ষমতা উন্নত করুন!
এই পোস্টটি ব্যাখ্যা করে যে কীভাবে একটি কৌণিক অ্যাপ্লিকেশনে রুট-লেভেল কোড স্প্লিটিং সেট আপ করতে হয়, যা জাভাস্ক্রিপ্ট বান্ডেলের আকার কমাতে পারে এবং ইন্টারঅ্যাকটিভের সময়কে নাটকীয়ভাবে উন্নত করতে পারে।
আপনি 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 অলস-লোড মডিউল জেনারেটর ব্যবহার করুন স্বয়ংক্রিয়ভাবে একটি গতিশীল লোড রুট স্ক্যাফোল্ড করতে।
- একটি চলমান ক্রিয়া দেখাতে ব্যবহারকারী যখন একটি অলস রুটে নেভিগেট করেন তখন একটি লোডিং সূচক যোগ করুন৷