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

Milica Mihajlija

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

लाइटहाउस परफ़ॉर्मेंस बजट

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 -f "dist/bundle.js" -s 170kB

बंडलसाइज़ एक लाइन में कलर कोड वाले टेस्ट के नतीजे देता है.

बंडलसाइज़ सीएलआई टेस्ट में कामयाब नहीं हो रहा है ❌

बंडलसाइज़ सीएलआई टेस्ट पास किया गया ✔️

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

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

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

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

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

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

लाइटहाउस बॉट

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

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

किसी साइट को स्टेजिंग सर्वर पर डिप्लॉय करने के बाद, लाइटहाउस बॉट ऑडिट करता है. .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 पुल अनुरोध को मर्ज होने से रोक सकता है. ⛔

GitHub पर लाइटहाउस बॉट की जांच का स्टेटस

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

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

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

खास जानकारी

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