Trawis CI के साथ बंडलसाइज़ का इस्तेमाल करना

Milica Mihajlija

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

बंडलसाइज़ की GitHub जांच में, मुख्य ब्रांच से साइज़ की तुलना और साइज़ बड़ा होने पर चेतावनी शामिल होती है.

इसे इस्तेमाल करने के लिए, पेश है webpack का एक ऐप्लिकेशन. यह आपको अपनी पसंदीदा बिल्ली के लिए वोट करने की सुविधा देता है.

परफ़ॉर्मेंस बजट सेट करना

इस Glitch में पहले से ही बंडलसाइज़ है.

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

इस ऐप्लिकेशन का मुख्य बंडल, सार्वजनिक फ़ोल्डर में होता है. इसके साइज़ की जांच करने के लिए, package.json फ़ाइल में यहां दिया गया सेक्शन जोड़ें:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

कंप्रेस किए गए JavaScript बंडल के साइज़ को सुझाई गई सीमा में रखने के लिए, maxSize फ़ील्ड में परफ़ॉर्मेंस बजट को 170 केबी पर सेट करें.

Bundlesize, ग्लोब पैटर्न के साथ काम करता है. साथ ही, फ़ाइल पाथ में मौजूद * वाइल्डकार्ड वर्ण, सार्वजनिक फ़ोल्डर में मौजूद सभी बंडल के नाम से मैच करेगा.

टेस्ट स्क्रिप्ट बनाना

Travis को टेस्ट चलाने के लिए ज़रूरत होती है. इसलिए, package.json में टेस्ट स्क्रिप्ट जोड़ें:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

लगातार इंटिग्रेशन करने की सुविधा सेट अप करना

GitHub और Travis CI को इंटिग्रेट करना

सबसे पहले, अपने GitHub खाते पर इस प्रोजेक्ट के लिए एक नया डेटा स्टोर करने की जगह बनाएं और इसे README.md से शुरू करें.

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

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

पुल के अनुरोधों पर पोस्ट करने के लिए, bundlesize को अनुमति दें

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

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

वैल्यू फ़ील्ड के तौर पर टोकन के साथ एक नया एनवायरमेंट वैरिएबल और नाम के तौर पर बंडलSIZE_GITHUB_TOKEN जोड़ें.

लगातार इंटिग्रेशन शुरू करने के लिए, आपको एक .travis.yml फ़ाइल की ज़रूरत होगी. यह फ़ाइल, Travis CI को बताती है कि उसे क्या करना है. प्रोसेस को तेज़ करने के लिए, यह फ़ाइल पहले से ही प्रोजेक्ट में शामिल होती है. साथ ही, इससे यह भी पता चलता है कि ऐप्लिकेशन, NodeJS का इस्तेमाल कर रहा है.

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

इसे आज़माएं

बंडल साइज़ की अपनी पहली जांच को ट्रिगर करें

यह देखने के लिए कि ऐप्लिकेशन, परफ़ॉर्मेंस बजट के मुकाबले कैसा परफ़ॉर्म कर रहा है, कोड को उस GitHub डेटा स्टोर करने की जगह में जोड़ें जिसे आपने तीसरे चरण में बनाया था.

1. Glitch पर, टूल > Git, इंपोर्ट, और एक्सपोर्ट > GitHub पर एक्सपोर्ट करें पर क्लिक करें.

2. पॉप-अप में, GitHub पर अपना उपयोगकर्ता नाम और रेपो का नाम username/repo के तौर पर डालें. Glitch आपके ऐप्लिकेशन को "glitch" नाम की नई शाखा में एक्सपोर्ट कर देगा.

3. रिपॉज़िटरी के होम पेज पर, नया पुश अनुरोध बटन पर क्लिक करके, नया पुश अनुरोध बनाएं.

अब आपको पुल के अनुरोध वाले पेज पर स्टेटस की जांच की प्रोसेस दिखेगी.

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

Optimize

अच्छी बात यह है कि इस्तेमाल न किए गए कोड को हटाकर, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. src/index.js में दो मुख्य इंपोर्ट होते हैं:

import firebase from "firebase";
import * as moment from 'moment';

ऐप्लिकेशन, डेटा को सेव करने के लिए Firebase रीयलटाइम डेटाबेस का इस्तेमाल कर रहा है. हालांकि, यह पूरे Firebase पैकेज को इंपोर्ट कर रहा है. इसमें सिर्फ़ डेटाबेस (पुष्टि करने की सुविधा, स्टोरेज, मैसेजिंग वगैरह) के अलावा और भी बहुत कुछ शामिल है.

src/index.js फ़ाइल में, सिर्फ़ उस पैकेज को इंपोर्ट करके इसे ठीक करें जिसकी ऐप्लिकेशन को ज़रूरत है:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

टेस्ट फिर से चलाना

सोर्स फ़ाइल अपडेट कर दी गई है, इसलिए नई बंडल फ़ाइल बनाने के लिए आपको webpack चलाना होगा.

1. टूल बटन पर क्लिक करें.

2. इसके बाद, कंसोल बटन पर क्लिक करें. इससे कंसोल, दूसरे टैब में खुल जाएगा.

3. कंसोल में, webpack टाइप करें और बिल्ड पूरा होने का इंतज़ार करें.

4. टूल > Git, इंपोर्ट, और एक्सपोर्ट > GitHub पर एक्सपोर्ट करें पर जाकर, कोड को GitHub पर एक्सपोर्ट करें.

5. GitHub पर, पुल के अनुरोध वाले पेज पर जाएं और सभी जांचों के पूरा होने का इंतज़ार करें.

हो गया! बंडल का नया साइज़ 125.5 केबी है और सभी जांच पूरी हो गई हैं. 🎉

Firebase की तुलना में, मोमेंट लाइब्रेरी के हिस्सों को आसानी से इंपोर्ट नहीं किया जा सकता. हालांकि, इसे आज़माने में कोई नुकसान नहीं है. इस्तेमाल नहीं किए गए कोडलैब हटाएं में जाकर देखें कि ऐप्लिकेशन को ज़्यादा ऑप्टिमाइज़ कैसे किया जा सकता है.

निगरानी

अब ऐप्लिकेशन का बजट कम है और सब ठीक है. Travis CI और bundlesize, आपके लिए परफ़ॉर्मेंस बजट को मॉनिटर करते रहेंगे. इससे यह पक्का किया जा सकेगा कि आपका ऐप्लिकेशन तेज़ी से काम करता रहे.