परफ़ॉर्मेंस बजट सेट करने के लिए, Lighthouse बॉट का इस्तेमाल करना

Milica Mihajlija

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

Lighthouse, आपके ऐप्लिकेशन को पांच कैटगरी में ग्रेड करता है. इनमें से एक कैटगरी परफ़ॉर्मेंस है. हर बार कोड में बदलाव करने पर, DevTools या Lighthouse CLI की मदद से परफ़ॉर्मेंस में होने वाले बदलावों की निगरानी की जा सकती है. हालांकि, ऐसा करना ज़रूरी नहीं है. टूल, आपके लिए मुश्किल काम कर सकते हैं. Travis CI एक बेहतरीन सेवा है. यह हर बार नया कोड पुश करने पर, क्लाउड में आपके ऐप्लिकेशन की जांच अपने-आप करती है.

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

हालांकि, localhost पर परफ़ॉर्मेंस की जांच की जा सकती है. हालांकि, लाइव सर्वर पर आपकी साइट अक्सर अलग-अलग तरीके से काम करती है. ज़्यादा सटीक जानकारी पाने के लिए, अपनी साइट को स्टेजिंग सर्वर पर डिप्लॉय करना सबसे अच्छा है. किसी भी होस्टिंग सेवा का इस्तेमाल किया जा सकता है. इस गाइड में, Firebase होस्टिंग का इस्तेमाल किया जाएगा.

1. सेटअप

यह आसान ऐप्लिकेशन, तीन नंबरों को क्रम से लगाने में आपकी मदद करता है.

GitHub से उदाहरण का क्लोन बनाएं, साथ ही, पक्का करें कि इसे अपने GitHub खाते पर डेटाबेस के तौर पर जोड़ा गया हो.

2. Firebase पर डिप्लॉय करना

शुरू करने के लिए, आपके पास Firebase खाता होना चाहिए. खाता बनाने के बाद, Firebase कंसोल में "प्रोजेक्ट जोड़ें" पर क्लिक करके, एक नया प्रोजेक्ट बनाएं:

Firebase पर डिप्लॉय करना

ऐप्लिकेशन को डिप्लॉय करने के लिए, आपको Firebase CLI की ज़रूरत होगी. अगर आपने इसे पहले से इंस्टॉल किया हुआ है, तब भी इस निर्देश की मदद से, CLI को सबसे नए वर्शन पर अपडेट करना एक अच्छी आदत है:

npm install -g firebase-tools

Firebase CLI को अनुमति देने के लिए, यह निर्देश चलाएं:

firebase login

अब प्रोजेक्ट को शुरू करें:

firebase init

सेटअप के दौरान, कंसोल आपसे कई सवाल पूछेगा:

• सुविधाएं चुनने के लिए कहे जाने पर, "होस्टिंग" चुनें.
• डिफ़ॉल्ट Firebase प्रोजेक्ट के लिए, वह प्रोजेक्ट चुनें जिसे आपने Firebase कंसोल में बनाया है.
• अपनी सार्वजनिक डायरेक्ट्री के तौर पर, "पब्लिक" टाइप करें.
• सिंगल-पेज ऐप्लिकेशन के तौर पर कॉन्फ़िगर करने के लिए, "N" (नहीं) टाइप करें.

इस प्रोसेस से, आपके प्रोजेक्ट डायरेक्ट्री की रूट में firebase.json कॉन्फ़िगरेशन फ़ाइल बनती है.

बधाई हो, अब डिप्लॉय किया जा सकता है! यह निर्देश चलाएं:

firebase deploy

कुछ ही पलों में, आपका ऐप्लिकेशन लाइव हो जाएगा.

3. Travis सेट अप करना

आपको Travis पर खाता रजिस्टर करना होगा. इसके बाद, अपनी प्रोफ़ाइल के सेटिंग सेक्शन में जाकर, GitHub ऐप्लिकेशन इंटिग्रेशन को चालू करना होगा.

खाता होने के बाद

अपनी प्रोफ़ाइल में जाकर, सेटिंग पर जाएं. इसके बाद, 'खाता सिंक करें' बटन पर क्लिक करें. साथ ही, पक्का करें कि आपका प्रोजेक्ट रेपो, Travis पर लिस्ट हो.

लगातार इंटिग्रेशन शुरू करने के लिए, आपको दो चीज़ों की ज़रूरत होगी:

1. रूट डायरेक्ट्री में .travis.yml फ़ाइल होना
2. सामान्य git पुश करके, बिल्ड को ट्रिगर करना

lighthouse-bot-starter रेपो में पहले से ही .travis.yml YAML फ़ाइल मौजूद है:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

YAML फ़ाइल, Travis को सभी डिपेंडेंसी इंस्टॉल करने और आपका ऐप्लिकेशन बनाने के लिए कहती है. अब आपको उदाहरण के तौर पर दिए गए ऐप्लिकेशन को अपने GitHub डेटाबेस पर पुश करना है. अगर आपने ऐसा नहीं किया है, तो यह निर्देश चलाएं:

git push origin main

अपने प्रोजेक्ट का Travis डैशबोर्ड देखने के लिए, Travis में सेटिंग में जाकर, अपने रेपो पर क्लिक करें. अगर सब कुछ ठीक है, तो आपको कुछ ही मिनटों में अपना बिल्ड, पीले से हरे रंग में दिखेगा. 🎉

4. Travis की मदद से, Firebase पर डिप्लॉय करने की प्रोसेस को ऑटोमेट करना

दूसरे चरण में, आपने अपने Firebase खाते में लॉग इन किया और firebase deploy की मदद से, कमांड लाइन से ऐप्लिकेशन को डिप्लॉय किया. Travis को Firebase पर अपना ऐप्लिकेशन डिप्लॉय करने की अनुमति देनी होगी. यह कैसे किया जाता है? Firebase टोकन की मदद से. 🗝️🔥

Firebase को अनुमति देना

टोकन जनरेट करने के लिए, यह निर्देश चलाएं:

firebase login:ci

इससे ब्राउज़र विंडो में एक नया टैब खुलेगा, ताकि Firebase आपकी पुष्टि कर सके. इसके बाद, कंसोल पर वापस जाएं. आपको नया टोकन दिखेगा. इसे कॉपी करें और Travis पर वापस जाएं.

अपने प्रोजेक्ट के Travis डैशबोर्ड में, ज़्यादा विकल्प > सेटिंग > एनवायरमेंट वैरिएबल पर जाएं.

टोकन को वैल्यू फ़ील्ड में चिपकाएं. वैरिएबल का नाम FIREBASE_TOKEN रखें और इसे जोड़ें.

अपने Travis सेटअप में डिप्लॉयमेंट जोड़ना

Travis को हर सफल बिल्ड के बाद ऐप्लिकेशन डिप्लॉय करने के लिए, आपको ये लाइनें जोड़नी होंगी. इन्हें .travis.yml फ़ाइल के आखिर में जोड़ें. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

इस बदलाव को GitHub पर पुश करें और पहले ऑटोमेटेड डिप्लॉयमेंट का इंतज़ार करें. अगर Travis लॉग देखा जाए, तो आपको जल्द ही ✔️ डिप्लॉयमेंट पूरा हुआ! दिखेगा.

अब अपने ऐप्लिकेशन में बदलाव करने पर, वे Firebase पर अपने-आप डिप्लॉय हो जाएंगे.

5. Lighthouse Bot सेट अप करना

Lighthouse Bot, आपके ऐप्लिकेशन के Lighthouse स्कोर के बारे में अपडेट देता है. इसके लिए, इसे सिर्फ़ आपके रेपो का न्योता चाहिए.

GitHub पर, अपने प्रोजेक्ट की सेटिंग में जाएं और "lighthousebot" को सहयोगी के तौर पर जोड़ें (सेटिंग>सहयोगी):

इन अनुरोधों को मैन्युअल तरीके से स्वीकार करना होता है. इसलिए, ये तुरंत स्वीकार नहीं होते. जांच शुरू करने से पहले, पक्का करें कि lighthousebot ने सहयोगी के तौर पर अपनी स्थिति की पुष्टि कर दी हो. इस बीच, आपको Travis पर अपने प्रोजेक्ट के एनवायरमेंट वैरिएबल में एक और कुंजी जोड़नी होगी. यहां अपना ईमेल पता डालें . आपको अपने इनबॉक्स में Lighthouse Bot की कुंजी मिल जाएगी. 📬

Travis पर, इस कुंजी को एनवायरमेंट वैरिएबल के तौर पर जोड़ें और इसका नाम LIGHTHOUSE_API_KEY रखें:

अपने प्रोजेक्ट में Lighthouse Bot जोड़ना

इसके बाद, यह निर्देश चलाकर अपने प्रोजेक्ट में Lighthouse Bot जोड़ें:

npm i --save-dev https://github.com/ebidel/lighthousebot

साथ ही, package.json में यह कोड जोड़ें:

"scripts": {
  "lh": "lighthousebot"
}

अपने Travis कॉन्फ़िगरेशन में Lighthouse Bot जोड़ना

आखिरी चरण में, हर पुल-अनुरोध के बाद ऐप्लिकेशन की परफ़ॉर्मेंस की जांच करें!

.travis.yml में, after_success में एक और चरण जोड़ें:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

यह दिए गए यूआरएल पर Lighthouse ऑडिट चलाएगा. इसलिए, https://staging.example.com को अपने ऐप्लिकेशन के यूआरएल (यानी, your-app-123.firebaseapp.com) से बदलें.

अपने स्टैंडर्ड को ऊंचा रखें और सेटअप में बदलाव करें, ताकि ऐप्लिकेशन में ऐसे बदलाव स्वीकार न किए जाएं जिनसे परफ़ॉर्मेंस स्कोर 95 से कम हो जाए:

- npm run lh -- --perf=95 https://staging.example.com

Travis पर Lighthouse Bot की जांच को ट्रिगर करने के लिए, पुल-अनुरोध करना

Lighthouse Bot सिर्फ़ पुल-अनुरोधों की जांच करेगा. इसलिए, अगर अब मुख्य ब्रांच पर पुश किया जाता है, तो आपको अपने Travis लॉग में सिर्फ़ "यह स्क्रिप्ट, Travis PR अनुरोधों पर ही चलाई जा सकती है" दिखेगा.

Lighthouse Bot की जांच को ट्रिगर करने के लिए:

1. नई ब्रांच चेकआउट करें
2. इसे GitHub पर पुश करें
3. पुल-अनुरोध करें

उस पुल-अनुरोध वाले पेज पर इंतज़ार करें और Lighthouse Bot के गाने का इंतज़ार करें! 🎤

परफ़ॉर्मेंस स्कोर बहुत अच्छा है. ऐप्लिकेशन बजट के अंदर है. साथ ही, जांच पास हो गई है!

Lighthouse के ज़्यादा विकल्प

क्या आपको याद है कि Lighthouse, पांच अलग-अलग कैटगरी की जांच करता है? Lighthouse Bot के फ़्लैग की मदद से, इनमें से किसी भी कैटगरी के लिए स्कोर लागू किए जा सकते हैं:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

उदाहरण:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

अगर परफ़ॉर्मेंस स्कोर 93 से कम होता है या एसईओ स्कोर 100 से कम होता है, तो पीआर फ़ेल हो जाएगा.

--no-comment विकल्प का इस्तेमाल करके, Lighthouse Bot के कॉमेंट न पाने का विकल्प भी चुना जा सकता है.