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

Milica Mihajlija

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

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

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

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

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

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

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

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

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

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

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

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

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

इंटिग्रेट करने की प्रोसेस सेट अप करना

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

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

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

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

पुल अनुरोधों पर पोस्ट करने के लिए बंडलसाइज़ को अनुमति दें

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

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

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

लगातार इंटिग्रेट करने वाले इंटिग्रेशन को शुरू करने के लिए आखिरी चीज़ .travis.yml फ़ाइल है, जो ट्रैविस सीआई को बताती है कि क्या करना है. इस प्रोजेक्ट में यह पहले से ही शामिल है, और यह बताता है कि ऐप्लिकेशन 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';

परीक्षण फिर से चलाएं

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

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

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

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

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

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

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

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

मॉनिटर करना

ऐप्लिकेशन का बजट कम है और बहुत काम चल रहा है. Travis CI और बंडलसाइज़, आपके परफ़ॉर्मेंस बजट पर नज़र बनाए रखेंगे और पक्का करेंगे कि आपका ऐप्लिकेशन तेज़ी से काम करता रहे.