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