रूट-लेवल पर कोड को बांटने की सुविधा का इस्तेमाल करके, अपने ऐप्लिकेशन की परफ़ॉर्मेंस बेहतर बनाएं!
इस पोस्ट में, किसी Angular ऐप्लिकेशन में रूट-लेवल पर कोड को बांटने की सुविधा को सेट अप करने का तरीका बताया गया है. इससे JavaScript बंडल का साइज़ कम हो सकता है और इंटरैक्टिव में लगने वाला समय बेहतर हो सकता है.
GitHub पर दिए गए इस लेख में दिए गए कोड सैंपल. eager रूटिंग का उदाहरण eager शाखा में उपलब्ध है. रूट-लेवल पर कोड को बांटने का उदाहरण, लेज़ी ब्रांच में है.
कोड को बांटना क्यों ज़रूरी है
वेब ऐप्लिकेशन की बढ़ती जटिलता की वजह से, उपयोगकर्ताओं के लिए JavaScript भेजने की संख्या में काफ़ी बढ़ोतरी हुई है. बड़ी JavaScript फ़ाइलों से इंटरैक्टिविटी में देरी हो सकती है, इसलिए खास तौर पर मोबाइल पर यह एक महंगा संसाधन हो सकता है.
अपने ऐप्लिकेशन में सुविधाओं को छोड़े बिना JavaScript बंडल को छोटा करने का सबसे असरदार तरीका है, असरदार कोड स्प्लिटिंग लागू करना.
कोड को अलग-अलग हिस्सों में बांटने की मदद से, अपने ऐप्लिकेशन के JavaScript को अलग-अलग रूट या सुविधाओं से जुड़े कई हिस्सों में बांटा जा सकता है. यह तरीका उपयोगकर्ताओं को ऐप्लिकेशन लोड होने के शुरुआती समय में ही ज़रूरी JavaScript भेजता है. इससे, लोड होने में लगने वाला समय कम रहता है.
कोड को बांटने की तकनीकें
कोड को दो लेवल पर बांटा जा सकता है: कॉम्पोनेंट लेवल और रूट लेवल.
- कॉम्पोनेंट-लेवल पर कोड को स्प्लिट करने में, कॉम्पोनेंट को उनके अपने JavaScript हिस्सों में ले जाया जाता है और ज़रूरत पड़ने पर उन्हें लेज़ी तरीके से लोड किया जाता है.
- रूट-लेवल पर कोड को बांटने में, आप हर रूट के फ़ंक्शन को एक अलग हिस्से में इकट्ठा करते हैं. जब उपयोगकर्ता आपके ऐप्लिकेशन पर नेविगेट करते हैं, तो वे अलग-अलग रूट से जुड़े डेटा इकट्ठा करते हैं. साथ ही, ज़रूरत पड़ने पर उन्हें इससे जुड़े फ़ंक्शन मिलते हैं.
इस पोस्ट में, 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 सीएलआई के वर्शन 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 बटन पर क्लिक करता है, तो ऐप्लिकेशन यह नहीं बताता कि वह बैकग्राउंड में JavaScript लोड कर रहा है. स्क्रिप्ट लोड करते समय उपयोगकर्ता को सुझाव देने के लिए, आपको स्पिनर जोड़ा जा सकता है.
ऐसा करने के लिए, 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 मि॰से॰ के इंतज़ार का समय पेश किया है, ताकि आप स्पिनर को काम करते हुए देख सकें.
नतीजा
रूट-लेवल पर कोड को बांटने की सुविधा लागू करके, अपने Angular ऐप्लिकेशन के बंडल साइज़ को छोटा किया जा सकता है:
- डाइनैमिक रूप से लोड होने वाले रूट को अपने-आप स्केल करने के लिए, एंगुलर सीएलआई लेज़ी-लोडेड मॉड्यूल जनरेटर का इस्तेमाल करें.
- जब उपयोगकर्ता लेज़ी रास्ते पर नेविगेट करता है, तब पेज लोड होने की जानकारी देने वाला इंडिकेटर जोड़ें. इससे यह पता चलेगा कि कोई कार्रवाई चल रही है.