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

Milica Mihajlija

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

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

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

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

इस Glitch में bundlesize पहले से मौजूद है.

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

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

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

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

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

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

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 कॉन्फ़िगरेशन में सेव किया जाएगा.

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

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

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

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

इसे आज़माएं

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

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

1. Glitch पर, Tools > Git, Import, and Export > Export to GitHub पर क्लिक करें.

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

3. डेटाबेस के होम पेज पर मौजूद, नया पुल अनुरोध बटन पर क्लिक करके, नया पुल अनुरोध बनाएं.

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

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

Optimize

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

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

ऐप्लिकेशन, डेटा को सेव करने के लिए Firebase Realtime Database का इस्तेमाल कर रहा है. हालाँकि, यह पूरे 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 के उलट, Moment.js लाइब्रेरी के कुछ हिस्सों को आसानी से इंपोर्ट नहीं किया जा सकता. हालांकि, इसे आज़माया जा सकता है. इस्तेमाल न होने वाले कोड को हटाने के बारे में जानकारी देने वाले कोडलैब में जाकर, यह जानें कि ऐप्लिकेशन को और बेहतर कैसे बनाया जा सकता है.

निगरानी

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