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

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

Minko Gechev

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

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

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

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

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

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

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

PreloadAllModules रणनीति का इस्तेमाल करना

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

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

क्विकलिंक लाइब्रेरी, बड़े ऐप्लिकेशन के लिए बेहतर रणनीति उपलब्ध कराती है. यह 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 प्रॉपर्टी सेट करके, प्रीलोड करने की रणनीति कॉन्फ़िगर करें.