Angular में रूट को पहले से लोड करने की रणनीतियां

उपयोगकर्ताओं के काम की रफ़्तार बढ़ाने के लिए, रूट समय से पहले लोड करें नेविगेशन.

Minko Gechev

रूट-लेवल पर कोड को अलग-अलग करने की सुविधा की मदद से, किसी ऐप्लिकेशन के लोड होने में लगने वाले शुरुआती समय को कम किया जा सकता है. ऐसा करने के लिए, उन रूट से जुड़े JavaScript को देर से लोड किया जाता है जिनकी शुरुआत में प्रोसेस की ज़रूरत नहीं होती. इस तरह, Angular राऊटर तब तक इंतज़ार करता है, जब तक कि उपयोगकर्ता दिए गए रास्ते पर नहीं जाता. इसके बाद ही, नेटवर्क से जुड़ा JavaScript डाउनलोड किया जाता.

यह तकनीक शुरुआती पेज लोड करने में बढ़िया काम करती है, लेकिन यह नेविगेशन को धीमा कर सकती है. यह उपयोगकर्ता के पेज पर निर्भर करता है नेटवर्क इंतज़ार का समय और बैंडविड्थ. इस समस्या से निपटने का एक तरीका है, रूट पहले से लोड करना. पहले से लोड करने की सुविधा का इस्तेमाल करके, जब उपयोगकर्ता किसी दिए गए रूट पर होता है, तो उन रूट से जुड़ा JavaScript डाउनलोड और कैश किया जा सकता है जिनकी आगे ज़रूरत पड़ सकती है. Angular राऊटर की मदद से, आपको कई तरह की सुविधाएं मिलती हैं.

इस पोस्ट में, आपको पता चलेगा कि Angular में JavaScript प्रीलोडिंग का इस्तेमाल करके, रूट-लेवल पर कोड का बंटवारा करते समय, नेविगेशन की स्पीड कैसे बढ़ाई जा सकती है.

Angular में रूट पहले से लोड करने की रणनीतियां

Angular राऊटर एक कॉन्फ़िगरेशन प्रॉपर्टी देता है, जिसे preloadingStrategy कहते हैं. यह लेज़ी-लोडेड ऐंग्युलर मॉड्यूल को पहले से लोड करने और प्रोसेस करने का लॉजिक तय करता है. हम दो संभावित रणनीतियों की चर्चा करेंगे:

• PreloadAllModules, जो लेज़ी-लोड हुए सभी रूट को पहले से लोड करता है, जैसा कि नाम में है
• QuicklinkStrategy, जो सिर्फ़ मौजूदा पेज पर लिंक से जुड़े रास्तों को पहले से लोड करता है.

इस पोस्ट का बाकी हिस्सा, Angular ऐप्लिकेशन के सैंपल के बारे में है. आपको सोर्स कोड GitHub पर मिल जाएगा.

PreloadAllModules कार्यनीति का उपयोग किया जा रहा है

सैंपल ऐप्लिकेशन में, लेज़ी-लोडेड कई रूट हैं. इन सभी को पहले से लोड करने के लिए, राऊटर कॉन्फ़िगरेशन में preloadingStrategy प्रॉपर्टी की वैल्यू के तौर पर, PreloadAllModules की रणनीति का इस्तेमाल करें. यह रणनीति, Angular में पहले से मौजूद होती है:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

अब ऐप्लिकेशन खोलें और Chrome DevTools में नेटवर्क पैनल देखें:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.

आपके ऐप्लिकेशन खोलने पर, आपको दिखेगा कि राऊटर ने बैकग्राउंड में nyan-nyan-module.js और about-about-module.js को डाउनलोड किया है:

राऊटर ने मॉड्यूल भी रजिस्टर किए ताकि जब आप पहले से लोड किए गए मॉड्यूल से जुड़े किसी यूआरएल पर नेविगेट करें, तो ट्रांज़िशन तुरंत हो जाए.

Quicklink पहले से लोड करने की रणनीति का इस्तेमाल करना

PreloadAllModules कई मामलों में काम आता है. हालांकि, आपके पास कई मॉड्यूल होने पर, पहले से लोड करने की प्रोसेस बहुत ज़्यादा हो जाती है. इससे नेटवर्क का इस्तेमाल बढ़ सकता है. साथ ही, राऊटर को पहले से लोड किए गए सभी मॉड्यूल में रूट रजिस्टर करने की ज़रूरत होती है. इस वजह से, यूज़र इंटरफ़ेस (यूआई) थ्रेड में बहुत ज़्यादा कंप्यूटेशन (कंप्यूटेशन) हो सकता है और उपयोगकर्ता को अच्छा अनुभव नहीं मिलता.

क्विकलिंक लाइब्रेरी, बड़े ऐप्लिकेशन के लिए बेहतर रणनीति उपलब्ध कराती है. यह सिर्फ़ पेज पर दिख रहे लिंक से जुड़े मॉड्यूल को पहले से लोड करने के लिए, IntersectionObserver एपीआई का इस्तेमाल करता है.

आप ngx-quicklink पैकेज का इस्तेमाल करके एक Angular ऐप्लिकेशन में क्विकलिंक जोड़ सकते हैं. एनपीएम से पैकेज इंस्टॉल करके शुरू करें:

npm install --save ngx-quicklink

आपके प्रोजेक्ट में उपलब्ध होने के बाद, राऊटर का preloadingStrategy तय करके QuicklinkStrategy का इस्तेमाल किया जा सकता है. साथ ही, QuicklinkModule को इंपोर्ट किया जा सकता है:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

अब ऐप्लिकेशन को फिर से खोलने पर, आपको दिखेगा कि राऊटर सिर्फ़ nyan-nyan-module.js को पहले से लोड करता है. ऐसा इसलिए, क्योंकि पेज के बीच में मौजूद बटन से राऊटर का लिंक जुड़ा होता है. साइड नेविगेशन खोलने पर, आपको दिखेगा कि राऊटर "इसके बारे में जानकारी" पेज को पहले से लोड कर देता है. रूट:

लेज़ी लोड किए गए एक से ज़्यादा मॉड्यूल में, क्विकलिंक पहले से लोड करने की रणनीति का इस्तेमाल करना

ऊपर दिया गया उदाहरण एक बेसिक ऐप्लिकेशन के लिए काम करेगा, लेकिन अगर आपके ऐप्लिकेशन में लेज़ी-लोडेड एक से ज़्यादा मॉड्यूल हैं, तो आपको QuicklinkModule को किसी शेयर किए गए मॉड्यूल में इंपोर्ट करना होगा. इसके बाद, उसे एक्सपोर्ट करना होगा और फिर शेयर किए गए मॉड्यूल को अपने लेज़ी-लोडेड मॉड्यूल में इंपोर्ट करना होगा.

पहले QuicklinkModule को ngx-quicklink से अपने शेयर किए गए मॉड्यूल में इंपोर्ट करें और उसे एक्सपोर्ट करें:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

इसके बाद, अपने SharedModule को अपने सभी लेज़ी-लोड मॉड्यूल में इंपोर्ट करें:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks अब आपके लेज़ी-लोडेड मॉड्यूल में उपलब्ध होगा.

पेजों को पहले से लोड करने की बुनियादी सुविधाओं के अलावा, कुछ और सुविधाएं

क्विक लिंक की मदद से चुनिंदा पेजों को पहले से लोड करने की सुविधा से नेविगेशन की स्पीड काफ़ी बढ़ सकती है. हालांकि, पहले से लोड करने की अनुमानित सुविधा का इस्तेमाल करके, पेजों को पहले से लोड करने की रणनीति को ज़्यादा बेहतर बनाया जा सकता है. इसे Guess.js की मदद से लागू किया जाता है. Google Analytics या आंकड़ों की सेवा देने वाली किसी दूसरी कंपनी की रिपोर्ट का विश्लेषण करके, Guess.js उपयोगकर्ता की नेविगेशन गतिविधि का अनुमान लगा सकता है. साथ ही, सिर्फ़ JavaScript के सिर्फ़ उन हिस्सों को पहले से लोड कर सकता है जिनकी आगे ज़रूरत पड़ सकती है.

guess.js साइट के इस पेज पर, Angular के साथ Guess.js को इस्तेमाल करने का तरीका जानें.

नतीजा

रूट-लेवल पर कोड को अलग-अलग करने की सुविधा का इस्तेमाल करते समय, नेविगेशन की रफ़्तार बढ़ाने के लिए:

1. अपने ऐप्लिकेशन के साइज़ के हिसाब से, पेजों को पहले से लोड करने की सही रणनीति चुनें:
   • कम मॉड्यूल वाले ऐप्लिकेशन, Angular की पहले से मौजूद PreloadAllModules रणनीति का इस्तेमाल कर सकते हैं.
   • कई मॉड्यूल वाले ऐप्लिकेशन को पहले से लोड करने की कस्टम रणनीति का इस्तेमाल करना चाहिए, जैसे कि Angular's क्विकलिंक या पहले से लोड करने के अनुमानित तरीके को, जैसा कि Guess.js में लागू किया गया है.
2. Angular राऊटर की preloadStrategy प्रॉपर्टी को सेट करके, पहले से लोड करने की रणनीति को कॉन्फ़िगर करें.