अपने कोणीय पुस्तकालयों को कई भागों में तोड़कर एसपीए प्रदर्शन में सुधार करें

नमस्कार, हेब्र! मैं आपको केविन क्रेउज़र द्वारा "अंगुली के पुस्तकालयों को कई टुकड़ों में विभाजित करके लेख में सुधार" एसपीए प्रदर्शन का अनुवाद पेश करता हूं।

कोणीय एक महान ढांचा है। हम सभी उसे प्यार करते हैं <3।

चीजों में से एक जो एक ही समय में कोणीय को सफल और सुंदर बनाता है वह व्यापक समुदाय और मूल्य है जो इसे वहन करता है। कई बैठकें, ब्लॉग, सम्मेलन और निश्चित रूप से, कोणीय पुस्तकालय हैं।

कोणीय सीएलआई के लिए धन्यवाद, पुस्तकालयों को आज बनाना आसान है। वे कई अनुप्रयोगों के बीच कोड साझा करने के लिए महान हैं।

चूंकि उनका उपयोग कई स्थानों पर किया जा सकता है, इसलिए प्रदर्शन एक महत्वपूर्ण पहलू है। खराब प्रदर्शन वाले पुस्तकालय में कई अनुप्रयोग धीमा हो सकते हैं!

फ्रंटेंड में विभिन्न प्रकार के प्रदर्शन हैं। रनटाइम - प्रदर्शन और प्रारंभिक भार। इस लेख में, हम प्रारंभिक भार पर ध्यान केंद्रित करेंगे।

एक बड़े उद्यम के लिए विभिन्न पुस्तकालयों और उपयोगकर्ता इंटरफ़ेस फ्रेमवर्क प्रदान करने और समर्थन करने से, मुझे कुछ स्पष्ट नुकसान और उन्हें ठीक करने के तरीके नहीं मिले। मुझे लगता है कि यह उनमें से कुछ को साझा करने के लायक है।

"यह इतनी सरल लाइब्रेरी है। यह प्रदर्शन को प्रभावित नहीं कर सकती है, है ना?"

आइए एक सरल पुस्तकालय से शुरू करें जिसे हम कोणीय सीएलआई का उपयोग करके बनाएंगे। यदि आपने कभी भी एक कोणीय पुस्तकालय नहीं बनाया है, तो आपके लिए निम्नलिखित लेख पढ़ना उपयोगी हो सकता है:

एक बार जब हम बहुत सारे प्रोजेक्ट कार्यक्षेत्र को कॉन्फ़िगर करने के लिए सीएलआई का उपयोग करते हैं, तो हम कोड जोड़ना शुरू कर सकते हैं।

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

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

HowdyTimeComponent एक तृतीय-पक्ष पल पुस्तकालय का उपयोग कर समय प्रदर्शित करने के लिए जिम्मेदार है।

बहुत बढ़िया! हमारी हाउडी लाइब्रेरी प्रकाशन के लिए तैयार है! यह इतना सरल पुस्तकालय है; वह प्रदर्शन को प्रभावित नहीं कर पाएगी, है ना?

हॉबी लाइब्रेरी की खपत

अब हमारे पास हॉबी लाइब्रेरी है! इसका फायदा न उठाना शर्म की बात होगी। हॉबी लाइब्रेरी का उपयोग करने के लिए, हम कोणीय सीएलआई के साथ एक नया एसपीए बना रहे हैं।

ng new greeting-app 

चूंकि हम प्रदर्शन में रुचि रखते हैं, इसलिए आइए वेब -बंडल-एनालाइज़र नामक देव निर्भरता को भी स्थापित करें।

 npm i -D webpack-bundle-analyzer 

वेबपैक-बंडल-एनालाइज़र आपको एक इंटरैक्टिव, स्केलेबल ट्री मैप का उपयोग करके वेबपैक आउटपुट फ़ाइलों के आकार की कल्पना करने की अनुमति देता है।

हमारे पैकेज का विश्लेषण करने का सबसे अच्छा तरीका निम्नलिखित विश्लेषण स्क्रिप्ट को हमारे package.json में जोड़ना है।

 "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/greeting-app/stats-es2015.json" 

यदि हम इस कमांड को चलाते हैं, तो एंगुलर प्रोडक्शन बिल्ड और आउटपुट स्टैटिस्ट्स es2015.json भी करेगा, जिसे तब वेबपैक-बंडल-एलाइज़र द्वारा चुना और प्रस्तुत किया जाएगा।

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

सामान्य तौर पर, हमारे आवेदन का आकार अब 207 KB है ।

लेकिन हमने अपनी हाउडी लाइब्रेरी को अभी तक शामिल नहीं किया है! चलो आगे बढ़ो और यह करो।

 npm i howdy 

हमने हॉबी लाइब्रेरी स्थापित की क्योंकि हम एक नाम के साथ ग्रीटिंग होस्ट करना चाहते हैं। हमें समय के प्रदर्शन में कोई दिलचस्पी नहीं है। इसलिए, हम केवल HowdyNameModule मॉड्यूल का उपयोग करेंगे और HowdyTimeModule को शामिल नहीं करेंगे।

यहां यह ध्यान रखना महत्वपूर्ण है कि हम केवल HowdyNameModule का आयात करते हैं । आइए विश्लेषण विश्लेषण स्क्रिप्ट को फिर से चलाएँ।

वाह! बहुत अच्छा! हमने 207 KB से 511.15 KB तक स्विच किया। आकार दोगुना से अधिक हो गया है। क्या एक ...!

अपराधी को खोजने के लिए एक नज़र ही काफी है। पल बहुत बड़ा है! यह अपना मुख्य कार्यान्वयन कोड और सभी क्षेत्रीय सेटिंग्स लाता है।

बेशक, क्षण को अन्य पैकेजों से बदला जा सकता है, जैसे कि दिनांक- fns या पल-मिनी । लेकिन सवाल अलग है; वह वहां भी क्यों है? याद रखें कि हमने केवल HowdyNameModule का आयात किया , न कि HodwyTimeModule का । मैंने सोचा था कि जब ट्री शेकिंग होती है , तो केवल अप्रयुक्त मॉड्यूल ही हिलते हैं ? क्या चल रहा है?

पेड़ के झटकों से सब कुछ नहीं हटाया जा सकता है

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

चूंकि क्षण का उपयोग कई स्थानों पर किया जा सकता है, जैसे कि नोड जेएस बैकएंड, कोणीय एप्लिकेशन या साधारण जावास्क्रिप्ट, इसे यूएमडी में बंडल किया गया है और ईएस मॉड्यूल के रूप में नहीं।

लिंक किए गए UMD लाइब्रेरीज़ को IFFE फ़ंक्शन में लपेटा जाता है, जिसका अर्थ है कि ModuleConcatenation का उपयोग नहीं किया जा सकता। असेंबली ऑप्टिमाइज़ेशन टूल यह पता नहीं लगा सकते हैं कि इस कोड का उपयोग किया जाएगा या यदि इसके साइड इफेक्ट्स हैं या नहीं।

संक्षेप में, इस प्रकार का मॉड्यूल कोणीय को अधिक उन्नत अनुकूलन किट लॉन्च करने से रोकता है।

दुर्भाग्य से, हम यह नियंत्रित नहीं कर सकते हैं कि क्षण कैसे पूरा हो। इसका मतलब यह है कि हम पैकेज के विशाल आकार के साथ रखा है?

जीत के लिए माध्यमिक प्रवेश बिंदु

हम नियंत्रित नहीं कर सकते कि कैसे पल बनाया जाता है। लेकिन हम अपने पुस्तकालय का प्रबंधन कर सकते हैं। वास्तव में, इस तरह के परिदृश्यों को रोकने का एक तरीका है। माध्यमिक प्रवेश बिंदु!

लगभग सभी कोणीय पुस्तकालय वर्तमान में एनजी-पैकाग्रा का उपयोग करके पैक किए जाते हैं । ng-packagr आपको public-api के संयोजन में ng-package.json का उपयोग करने की अनुमति देता है, जो अंततः आपके आवेदन के लिए प्रवेश बिंदु बन जाएगा।

जैसा कि नाम का अर्थ है, अतिरिक्त प्रवेश बिंदु आपको अपने आवेदन के लिए कई प्रवेश बिंदु निर्दिष्ट करने की अनुमति देते हैं।

यह अच्छा लगता है! द्वितीयक प्रवेश बिंदु कैसे सक्रिय करें?

माध्यमिक प्रवेश बिंदु गतिशील रूप से एनजी-पैकाग्रा का उपयोग करके पता लगाया जाता है । ng-packagr पैकेज. json फ़ाइल के मुख्य फ़ोल्डर के उपनिर्देशिकाओं में package.json फ़ाइलों की तलाश करता है

कूल! चलिए निम्नलिखित फाइलों को जोड़कर हमारी हाउडी लाइब्रेरी में द्वितीयक प्रवेश बिंदुओं का लाभ उठाते हैं।

प्रत्येक मॉड्यूल के लिए, हमने index.ts , package.json और public_api.ts को जोड़ा।

• index.ts वहां है, केवल public_api को इंगित करने के लिए, जो आयात के दौरान उपयोगी है।
• public_api हमारे मॉड्यूल से सभी मॉड्यूल और घटकों का निर्यात करता है।
• package.json में विशिष्ट एनजी-पैकाग्रा कॉन्फ़िगरेशन शामिल हैं । हमारे मामले में, यह प्रविष्टि निर्दिष्ट करने के लिए पर्याप्त है।

Package.json में अन्य गुण भी हो सकते हैं, जैसे कि cssUrl , आदि। ध्यान दें कि इन गुणों का दायरा केवल वर्तमान उप-आइटम है।

यदि हम अभी विधानसभा चलाते हैं, तो हमें तीन ब्लॉक मिलते हैं। howdy.js , howdy-src-lib-name.js और howdy-src-lib-time.js ।

Howdy-src-lib-name.js में अब केवल कोड शामिल हैं HowdyNameModule , और Howdy -src-lib-time.js में अब केवल कोड शामिल हैं जो HowdyTimeModule के लिए विशिष्ट हैं।

लेकिन आइए howdy.js के एक टुकड़े को देखें ।

Howdy.js के टुकड़े में अभी भी HowdyNameComponent और HowdyTimeComponent शामिल हैं । इसका मतलब यह है कि हम अभी भी उस क्षण को प्राप्त करते हैं, भले ही हम केवल HowdyNameModule का आयात करें।

यदि हम इस दृष्टिकोण के साथ हॉवर्डटाइममॉडल से छुटकारा चाहते हैं, तो हमें गहरे आयात का उपयोग करने की आवश्यकता है। इसलिए हम howdy.js से आयात नहीं कर रहे हैं, बल्कि सीधे howdy-src-lib-time.js से आयात कर रहे हैं
क्या अनुशंसित नहीं है! गहरे आयात खतरनाक हैं और इससे हमेशा बचना चाहिए!

हम इन समस्याओं को कैसे हल कर सकते हैं? हम कैसे गारंटी दे सकते हैं कि अगर हम मानक आयात का उपयोग करते हैं तो भी HowdyTimeModule को हटा दिया जाएगा। खैर, हमें howdy.js का एक टुकड़ा बनाने के लिए एक तरीका स्थापित करने की आवश्यकता है ।

"साइनपोस्ट" का उपयोग करें

विचार यह है कि कोड को हाउडी.जेएस ब्लॉक से हटा दिया जाए और इसके बजाय इसे एक तरह के "साइनपोस्ट" "पॉइंटर" के रूप में कार्य करने की अनुमति दें जो आपको अन्य ब्लॉकों को इंगित करता है।

तो चलिए src / public_api.ts पर करीब से नज़र डालते हैं ।

 /* * Public API Surface of howdy */ export * from './lib/name/howdy-name.component'; export * from './lib/name/howdy-name.module'; export * from './lib/time/howdy-time.component'; export * from './lib/time/howdy-time.module'; 

ये लाइनें Howdy.js ब्लॉक में नाम और समय से सब कुछ शामिल करने के लिए जिम्मेदार हैं। हमें कोड को howdydy.js से निकालना होगा और इसे उन अन्य अंशों की ओर इंगित करना होगा जिनमें कार्यान्वयन है। चलो इसकी सामग्री को बदलते हैं।

 / * Public API Surface of howdy */ export * from 'howdy/src/lib/name'; export * from 'howdy/src/lib/time'; 

वास्तविक कार्यान्वयन को निर्यात करने के बजाय, हम विभिन्न भागों के सापेक्ष पथ को इंगित करते हैं। इस बदलाव के साथ, howdy.js केवल अन्य पैकेजों की ओर इशारा करता है और इसमें कोई "वास्तविक" कोड नहीं होता है।
चलो एनजी बिल्ड चलाते हैं और हमारे डिस्टल फोल्डर का विश्लेषण करते हैं।

Howdy.js अब एक "साइनपोस्ट" "पॉइंटर" के रूप में कार्य करता है जो क्रियान्वयन वाले टुकड़ों को इंगित करता है। Howdy-src-lib-name.js ब्लॉक में केवल नाम फ़ोल्डर से कोड होता है, और howdy-src-lib-time.js फ़ाइल में केवल समय फ़ोल्डर से कोड होता है।

विकल्प के साथ पैकेज को पूरा करें

आइए हमारे स्वागत आवेदन में हाउडी पैकेज को अपडेट करें और विश्लेषण स्क्रिप्ट को फिर से चलाएं।

कूल। पैकेज का आकार अब 170.94 KB है । मूल रूप से थोड़ा अधिक। आइए देखें कि अंतिम बंडल में हाउडी मॉड्यूल कैसा दिखता है।

अद्भुत! यह समायोजन हमें पैकेज के आकार को एसपीए छोटा रखने की अनुमति देता है। एसपीए को केवल वही मिलता है जो उन्हें चाहिए!

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

वास्तविक अनुभव

उपरोक्त उदाहरण बहुत सरल है।

हालांकि, मौजूदा कॉर्पोरेट प्रोजेक्ट में द्वितीयक प्रवेश बिंदुओं की शुरुआत के बाद, सब कुछ अलग होगा। आपको बहुत अधिक जटिलता से निपटना होगा, जबकि एनजी-पैकर से त्रुटि संदेश हमेशा उपयोगी नहीं होते हैं।

सबसे अधिक संभावना है, आपको अपनी tsconfig.json फ़ाइल में कुछ आयात पथ कॉन्फ़िगर करने या कुछ पथ निर्दिष्ट करने की आवश्यकता होगी। और आपके पास एक ब्लॉक से ऐसे मॉड्यूल भी आएंगे जो दूसरे ब्लॉक के मॉड्यूल का उपयोग करते हैं।

लेकिन मेरा विश्वास करो, एक बार जब आप इस बोझ को प्रबंधित करते हैं, तो यह इसके लायक है।

व्यापक कॉर्पोरेट वातावरण में, हमें पता चला कि नए बनाए गए एसपीए के पैकेज आकार में विस्फोट होने के बाद हमने कुछ पुस्तकालय प्रदान किए हैं।

कुछ बिंदु पर, यह 5 एमबी तक भी चला गया। प्रत्येक एसपीए को क्षण , @swimlane / datatable और अन्य चीजें मिलीं , जिनका उन्होंने उपयोग भी नहीं किया। हमने इस पैकेज के आकार को अनुकूलित करने पर ध्यान देना शुरू किया।

हमने तारीख-एफएनएस से पल निकाल दिए और माध्यमिक प्रवेश बिंदुओं का उपयोग करना शुरू कर दिया। वर्तमान में, हमें नए बनाए गए एसपीए के लिए 662KB मुख्य इकाई मिली है, जिसमें कई पुस्तकालय शामिल हैं। यह अभी भी बहुत कुछ है, लेकिन हम अभी तक नहीं किए गए हैं। अनुकूलन अभी पूरा नहीं हुआ है - हम पैकेट के आकार को और भी कम कर सकते हैं।

यह देखना बहुत अच्छा है कि हम कहाँ हैं और हम कहाँ से आए हैं।

हालांकि, इस तथ्य के बावजूद कि ऊपर के उदाहरण में अतिरिक्त प्रवेश बिंदुओं का उपयोग करना काफी आसान है, उन्हें एक अधिक महत्वपूर्ण परियोजना में कल्पना करना काफी मुश्किल हो सकता है।

निष्कर्ष

जब यह पैकेज आकार को अनुकूलित करने की बात आती है तो कोणीय एक अद्भुत काम करता है। हालांकि अनुकूलन के लिए विधानसभा चरण बहुत जटिल हैं, वे पेड़ को हिला नहीं सकते हैं।

ESModules के अलावा अन्य प्रारूपों में पैक किए गए मॉड्यूल को पेड़ से नहीं हटाया जा सकता है।

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

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