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

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

Minko Gechev

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

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

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

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

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

• 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 डाउनलोड किए हैं:

PreloadAllModules की रणनीति को लागू करते हुए दिखाया गया है.

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

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

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

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

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

npm install --save ngx-quicklink

जब यह आपके प्रोजेक्ट में उपलब्ध हो जाए, तो राउटर का preloadingStrategy तय करके और QuicklinkModule इंपोर्ट करके, QuicklinkStrategy का इस्तेमाल किया जा सकता है:

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

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

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

क्विकलिंक को प्रीलोड करने की रणनीति का डेमो.

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

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

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

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 का क्विकलिंक या अनुमानित प्रीलोडिंग, जैसा कि Guess.js में लागू किया गया है.
2. Angular राऊटर की preloadStrategy प्रॉपर्टी सेट करके, प्रीलोड करने की रणनीति कॉन्फ़िगर करें.