कोणीय अनुप्रयोगों का अनुकूलन

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



सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, कोणीय-अनुप्रयोगों के अनुकूलन के छह क्षेत्रों को प्रकट करेगा।

1. आलसी लोडिंग और मुख्य बंडल का अनुकूलन

यदि एप्लिकेशन के उत्पादन संस्करण को तैयार करते समय आलसी लोडिंग का उपयोग नहीं किया जाता है, तो सबसे अधिक संभावना है कि dist फोल्डर में आपको निम्नलिखित फाइलें दिखाई देंगी।

 polyfills.js scripts.js runtime.js styles.css main.js 

polyfills.js फ़ाइल polyfills.js यह सुनिश्चित करने की अनुमति देती है कि नवीनतम वेब प्रौद्योगिकी सुविधाओं का उपयोग करके लिखा गया एप्लिकेशन विभिन्न ब्राउज़रों के साथ संगत है।

script.js फ़ाइल में angular.json . angular.json फ़ाइल के scripts अनुभाग में वर्णित scripts । इस तरह के अनुभाग का एक सरल उदाहरण यहां दिया गया है।

 "scripts": [  "myScript.js", ] 

runtime.js फ़ाइल वेबपैक लोडर है। इसमें अन्य फ़ाइलों को डाउनलोड करने के लिए आवश्यक वेबपैक टूल हैं।

angular.json फ़ाइल में angular.json . angular.json फ़ाइल के styles अनुभाग में घोषित styles । यहाँ इस खंड का एक उदाहरण है।

 "styles": [ "src/styles.css", "src/my-custom.css" ], 

main.js फ़ाइल घटकों (TS, HTML और CSS कोड), पाइपलाइनों, निर्देशों, सेवाओं और आयातित मॉड्यूल (तृतीय-पक्ष मॉड्यूल सहित) सहित सभी एप्लिकेशन कोड को संग्रहीत करता है।

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

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

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

app.component घटक बेहद सरल है। यह दो बटन प्रदर्शित करता है, जिनमें से एक को दूसरे. app.component स्विच करने के लिए जिम्मेदार है, और दूसरा वापस app.component ओर जाता है।


घटक ऐप

Second घटक टेम्पलेट में लगभग 1 एमबी की मात्रा के साथ पाठ का एक बड़ा टुकड़ा शामिल है।


दूसरा घटक

चूंकि आलसी लोडिंग तकनीक यहां लागू नहीं होती है, हमारे आवेदन में एक बड़ी main.js फ़ाइल होगी, जिसमें कोड app.component और second.component . second.component ।

यदि आप Chrome डेवलपर टूल खोलते हैं और नेटवर्क टैब को देखते हैं, तो आप main.js फ़ाइल के आकार का अनुमान लगा सकते हैं। अर्थात्, यह 1.3 एमबी है।


Chrome डेवलपर टूल के साथ फ़ाइल आकार का विश्लेषण करना

यहां समस्या यह है कि हमारे प्रोजेक्ट के साथ काम करते समय अधिकांश समय, उपयोगकर्ता अपने मुख्य पृष्ठ पर होगा, न कि किसी अन्य पेज पर, इसलिए सभी कोड को एक फ़ाइल के रूप में डाउनलोड करना एक अच्छा विचार नहीं है। दूसरे घटक का कोड एक अलग मॉड्यूल में निकाला जा सकता है, जिसे केवल तभी लोड किया जाएगा जब उपयोगकर्ता संबंधित पृष्ठ पर जाएगा। यह main.js फ़ाइल में एक महत्वपूर्ण कमी का अनुवाद करता है, जो साइट के मुख्य पृष्ठ पर बहुत जल्दी पहला लोड देता है।

4.386205799sfghe4.js लोडिंग तकनीक का उपयोग करते समय, प्रोजेक्ट बिल्ड प्रक्रिया को पूरा करने के बाद, 4.386205799sfghe4.js जैसी फ़ाइल बनाई जाएगी। यह वह जगह है जहाँ कोड संग्रहीत किया जाएगा जो लोड नहीं करेगा जब आप पहली बार साइट लोड करते हैं। नतीजतन, यदि आप अब साइट खोलते हैं और इसका विश्लेषण करते हैं, तो यह पता चलता है कि main.js का आकार केवल 266 Kb है।


डाउनसाइज़िंग main.js

1 एमबी की एक बड़ी अतिरिक्त फ़ाइल संबंधित पेज पर जाने के बाद ही डाउनलोड की जाती है।


अतिरिक्त फ़ाइल डाउनलोड करें

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

इसका उपयोग करते हुए, हम फ्रेमवर्क को बता सकते हैं कि, मुख्य मॉड्यूल ( main.js फ़ाइल) लोड होने और संसाधित होने के बाद, यह पृष्ठभूमि में इन मॉड्यूल को main.js है। परिणामस्वरूप, जब उपयोगकर्ता उस पृष्ठ पर जाता है जिसे पहले एक बड़ी फ़ाइल प्रदर्शित करने की आवश्यकता होती है, तो यह पता चलता है कि फ़ाइल पहले ही डाउनलोड हो चुकी है। यहां एक नमूना कोड है जो सभी मॉड्यूल को लोड करता है।

 import { PreloadAllModules, RouterModule } from '@angular/router'; RouterModule.forRoot( [ {   path: 'second',   loadChildren: './second/second.module#SecondModule' } ], {preloadingStrategy: PreloadAllModules}) 

कोणीय अनुप्रयोगों को अनुकूलित करते समय आलसी लोडिंग को लागू करना, प्रोजेक्ट को यथासंभव अधिक से अधिक मॉड्यूल में तोड़ने का प्रयास करने की सिफारिश की जाती है। इसके अलावा, आपको उन्हें प्रीलोड करने पर ध्यान देने की आवश्यकता है। इससे main.js फ़ाइल का छोटा होना संभव है, जिसका अर्थ है कि प्रोजेक्ट का मुख्य पृष्ठ तेज़ी से लोड होना और प्रदर्शित होना।

2. बंडल विश्लेषण Webpack बंडल विश्लेषक का उपयोग करना

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

 npm install --save-dev webpack-bundle-analyzer 

फिर हम निम्नलिखित पाठ को जोड़कर package.json फ़ाइल के script अनुभाग को संशोधित करते हैं।

 "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json" 

कृपया ध्यान दें कि आपके प्रोजेक्ट में dist/stats.json फाइल एड्रेस अलग हो सकता है। उदाहरण के लिए, यदि आपने dist/browser फोल्डर में बंडल फाइल्स समाप्त कर ली हैं, तो आपको उपरोक्त लाइन को इस तरह से फिर से लिखना होगा: dist/browser/stats.json ।

अब एनालाइजर चलाएं।

 npm run bundle-report 

इस कमांड को निष्पादित करने के बाद, एप्लिकेशन की उत्पादन विधानसभा उत्पन्न होगी और प्रत्येक बंडल के लिए आंकड़े प्रदर्शित किए जाएंगे। यहाँ इस डेटा को देखने का परिणाम कैसा दिखता है।


वेबपैक बंडल एनालाइज़र का उपयोग करके प्रोजेक्ट विश्लेषण

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

3. साझा करने के लिए कई छोटे मॉड्यूल बनाना

अनुप्रयोग के विभिन्न भागों को साझा करने वाले मॉड्यूल DRY सिद्धांत के कार्यान्वयन में योगदान करते हैं, लेकिन कभी-कभी ऐसे मॉड्यूल भी, जैसे अनुप्रयोग विकसित होता है, अधिक से अधिक हो जाता है। उदाहरण के लिए, यदि हमारे पास एक निश्चित SharedModule मॉड्यूल है जिसमें कई अन्य मॉड्यूल, घटक, पाइपलाइन शामिल हैं, तो ऐसे मॉड्यूल को app.module में आयात करने से main.js बंडल का आकार बढ़ जाएगा, क्योंकि इस तरह के कदम से न केवल मुख्य main.js के आयात की आवश्यकता होगी, लेकिन यह भी कि सभी SharedModule । इस स्थिति से बचने के लिए, आप मुख्य मॉड्यूल और इसके घटकों के बीच साझा करने के लिए एक और मॉड्यूल, HomeSharedModule जैसा कुछ बना सकते हैं।

साझा करने के उद्देश्य से कई मॉड्यूलों की परियोजना में उपस्थिति केवल एक ऐसे मॉड्यूल की उपस्थिति से बेहतर है, जिसमें आमतौर पर बड़े आकार होते हैं।

4. उन छवियों के लिए आलसी लोडिंग तकनीक का उपयोग करना जो पृष्ठ पर दिखाई नहीं देते हैं

जब आप पहली बार एप्लिकेशन के मुख्य पृष्ठ को लोड करते हैं, तो यह पता चल सकता है कि इसमें ऐसी छवियां हैं जो उपयोगकर्ता को दिखाई नहीं दे रही हैं (वे देखने के क्षेत्र के बाहर हैं)। उन्हें देखने के लिए, आपको पृष्ठ को स्क्रॉल करना होगा। लेकिन पेज लोड होने पर ये अदृश्य चित्र लोड होते हैं। यदि उनमें से बहुत सारे हैं, तो यह पृष्ठ लोडिंग गति को प्रभावित करेगा। इस समस्या से निपटने के लिए, आप आलसी लोडिंग तकनीक को छवियों पर लागू कर सकते हैं, उन्हें केवल तभी लोड कर सकते हैं जब उपयोगकर्ता उन तक पहुँचता है। एक उपयोगी जेएस उपकरण है, इंटरसेक्शन ऑब्जर्वर , जो आलसी छवि लोडिंग को लागू करना आसान बनाता है। इसके अलावा, पुन: उपयोग करने के लिए, इसके आधार पर आप एक उपयुक्त निर्देश बना सकते हैं। इसके बारे में विवरण यहां पाया जा सकता है ।

5. लंबी सूचियों के लिए वर्चुअल स्क्रॉलिंग का उपयोग करना

एंगुलर के सातवें संस्करण में वर्चुअल स्क्रॉलिंग का उपयोग करने की क्षमता है। यह तकनीक तत्वों को DOM में लोड करती है और उपयोगकर्ता को दिखाई देने वाली सूची के आधार पर उन्हें उतार देती है। यह उन अनुप्रयोगों के काम को बहुत तेज करता है जो लंबी सूचियों का उपयोग करते हैं।


केवल दृश्य सूची आइटम पृष्ठ पर प्रदर्शित किए जाते हैं।

एफओआईटी रणनीति के बजाय फोंट के साथ काम करने के लिए रणनीति रणनीति का उपयोग करना

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

1. ब्राउज़र फ़ॉन्ट डाउनलोड करता है, इसे संसाधित करता है, और उसके बाद ही पाठ प्रदर्शित करता है। जब तक फ़ॉन्ट उपयोग के लिए तैयार नहीं हो जाता, तब तक इस फ़ॉन्ट में टाइप किया गया पाठ अदृश्य रहेगा। इसे एफओआईटी (अदृश्य पाठ का फ्लैश) कहा जाता है।
2. बाहरी फ़ॉन्ट लोड करते समय ब्राउज़र शुरू में मानक फ़ॉन्ट का उपयोग करके पाठ प्रदर्शित करता है। जब यह फ़ॉन्ट उपयोग के लिए तैयार हो जाता है, तो मानक फ़ॉन्ट इस विशेष फ़ॉन्ट में बदल जाता है। परिणामस्वरूप, यह पता चलता है कि पृष्ठ पर पाठ एक मानक फ़ॉन्ट में प्रदर्शित किया जाएगा जब तक कि एक विशेष फ़ॉन्ट लोड न हो, जिसके बाद पाठ फिर से प्रदर्शित किया जाएगा, लेकिन एक नए फ़ॉन्ट के साथ। इसे FOUT (अस्थिर पाठ का फ्लैश) कहा जाता है।

अधिकांश ब्राउज़र एफओआईटी रणनीति का उपयोग करते हुए गैर-मानक फोंट का उपयोग करते हैं; फ्यूज रणनीति का उपयोग केवल इंटरनेट एक्सप्लोरर में किया जाता है। एफओआईटी के बजाय फ़्यूज़ का उपयोग करने के लिए, आप font-display डिस्क्रिप्टर का उपयोग @font-face लिए कर सकते हैं, और ब्राउज़र को बता सकते हैं कि क्या हम चाहते हैं कि टेक्स्ट पहले एक मानक फ़ॉन्ट में प्रदर्शित हो, और फिर हमारा, या हम पाठ अदर्शन की एक निश्चित अवधि से संतुष्ट होंगे । यदि आप फोंट के विषय में रुचि रखते हैं - इस सामग्री पर एक नज़र डालें। विशेष रूप से, यहां आप एफओआईटी या फ्यूज रणनीतियों की पसंद के बारे में फोंट और सिफारिशों की सुविधाओं के बारे में जानकारी पा सकते हैं।

परिणाम

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

प्रिय पाठकों! कोणीय अनुप्रयोगों को अनुकूलित करने के लिए आप किन तरीकों का उपयोग करते हैं?