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

Milica Mihajlija

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

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

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

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

• संसाधन का साइज़
• संसाधनों की संख्या

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

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

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

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

Webpack की परफ़ॉर्मेंस के संकेत

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

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

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

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

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

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

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

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

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

बंडल का साइज़

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

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

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

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

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

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

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

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

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

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

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

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

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

लाइटहाउस बॉट

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 बॉट, पुल अनुरोध को मर्ज होने से रोक सकता है. ⛔

GitHub पर लाइटहाउस बॉट की स्थिति देखना

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

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

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

खास जानकारी

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