अपनी बिल्ड प्रोसेस में परफ़ॉर्मेंस बजट शामिल करना

Milica Mihajlija

परफ़ॉर्मेंस बजट तय करने के बाद, उसे ट्रैक करने के लिए बिल्ड प्रोसेस को सेट अप करें. ऐसे कई टूल हैं जिनकी मदद से, चुनी गई परफ़ॉर्मेंस मेट्रिक के लिए थ्रेशोल्ड तय किए जा सकते हैं. साथ ही, बजट खत्म होने पर आपको चेतावनी भी दी जा सकती है. अपनी ज़रूरतों और मौजूदा सेटअप के हिसाब से, सबसे सही रणनीति चुनने का तरीका जानें. 🕵️‍♀️

Lighthouse परफ़ॉर्मेंस बजट

Lighthouse एक ऑडिट टूल है. यह साइटों की परफ़ॉर्मेंस, सुलभता, सबसे सही तरीकों, और प्रोग्रेसिव वेब ऐप्लिकेशन के तौर पर आपकी साइट की परफ़ॉर्मेंस की जांच करता है.

Lighthouse (v5+) के कमांड-लाइन वर्शन में, इनके आधार पर परफ़ॉर्मेंस बजट सेट करने की सुविधा मिलती है:

• संसाधन का साइज़
• रिसॉर्स की संख्या

इनमें से किसी भी तरह के संसाधन के लिए बजट सेट किया जा सकता है:

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

बजट, JSON फ़ाइल में सेट किए जाते हैं. बजट सेट करने के बाद, "बजट से ज़्यादा" कॉलम से पता चलता है कि आपने कोई सीमा तो नहीं पार की है.

लाइटहाउस रिपोर्ट में "बजट" सेक्शन

Webpack की परफ़ॉर्मेंस के बारे में सलाह

Webpack एक बेहतरीन बिल्ड टूल है. इसकी मदद से, यह ऑप्टिमाइज़ किया जा सकता है कि आपका कोड उपयोगकर्ताओं को कैसे डिलीवर किया जाए. यह ऐसेट साइज़ के आधार पर परफ़ॉर्मेंस बजट सेट करने की सुविधा भी देता है.

webpack.config.js में परफ़ॉर्मेंस के सुझाव चालू करें, ताकि बंडल का साइज़ तय सीमा से ज़्यादा होने पर, कमांड लाइन से चेतावनियां या गड़बड़ियां मिल सकें. यह डेवलपमेंट के दौरान, एसेट के साइज़ को ध्यान में रखने का एक बेहतरीन तरीका है.

बिल्ड करने के बाद, webpack एसेट और उनके साइज़ की सूची को कलर-कोड में दिखाता है. बजट से बाहर की चीज़ें पीले रंग में हाइलाइट की जाती हैं.

हाइलाइट किया गया bundle.js आपके बजट से ज़्यादा है

ऐसेट और एंट्री-पॉइंट, दोनों के लिए डिफ़ॉल्ट सीमा 250 केबी है. कॉन्फ़िगरेशन फ़ाइल में, अपने टारगेट सेट किए जा सकते हैं.

Webpack बंडल के साइज़ से जुड़ी चेतावनी ⚠️

बजट की तुलना, कंप्रेस नहीं की गई एसेट के साइज़ से की जाती है. बिना कंप्रेस किए गए JavaScript का साइज़, उसे लागू करने में लगने वाले समय से जुड़ा होता है. साथ ही, बड़ी फ़ाइलों को लागू होने में ज़्यादा समय लग सकता है. खास तौर पर, मोबाइल डिवाइसों पर.

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

बोनस की सुविधा: webpack आपको सिर्फ़ चेतावनी नहीं देगा. यह आपको बंडल का साइज़ कम करने के सुझाव भी देगा. 💁

Bundlesize

Bundlesize एक आसान एनपीएम पैकेज है. यह आपके सेट किए गए थ्रेशोल्ड के हिसाब से, एसेट के साइज़ की जांच करता है. इसे स्थानीय तौर पर चलाया जा सकता है और इसे सीआई के साथ इंटिग्रेट किया जा सकता है.

Bundlesize CLI

थ्रेशोल्ड और उस फ़ाइल की जानकारी देकर, bundlesize CLI चलाएं जिसकी आपको जांच करनी है.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize, टेस्ट के नतीजों को एक लाइन में कलर कोड के साथ दिखाता है.

बंडल साइज़ के सीएलआई टेस्ट में पास नहीं हुआ ❌

बंडल साइज़ के सीएलआई टेस्ट में पास हुआ ✔️

सीआई के लिए बंडल का साइज़

आपको बंडल साइज़ से ज़्यादा से ज़्यादा फ़ायदा तब मिलेगा, जब आप इसे सीआई के साथ इंटिग्रेट करेंगे, ताकि पुश अनुरोधों पर साइज़ की सीमाएं अपने-आप लागू हो जाएं. अगर बंडल साइज़ की जांच पूरी नहीं हो पाती है, तो उस पुल अनुरोध को मर्ज नहीं किया जाता. यह Travis CI, CircleCI, Wercker, और Drone के साथ, GitHub पर पुल के अनुरोधों के लिए काम करता है.

GitHub पर बंडल साइज़ की जांच का स्टेटस

हो सकता है कि आपका ऐप्लिकेशन फटाफट काम करता हो, लेकिन नया कोड जोड़ने से अक्सर इस पर असर पड़ सकता है. बंडल साइज़ के साथ पुल रिक्वेस्ट की जांच करने से, आपको परफ़ॉर्मेंस में गिरावट से बचने में मदद मिलेगी. बूटस्ट्रैप, Tinder, Trivago जैसे दूसरे कई चैनल अपने बजट को सही बनाए रखने के लिए इसका इस्तेमाल करते हैं.

bundlesize की मदद से, हर फ़ाइल के लिए अलग-अलग थ्रेशोल्ड सेट किए जा सकते हैं. यह सुविधा खास तौर पर तब काम आती है, जब अपने ऐप्लिकेशन में किसी बंडल को बांटा जा रहा हो.

डिफ़ॉल्ट रूप से, यह ऐसेट के ज़िप किए गए साइज़ की जांच करता है. ब्रोटली कंप्रेस करने की सुविधा पर स्विच करने या इसे पूरी तरह बंद करने के लिए, कंप्रेस करने के विकल्प का इस्तेमाल किया जा सकता है.

लाइटहाउस बॉट

Lighthouse Bot, Travis CI के साथ इंटिग्रेट होता है और Lighthouse के ऑडिट की पांच कैटगरी में से किसी भी कैटगरी के आधार पर बजट लागू करता है. उदाहरण के लिए, लाइटहाउस परफ़ॉर्मेंस स्कोर के लिए 100 का बजट. कभी-कभी किसी एक नंबर पर नज़र रखना, अलग-अलग एसेट के बजट पर नज़र रखने से आसान होता है. साथ ही, Lighthouse के स्कोर में कई चीज़ों को ध्यान में रखा जाता है.

लाइटहाउस स्कोर 💯

किसी साइट को स्टेजिंग सर्वर पर डिप्लॉय करने के बाद, लाइटहाउस बॉट ऑडिट करता है. .travis.yml में, --perf, --a11y, --bp, --seo या --pwa विकल्पों की मदद से, लाइटहाउस की खास कैटगरी के लिए बजट सेट करें. कम से कम 90 अंकों के साथ ग्रीन ज़ोन में बने रहें.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

अगर GitHub पर पुल अनुरोध का स्कोर, आपके सेट किए गए थ्रेशोल्ड से कम है, तो Lighthouse Bot पुल अनुरोध को मर्ज होने से रोक सकता है. ⛔

Lighthouse बॉट की स्थिति की जांच GitHub पर करें

इसके बाद, Lighthouse बॉट आपके पुल अनुरोध पर, अपडेट किए गए स्कोर के साथ टिप्पणी करता है. यह एक शानदार सुविधा है, जो कोड में बदलाव होने पर परफ़ॉर्मेंस के बारे में बातचीत को बढ़ावा देती है.

पुल अनुरोध पर लाइटहाउस रिपोर्टिंग स्कोर 💬

अगर आपको लगता है कि आपका पुश अनुरोध, खराब Lighthouse स्कोर की वजह से ब्लॉक किया गया है, तो Lighthouse CLI या Dev Tools में ऑडिट चलाएं. यह एक रिपोर्ट जनरेट करती है, जिसमें रुकावटों के बारे में जानकारी और आसान ऑप्टिमाइज़ेशन के लिए सलाह शामिल होती है.

खास जानकारी

टूल	सीएलआई	कोट डि'व्वार (CI)	खास जानकारी
लाइटहाउस	✔️	❌	अलग-अलग तरह के संसाधनों के लिए, उनके साइज़ या संख्या के आधार पर बजट.
Webpack	✔️	❌	वेबपैक की मदद से जनरेट की गई एसेट के साइज़ के आधार पर बजट. बिना कंप्रेस किए गए साइज़ की जांच करता है.
bundlesize	✔️	✔️	खास संसाधनों के साइज़ के आधार पर बजट. कंप्रेस किए गए या कंप्रेस न किए गए साइज़ की जांच करता है.
Lighthouse बॉट	❌	✔️	Lighthouse स्कोर के आधार पर बजट.