यह पक्का करने के लिए कि आपका ऐप्लिकेशन तेज़ी से काम करे, अपने बंडल के साइज़ पर नज़र रखें.
किसी Angular ऐप्लिकेशन को ऑप्टिमाइज़ करना अहम है. हालांकि, यह कैसे पक्का किया जा सकता है कि इसकी परफ़ॉर्मेंस समय के साथ वापस न आए? इसके लिए, हम परफ़ॉर्मेंस मेट्रिक का इस्तेमाल करते हैं और कोड में होने वाले हर बदलाव पर उनकी निगरानी करते हैं!
एक महत्वपूर्ण मेट्रिक आपके ऐप्लिकेशन के साथ शिप किए गए JavaScript का आकार है. परफ़ॉर्मेंस बजट की शुरुआत करके, जिसे हर बिल्ड या पुल के अनुरोध पर मॉनिटर किया जाता है. इससे यह पक्का किया जा सकता है कि आपके ऑप्टिमाइज़ेशन समय के साथ बने रहें.
परफ़ॉर्मेंस बजट का हिसाब लगाएं
इस ऑनलाइन बजट कैलकुलेटर का इस्तेमाल करके, यह अनुमान लगाया जा सकता है कि आपके ऐप्लिकेशन में कितना JavaScript लोड हो सकता है. यह इस बात पर निर्भर करता है कि आपको इंटरैक्टिव कैंपेन में कितना समय लगा है.
एंगुलर सीएलआई में परफ़ॉर्मेंस बजट कॉन्फ़िगर करना
टारगेट JavaScript बजट बनाने के बाद, ऐंगुलर कमांड लाइन इंटरफ़ेस (सीएलआई) का इस्तेमाल करके उसे लागू किया जा सकता है. यह कैसे काम करता है, यह जानने के लिए GitHub पर यह सैंपल ऐप्लिकेशन देखें.
आपको दिखेगा कि angular.json में यह बजट कॉन्फ़िगर किया गया है:
"budgets": [{
"type": "bundle",
"name": "main",
"maximumWarning": "170kb",
"maximumError": "250kb"
}]
जो जानकारी दी जा रही है, उसकी खास जानकारी यहां दी गई है:
mainनाम के JavaScript बंडल के लिए एक बजट तय होता है.- अगर
mainबंडल का साइज़ 170 केबी से ज़्यादा हो, तो ऐप्लिकेशन बनाते समय Angular CLI, कंसोल में एक चेतावनी दिखाएगा. - अगर
mainबंडल 250 केबी से बड़ा हो जाता है, तो बिल्ड फ़ेल हो जाएगा.
अब ng build --prod चलाकर ऐप्लिकेशन बनाने की कोशिश करें.
आपको कंसोल में यह गड़बड़ी दिखेगी:
बिल्ड की गड़बड़ी को ठीक करने के लिए, app.component.ts पर एक नज़र डालें. इसमें rxjs/internal/operators से इंपोर्ट किया गया डेटा भी शामिल है. यह एक निजी इंपोर्ट है, जिसका इस्तेमाल rxjs के उपभोक्ताओं के लिए नहीं करना चाहिए. इससे बंडल का साइज़ काफ़ी बढ़ जाता है! सही इंपोर्ट rxjs/operators पर अपडेट करने के बाद बिल्ड को फिर से चलाने पर, आपको दिखेगा कि यह बजट जांच के बाद सही पाया गया है.
ध्यान दें कि Angular CLI में डिफ़रेंशियल लोडिंग डिफ़ॉल्ट रूप से चालू होती है. इसलिए, ng build कमांड ऐप्लिकेशन के दो बिल्ड बनाता है:
- ECMAScript 2015 के साथ काम करने वाले ब्राउज़र के लिए एक बिल्ड. इस बिल्ड में कम पॉलीफ़िल और ज़्यादा आधुनिक JavaScript सिंटैक्स शामिल है. वह सिंटैक्स ज़्यादा एक्सप्रेसिव होता है. इससे बंडल छोटे हो जाते हैं.
- पुराने ब्राउज़र के लिए एक बिल्ड, जिसमें ECMAScript 2015 की सुविधा नहीं है. पुराने सिंटैक्स में ज़्यादा जानकारी नहीं होती और ज़्यादा पॉलीफ़िल की ज़रूरत पड़ती है. इस वजह से, बंडल बड़े हो जाते हैं.
नमूना ऐप्लिकेशन की index.html फ़ाइल दोनों बिल्ड का संदर्भ देती है, ताकि आधुनिक ब्राउज़र छोटे ECMAScript 2015 बिल्ड का फ़ायदा उठा सकें और पुराने ब्राउज़र ECMAScript 5 बिल्ड पर वापस जा सकें.
इंटिग्रेशन को लगातार जारी रखने के लिए अपना बजट लागू करें
लगातार इंटिग्रेशन (सीआई) की मदद से, यह आपके ऐप्लिकेशन के बजट पर समय के साथ नज़र रखने का एक आसान तरीका है. अच्छी बात यह है कि इसे सेट अप करने का सबसे तेज़ तरीका यह है कि आप अपने ऐप्लिकेशन को Angular CLI के साथ बनाएं—इसके लिए आपको कुछ भी करने की ज़रूरत नहीं है! जब भी JavaScript बंडल बजट से ज़्यादा हो जाएगा, तो प्रोसेस कोड 1 के साथ बंद हो जाएगी और बिल्ड काम नहीं करेगा.
अगर आप चाहें, तो bundlesize और Lighthouse का इस्तेमाल करके भी परफ़ॉर्मेंस बजट लागू करें. एंगुलर सीएलआई और लाइटहाउस में परफ़ॉर्मेंस बजट के बीच मुख्य अंतर, जांच पूरी होने पर होता है. Angular सीएलआई, बिल्ड के समय जांच करता है. साथ ही, यह प्रोडक्शन ऐसेट को देखकर और उनके साइज़ की पुष्टि करता है. हालांकि, लाइटहाउस ऐप्लिकेशन का डिप्लॉय किया गया वर्शन खोलता है और एसेट का साइज़ मापता है. दोनों ही तरीकों के अपने फ़ायदे और नुकसान हैं. Angular CLI की जांच का असर कम है, लेकिन यह ज़्यादा तेज़ है, क्योंकि इसमें एक ही डिस्क लुकअप है. वहीं दूसरी ओर, LightWallet का लाइटहाउस डेटा डाइनैमिक रूप से लोड होने वाले संसाधनों की मदद से, बहुत सटीक तरीके से जांच कर सकता है. हालांकि, इसके लिए हर बार ऐप्लिकेशन को डिप्लॉय करना और खोलना होगा.
बंडलसाइज़, Angular CLI के बजट जांच से काफ़ी मिलता-जुलता है. हालांकि, इसमें मुख्य अंतर यह है कि बंडलसाइज़, जांच के नतीजों को सीधे GitHub के यूज़र इंटरफ़ेस में दिखा सकता है.
नतीजा
Angular CLI का इस्तेमाल करके परफ़ॉर्मेंस बजट तय करें, ताकि यह पक्का किया जा सके कि आपके Angular ऐप्लिकेशन की परफ़ॉर्मेंस समय के साथ कम न हो:
- बजट कैलकुलेटर का इस्तेमाल करके या अपने संगठन के काम करने के तरीके का पालन करके, संसाधन के साइज़ के लिए एक बेसलाइन सेट करें.
projects.[PROJECT-NAME].architect.build.configurations.production.budgetsके तहतangular.jsonमें साइज़ के बजट कॉन्फ़िगर करें- Angular CLI की मदद से, हर बिल्ड पर बजट अपने-आप लागू हो जाएंगे.
- लगातार इंटिग्रेशन की प्रोसेस के तहत, बजट पर नज़र रखने की सुविधा को शामिल करें. इसे Angular सीएलआई की मदद से भी हासिल किया जा सकता है.