कोणीय 9 और आइवी: आलसी घटक लोड हो रहा है

कोणीय में आलसी घटक लोड हो रहा है? शायद हम कोणीय राउटर का उपयोग करके आलसी लोडिंग मॉड्यूल के बारे में बात कर रहे हैं? नहीं, हम घटकों के बारे में बात कर रहे हैं। कोणीय का वर्तमान संस्करण केवल आलसी मॉड्यूल लोडिंग का समर्थन करता है। लेकिन आइवी डेवलपर को घटकों के साथ काम करने के नए अवसर प्रदान करता है।

आलसी लोड हम अब तक इस्तेमाल करते थे: मार्गों

आलसी लोडिंग एक महान तंत्र है। कोणीय में, आप आलसी लोडिंग का समर्थन करने वाले मार्गों की घोषणा करके लगभग किसी भी प्रयास किए बिना इस तंत्र का उपयोग कर सकते हैं। यह प्रदर्शित करने वाले कोणीय दस्तावेज से एक उदाहरण इस प्रकार है:

const routes: Routes = [     { path: 'customer-list',       loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }     ]; 

उपरोक्त कोड के लिए धन्यवाद, customers.module लिए एक अलग टुकड़ा बनाया जाएगा, जिसे तब लोड किया जाएगा जब उपयोगकर्ता customer-list मार्ग के साथ नेविगेट करता है।

यह परियोजना के मुख्य बंडल के आकार को कम करने और आवेदन के प्रारंभिक लोडिंग को तेज करने का एक बहुत अच्छा तरीका है।

लेकिन इसके बावजूद, आलसी लोडिंग को अधिक सटीक रूप से नियंत्रित करने में सक्षम होना अच्छा नहीं होगा? उदाहरण के लिए, क्या होगा अगर हम व्यक्तिगत घटकों के आलसी लोडिंग को व्यवस्थित कर सकते हैं?

अब तक, यह संभव नहीं हो पाया है। लेकिन आइवी के आगमन के साथ यह सब बदल गया।

आइवी और "इलाके" की अवधारणा

मॉड्यूल हर कोणीय अनुप्रयोग की मूल अवधारणा और बुनियादी निर्माण खंड हैं। मॉड्यूल घटक, निर्देश, पाइप, सेवाओं की घोषणा करते हैं।

मॉड्यूल के बिना एक आधुनिक कोणीय अनुप्रयोग मौजूद नहीं हो सकता। इसका एक कारण यह तथ्य है कि ViewEngine मॉड्यूल के लिए सभी आवश्यक मेटाडेटा जोड़ता है।

दूसरी ओर, आइवी एक अलग दृष्टिकोण लेता है। आइवी में, एक मॉड्यूल के बिना एक घटक मौजूद हो सकता है। यह स्थानीयता की अवधारणा के लिए संभव है। इसका सार यह है कि सभी मेटाडेटा घटक के लिए स्थानीय है।

आइवी का उपयोग करके उत्पन्न es2015 बंडल का विश्लेषण करके इसे समझाते हैं।


Es2015- बंडल आइवी का उपयोग करके उत्पन्न

Component code अनुभाग में, आप देख सकते हैं कि Ivy प्रणाली ने घटक कोड को सहेज लिया है। यहां कुछ खास नहीं है। लेकिन फिर आइवी कोड में कुछ मेटाडेटा जोड़ता है।

मेटाडेटा का पहला टुकड़ा एक Component factory रूप में चित्र में दिखाया गया है। कारखाने को पता है कि एक घटक को कैसे तत्काल किया जाए। Component metadata अनुभाग में, आइवी अतिरिक्त विशेषताओं को रखता है, जैसे कि type और selectors , अर्थात, प्रोग्राम निष्पादन के दौरान घटक की आवश्यकता है।

यह ध्यान देने योग्य है कि आइवी यहां template फ़ंक्शन जोड़ता है। यह Compiled version of your template अनुभाग के Compiled version of your template में दिखाया गया है। आइए हम इस दिलचस्प तथ्य पर अधिक विस्तार से ध्यान दें।

template फ़ंक्शन हमारे HTML कोड का संकलित संस्करण है। वह डोम बनाने के लिए आइवी के निर्देशों का पालन करता है। यह अलग है कि ViewEngine कैसे काम करता है।

ViewEngine सिस्टम कोड लेता है और इसे बायपास करता है। यदि हम इसका उपयोग करते हैं तो कोणीय कोड का निष्पादन करेगा।

और आइवी द्वारा उपयोग किए जाने वाले दृष्टिकोण के साथ, जो घटक कोणीय कमांड को आमंत्रित करता है वह सब कुछ के प्रभारी है। यह परिवर्तन घटकों को स्वतंत्र रूप से मौजूद होने की अनुमति देता है, यह इस तथ्य की ओर जाता है कि ट्री-शेक एल्गोरिथ्म को कोणीय आधार कोड पर लागू किया जा सकता है।

आलसी घटक लोडिंग का एक वास्तविक उदाहरण

अब जब हम जानते हैं कि आलसी घटक लोड करना संभव है, तो इसे वास्तविक उदाहरण से समझें। अर्थात्, हम एक क्विज़ एप्लिकेशन बनाएंगे, जो उत्तर विकल्पों के साथ उपयोगकर्ता से प्रश्न पूछेगा।

एप्लिकेशन शहर की एक छवि और विकल्प प्रदर्शित करता है जिसमें से आपको इस शहर का नाम चुनने की आवश्यकता है। जैसे ही उपयोगकर्ता संबंधित बटन पर क्लिक करके एक विकल्प का चयन करता है, यह बटन तुरंत बदल जाएगा, यह दर्शाता है कि उत्तर सही था या गलत। यदि बटन की पृष्ठभूमि हरे रंग की हो जाती है, तो उत्तर सही था। यदि पृष्ठभूमि लाल हो जाती है, तो इसका मतलब है कि उत्तर गलत था।

वर्तमान प्रश्न का उत्तर प्राप्त होने के बाद, कार्यक्रम निम्नलिखित प्रश्न प्रदर्शित करता है। यहाँ है कि यह कैसा दिखता है।


क्विज़ डेमो

प्रोग्राम द्वारा उपयोगकर्ता से पूछे जाने वाले QuizCardComponent घटक द्वारा QuizCardComponent हैं।

आलसी घटक लोडिंग अवधारणा

आइए सबसे पहले QuizCardComponent घटक को लोड करने के सामान्य विचार का वर्णन करें।


QuizCardComponent घटक प्रक्रिया

उपयोगकर्ता द्वारा क्विज़ Start quiz बटन पर क्लिक करके क्विज़ शुरू करने के बाद, हम घटक के आलसी लोडिंग को शुरू करते हैं। घटक हमारे निपटान में होने के बाद, हम इसे एक कंटेनर में रखते हैं।

हम एक "आलसी" घटक की प्रश्नांकित घटनाओं पर प्रतिक्रिया करते हैं उसी तरह हम एक नियमित घटक की घटनाओं पर प्रतिक्रिया करेंगे। अर्थात्, घटना की घटना के बाद, हम स्क्रीन पर अगले कार्ड को प्रश्न के साथ प्रदर्शित करते हैं।

कोड विश्लेषण

किसी घटक के आलसी लोडिंग के दौरान क्या होता है, यह समझने के लिए, हम QuizCardComponent सरलीकृत संस्करण से शुरू करते हैं, जो प्रश्न के गुणों को प्रदर्शित करता है।

फिर हम इसमें एंगुलर मटेरियल घटकों का उपयोग करके इस घटक का विस्तार करेंगे। और अंत में, हम घटक द्वारा उत्पन्न घटनाओं की प्रतिक्रिया को समायोजित करेंगे।

आइए QuizCardComponent घटक के सरलीकृत संस्करण के आलसी लोडिंग को व्यवस्थित करें, जिसमें निम्न टेम्पलेट है:

 <h1>Here's the question</h1> <ul>    <li><b>Image: </b> {{ question.image }}</li>    <li><b>Possible selections: </b> {{ question.possibleSelections.toString() }}</li>    <li><b>Correct answer: </b> {{ question.correctAnswer }}</li> </ul> 

पहला कदम एक कंटेनर तत्व बनाना है। ऐसा करने के लिए, हम या तो एक वास्तविक तत्व का उपयोग कर सकते हैं, जैसे <div> , या - ng-container सहारा लें, जो हमें HTML- कोड के अतिरिक्त स्तर के बिना करने की अनुमति देता है। यह कंटेनर तत्व की घोषणा की तरह दिखता है जिसमें हम "आलसी" घटक डालते हैं:

 <mat-toolbar color="primary">  <span>City quiz</span> </mat-toolbar> <button *ngIf="!quizStarted"        mat-raised-button color="primary"        class="start-quiz-button"        (click)="startQuiz()">Start quiz</button> <ng-container #quizContainer class="quiz-card-container"></ng-container> 

घटक में आपको कंटेनर तक पहुंचने की आवश्यकता है। ऐसा करने के लिए, हम @ViewChild एनोटेशन का उपयोग करते हैं और हमें बताते हैं कि हम ViewContainerRef पढ़ना चाहते ViewContainerRef ।

ध्यान दें कि कोणीय 9 में, @ViewChild एनोटेशन में static संपत्ति डिफ़ॉल्ट रूप से false सेट है:

 @ViewChild('quizContainer', {read: ViewContainerRef}) quizContainer: ViewContainerRef; 

अब हमारे पास एक कंटेनर है जिसमें हम "आलसी" घटक जोड़ना चाहते हैं। अगला, हमें ComponentFactoryResolver और Injector आवश्यकता है। निर्भरता इंजेक्शन की पद्धति का सहारा लेकर दोनों का अधिग्रहण किया जा सकता है।

ComponentFactoryResolver निकाय एक सरल रजिस्ट्री है जो घटकों के बीच संबंध स्थापित करता है और स्वचालित रूप से उत्पन्न ComponentFactory कक्षाएं जो घटकों को त्वरित करने के लिए उपयोग की जा सकती हैं:

 constructor(private quizservice: QuizService,            private cfr: ComponentFactoryResolver,            private injector: Injector) { } 

अब हमारे पास वह सब कुछ है जो लक्ष्य को प्राप्त करने के लिए आवश्यक है। startQuiz पद्धति की सामग्री पर काम करते हैं और घटक के आलसी लोडिंग को व्यवस्थित करते हैं:

 const {QuizCardComponent} = await import('./quiz-card/quiz-card.component'); const quizCardFactory = this.cfr.resolveComponentFactory(QuizCardComponent); const {instance} = this.quizContainer.createComponent(quizCardFactory, null, this.injector); instance.question = this.quizservice.getNextQuestion(); 

हम QuizCardComponent की आलसी लोडिंग को व्यवस्थित करने के लिए import ECMAScript कमांड का उपयोग कर सकते हैं। एक आयात अभिव्यक्ति एक वादा लौटाती है। आप इसके साथ काम कर सकते हैं या तो async/await निर्माण का उपयोग कर सकते हैं या .then हैंडलर का उपयोग कर सकते .then । वादे को हल करने के बाद, हम घटक का एक उदाहरण बनाने के लिए विनाशकारी उपयोग करते हैं।

पिछड़े अनुकूलता प्रदान करने के लिए इन दिनों, आपको ComponentFactory का उपयोग करना चाहिए। भविष्य में, संबंधित पंक्ति की आवश्यकता नहीं है, क्योंकि हम सीधे घटक के साथ काम करने में सक्षम होंगे।

ComponentFactory कारखाना हमें ComponentFactory रीफ देता है। हम कंटेनर के createComponent विधि के लिए createComponent और Injector पास करते हैं।

createComponent विधि ComponentRef जहाँ सम्‍मिलित है, घटक ComponentRef देता है। हम घटक @Input पास करने के लिए instance का उपयोग करते @Input ।

भविष्य में, यह सब संभवत: कोणीय renderComponent विधि का उपयोग करके किया जा सकता है। यह विधि अभी भी प्रायोगिक है। हालांकि, यह बहुत संभावना है कि यह एक नियमित कोणीय विधि में बदल जाएगा। इस विषय पर सहायक सामग्री यहां दी गई है ।

यह आपको एक घटक के आलसी लोडिंग को व्यवस्थित करने की आवश्यकता है।


आलसी घटक लोड हो रहा है

Start quiz बटन दबाए जाने के बाद, घटक का आलसी लोडिंग शुरू होता है। यदि आप डेवलपर टूल का Network टैब खोलते हैं, तो आप quiz-card-quiz-card-component.js फ़ाइल द्वारा दर्शाए गए कोड के टुकड़े को लोड करने की प्रक्रिया को देख सकते हैं। घटक को लोड करने और प्रसंस्करण करने के बाद, उपयोगकर्ता एक प्रश्न कार्ड देखता है।

घटक विस्तार

वर्तमान में हम QuizCardComponent घटक लोड कर रहे हैं। यह बहुत अच्छा है। लेकिन हमारे आवेदन अभी तक विशेष रूप से कार्यात्मक नहीं है।

आइए इसे कोणीय सामग्री की अतिरिक्त विशेषताओं और घटकों को जोड़कर इसे ठीक करें:

 <mat-card class="quiz-card">  <mat-card-header>    <div mat-card-avatar class="quiz-header-image"></div>    <mat-card-title>Which city is this?</mat-card-title>    <mat-card-subtitle>Click on the correct answer below</mat-card-subtitle>  </mat-card-header>  <img class="image" mat-card-image [src]="'assets/' + question.image" alt="Photo of a Shiba Inu">  <mat-card-actions class="answer-section">    <button [disabled]="answeredCorrectly !== undefined" *ngFor="let selection of question.possibleSelections"            mat-stroked-button color="primary"            [ngClass]="{              'correct': answeredCorrectly && selection === question.correctAnswer,              'wrong': answeredCorrectly === false && selection === question.correctAnswer             }"            (click)="answer(selection)">      {{selection}}    </button>  </mat-card-actions> </mat-card> 

हमने घटक में कुछ सुंदर सामग्री घटकों को शामिल किया है। संबंधित मॉड्यूल के बारे में क्या?

उन्हें निश्चित रूप से AppModule जोड़ा जा सकता है। लेकिन इसका मतलब है कि ये मॉड्यूल "लालची" मोड में लोड होंगे। और यह एक अच्छा विचार नहीं है। इसके अलावा, परियोजना की असेंबली विफल हो जाएगी, निम्न संदेश के साथ:

 ERROR in src/app/quiz-card/quiz-card.component.html:9:1 - error TS-998001: 'mat-card' is not a known element: 1. If 'mat-card' is an Angular component, then verify that it is part of this module. 2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 

क्या करें? जैसा कि आप शायद पहले से ही समझ चुके हैं, यह समस्या पूरी तरह से हल है। यह मॉड्यूल का उपयोग करके किया जा सकता है।

लेकिन इस बार हम उन्हें पहले की तुलना में थोड़ा अलग तरीके से इस्तेमाल करेंगे। हम QuizCardComponent ( quizcard.component.ts फ़ाइल में) के समान फ़ाइल में एक छोटा मॉड्यूल quizcard.component.ts :

 @NgModule({  declarations: [QuizCardComponent],  imports: [CommonModule, MatCardModule, MatButtonModule] }) class QuizCardModule { } 

ध्यान दें कि कोई export विवरण नहीं है।

यह मॉड्यूल विनिर्देश हमारे घटक के लिए विशेष रूप से है, जो आलसी मोड में लोड है। परिणामस्वरूप, मॉड्यूल में घोषित एकमात्र घटक QuizCardComponent होगा। import अनुभाग केवल उन घटकों को आयात करता है जिनकी हमारे घटक को आवश्यकता होती है।

हम नए मॉड्यूल को निर्यात नहीं करते हैं ताकि लालची मोड में लोड किए गए मॉड्यूल इसे आयात न कर सकें।

एप्लिकेशन को पुनरारंभ करें और देखें कि जब आप Start quiz पर क्लिक करते हैं तो यह कैसा व्यवहार करता है।


संशोधित अनुप्रयोग विश्लेषण

अद्भुत! QuizCardComponent घटक QuizCardComponent आलसी मोड में लोड किया गया है और ViewContainer जोड़ा गया है। सभी आवश्यक निर्भरताएं इसके साथ भरी हुई हैं।

हम संबंधित npm मॉड्यूल द्वारा प्रदान किए गए webpack-bundle-analyze टूल का उपयोग करके एप्लिकेशन बंडल का विश्लेषण करेंगे। यह आपको उन फ़ाइलों की सामग्री की कल्पना करने की अनुमति देता है जो वेबपैक उत्पन्न करता है और परिणामी योजना की जांच करता है।


आवेदन बंडल विश्लेषण

आवेदन के मुख्य बंडल का आकार लगभग 260 Kb है। अगर हमने इसके साथ QuizCardComponent घटक डाउनलोड किया है, तो डाउनलोड किए गए डेटा का आकार लगभग 270 Kb होगा। यह पता चला है कि हम मुख्य बंडल के आकार को 10 Kb तक कम करने में सक्षम थे, केवल एक घटक को आलसी मोड में लोड कर रहे थे। अच्छा परिणाम!

असेंबली के बाद QuizCardComponent का कोड एक अलग फ़ाइल में जाता है। यदि आप इस फ़ाइल की सामग्री का विश्लेषण करते हैं, तो यह पता चलता है कि केवल QuizCardComponent कोड नहीं है, बल्कि इस घटक में प्रयुक्त सामग्री मॉड्यूल भी है।

हालांकि QuizCardComponent MatButtonModule और QuizCardComponent का उपयोग करता है, केवल MatCardModule तैयार कोड MatCardModule । इसका कारण यह है कि हम MatButtonModule भी MatButtonModule उपयोग MatButtonModule में करते हैं, Start quiz बटन को प्रदर्शित करते हैं। नतीजतन, संबंधित कोड बंडल के एक और टुकड़े में गिर जाता है।

अब हमने QuizCardComponent के आलसी लोडिंग का QuizCardComponent । यह घटक एक कार्ड प्रदर्शित करता है, जिसे सामग्री की शैली में डिज़ाइन किया गया है, जिसमें एक चित्र, एक प्रश्न और उत्तर विकल्पों के साथ बटन हैं। यदि आप इनमें से किसी एक बटन पर क्लिक करते हैं तो अब क्या होता है?

बटन, इस पर निर्भर करता है कि इसमें सही या गलत उत्तर है, दबाने पर हरा या लाल हो जाता है। और क्या चल रहा है? कोई बात नहीं। और हमें यह चाहिए कि एक प्रश्न का उत्तर देने के बाद, दूसरे प्रश्न का एक कार्ड प्रदर्शित किया जाएगा। इसे ठीक करें।

इवेंट हैंडलिंग

जब आप आलसी मोड में लोड किए गए घटकों की घटनाओं के जवाब के लिए तंत्र स्थापित नहीं करते हैं, तो इस कारण से जब आप उत्तर बटन पर क्लिक करते हैं तो एप्लिकेशन एक नया प्रश्न कार्ड नहीं दिखाता है। हम पहले से ही जानते हैं कि QuizCardComponent घटक QuizCardComponent का उपयोग करके घटनाओं को उत्पन्न करता है। यदि आप EventEmitter वर्ग की परिभाषा को EventEmitter , तो आप यह EventEmitter सकते हैं कि यह Subject वंशज है:

 export declare class EventEmitter<T extends any> extends Subject<T> 

इसका अर्थ है कि EventEmitter में एक subscribe विधि है, जो आपको होने वाली घटनाओं के लिए सिस्टम की प्रतिक्रिया को कॉन्फ़िगर करने की अनुमति देती है:

 instance.questionAnswered.pipe(    takeUntil(instance.destroy$) ).subscribe(() => this.showNewQuestion()); 

यहाँ हम questionAnswered धारा की सदस्यता लेते हैं और showNextQuestion विधि को कहते हैं, जो कि lazyLoadQuizCard तर्क को निष्पादित lazyLoadQuizCard है:

 async showNewQuestion() {  this.lazyLoadQuizCard(); } 

घटक के नष्ट होने के बाद निष्पादित सदस्यता को खाली करने के लिए takeUntil(instance.destroy$) . takeUntil(instance.destroy$) निर्माण की आवश्यकता होती है। यदि ngOnDestroy घटक जीवन चक्र का ngOnDestroy हुक कहा जाता है, तो destroy$ करें next और complete साथ कहा जाता है।

चूंकि घटक पहले से ही लोड है, सिस्टम अतिरिक्त HTTP अनुरोध नहीं करता है। हम कोड टुकड़ा की सामग्री का उपयोग करते हैं जो हमारे पास पहले से है, एक नया घटक बनाएं और इसे कंटेनर में डालें।

घटक जीवन चक्र हुक

आलसी लोडिंग तकनीक का उपयोग करके QuizCardComponent घटक के साथ काम करते समय लगभग सभी घटक जीवन चक्र हुक स्वचालित रूप से कहलाते हैं। लेकिन एक हुक पर्याप्त नहीं है। क्या आप समझ सकते हैं कि कौन सा


घटक जीवन चक्र हुक

यह ngOnChanges सबसे महत्वपूर्ण हुक है। चूंकि हम खुद घटक उदाहरण के इनपुट गुणों को अपडेट करते हैं, इसलिए हम ngOnChanges जीवनचक्र हुक को कॉल करने के लिए भी जिम्मेदार हैं।

ngOnChanges उदाहरण के ngOnChanges हुक को कॉल करने के लिए, आपको स्वयं एक SimpleChange ऑब्जेक्ट बनाने की आवश्यकता है:

 (instance as any).ngOnChanges({    question: new SimpleChange(null, instance.question, true) }); 

हम मैन्युअल रूप से ngOnChanges घटक उदाहरण कहते हैं और इसे एक SimpleChange ऑब्जेक्ट पास करते हैं। यह ऑब्जेक्ट इंगित करता है कि यह परिवर्तन पहला है, पिछला मान null , और वर्तमान मान एक प्रश्न है।

अद्भुत! हमने तीसरे पक्ष के मॉड्यूल के साथ घटक को लोड किया, यह उत्पन्न होने वाली घटनाओं का जवाब दिया और घटक जीवन चक्र के आवश्यक हुक की कॉल स्थापित की।

यहाँ हम जिस प्रोजेक्ट पर काम कर रहे थे, उसके लिए सोर्स कोड यहाँ दिया गया है।

परिणाम

आलसी कंपोनेंट लोडिंग से Angular Developers को एप्लिकेशन परफॉर्मेंस को ऑप्टिमाइज़ करने के बेहतरीन अवसर मिलते हैं। उनके निपटान में आलसी मोड में लोड की गई सामग्री की संरचना को बहुत ठीक करने के लिए उपकरण हैं। पहले, जब आलसी मोड में केवल मार्गों को लोड करना संभव था, तो हमारे पास इतनी सटीकता नहीं थी।

दुर्भाग्य से, घटक में तीसरे पक्ष के मॉड्यूल का उपयोग करते समय, हमें मॉड्यूल का भी ध्यान रखना होगा। हालांकि, यह याद रखने योग्य है कि भविष्य में यह बदल सकता है।

आइवी इंजन ने स्थानीयता की अवधारणा पेश की, जिसके लिए घटक स्वतंत्र रूप से मौजूद हो सकते हैं। यह परिवर्तन कोणीय के भविष्य की नींव है।

प्रिय पाठकों! क्या आप अपने कोणीय परियोजनाओं में आलसी घटक लोडिंग तकनीक का उपयोग करने की योजना बना रहे हैं?