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

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

मिंको गेचेव

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

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

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

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

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

• 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 को बैकग्राउंड में डाउनलोड किया:

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

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 को पहले से लोड करता है, क्योंकि पेज के बीच में दिए गए बटन में उसका राऊटर लिंक है. साइड नेविगेशन खोलने पर, आपको दिखेगा कि राऊटर फिर "इसके बारे में" रूट को पहले से लोड कर देता है:

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

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