Travis CI के साथ bundlesize का इस्तेमाल करके, कम सेटअप के साथ परफ़ॉर्मेंस बजट तय किए जा सकते हैं. साथ ही, उन्हें अपने डेवलपमेंट वर्कफ़्लो के हिस्से के तौर पर लागू किया जा सकता है. Travis CI एक ऐसी सेवा है जो हर बार GitHub पर कोड पुश करने पर, क्लाउड में आपके ऐप्लिकेशन की जांच करती है. अपनी रिपॉज़िटरी को कॉन्फ़िगर किया जा सकता है, ताकि बंडल साइज़ की जांच पूरी होने तक, पुश अनुरोधों को मर्ज करने की अनुमति न दी जाए.
Bundlesize की GitHub जांच में, मुख्य शाखा के साइज़ की तुलना और साइज़ में काफ़ी बढ़ोतरी होने पर चेतावनी शामिल होती है.
इसे काम करते हुए देखने के लिए, यहां webpack के साथ बंडल किया गया एक ऐप्लिकेशन दिया गया है. इसकी मदद से, अपनी पसंदीदा बिल्ली के लिए वोट किया जा सकता है.
परफ़ॉर्मेंस बजट सेट करना
इस गड़बड़ी में पहले से ही, बंडल साइज़ मौजूद है.
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
इस ऐप्लिकेशन का मुख्य बंडल, सार्वजनिक फ़ोल्डर में होता है. इसके साइज़ की जांच करने के लिए, 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 ऐप्लिकेशन के इंटिग्रेशन को चालू करना होगा.
खाता बनाने के बाद, अपनी प्रोफ़ाइल में जाकर सेटिंग पर जाएं. इसके बाद, खाता सिंक करें बटन पर क्लिक करें और पक्का करें कि आपका नया रिपॉज़िटरी, Travis पर मौजूद हो.
pull request पर पोस्ट करने के लिए, bundlesize को अनुमति देना
Bundlesize को पुल के अनुरोधों पर पोस्ट करने के लिए अनुमति की ज़रूरत होती है. इसलिए, Bundlesize टोकन पाने के लिए इस लिंक पर जाएं. इस टोकन को Travis कॉन्फ़िगरेशन में सेव किया जाएगा.
अपने प्रोजेक्ट के Travis डैशबोर्ड में, ज़्यादा विकल्प > सेटिंग > एनवायरमेंट वैरिएबल पर जाएं.
वैल्यू फ़ील्ड के तौर पर टोकन और नाम के तौर पर BUNDLESIZE_GITHUB_TOKEN वाला नया एनवायरमेंट वैरिएबल जोड़ें.
लगातार इंटिग्रेशन शुरू करने के लिए, आपको एक .travis.yml
फ़ाइल की ज़रूरत होगी. यह फ़ाइल, Travis CI को बताती है कि उसे क्या करना है. प्रोसेस को तेज़ करने के लिए, यह फ़ाइल पहले से ही प्रोजेक्ट में शामिल होती है. साथ ही, इससे यह भी पता चलता है कि ऐप्लिकेशन, NodeJS का इस्तेमाल कर रहा है.
इस चरण के बाद, आपका सेट अप पूरा हो जाएगा. अगर आपका JavaScript कभी बजट से ज़्यादा हो जाता है, तो बंडलसाइज़ आपको चेतावनी देगा. शुरुआत में ऐप्लिकेशन का साइज़ कम हो सकता है. हालांकि, समय के साथ नई सुविधाएं जोड़ने पर, ऐप्लिकेशन का साइज़ बढ़ सकता है. परफ़ॉर्मेंस के बजट को अपने-आप मॉनिटर करने की सुविधा की मदद से, आपको यह जानकर राहत मिलेगी कि आपके बजट पर नज़र रखी जा रही है.
इसे आज़माएं
बंडल साइज़ का पहला टेस्ट ट्रिगर करना
यह देखने के लिए कि ऐप्लिकेशन, परफ़ॉर्मेंस बजट के मुकाबले कैसा परफ़ॉर्म कर रहा है, कोड को उस GitHub डेटा स्टोर करने की जगह में जोड़ें जिसे आपने तीसरे चरण में बनाया था.
Glitch पर, टूल > Git, इंपोर्ट, और एक्सपोर्ट > GitHub पर एक्सपोर्ट करें पर क्लिक करें.
पॉप-अप में, अपना GitHub उपयोगकर्ता नाम और रीपो का नाम
username/repo
के तौर पर डालें. Glitch आपके ऐप्लिकेशन को "glitch" नाम की नई शाखा में एक्सपोर्ट कर देगा.रिपॉज़िटरी के होम पेज पर, नया पुश अनुरोध बटन पर क्लिक करके नया पुश अनुरोध बनाएं.
अब आपको पुल अनुरोध वाले पेज पर, स्टेटस की जांच की प्रोग्रेस दिखेगी.
सभी जांच पूरी होने में ज़्यादा समय नहीं लगेगा. माफ़ करें, बिल्ली के लिए वोटिंग करने वाला ऐप्लिकेशन थोड़ा बड़ा है और परफ़ॉर्मेंस बजट की जांच में पास नहीं होता. मुख्य बंडल का साइज़ 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 चलाना होगा.
टूल बटन पर क्लिक करें.
इसके बाद, कंसोल बटन पर क्लिक करें. इससे कंसोल, दूसरे टैब में खुल जाएगा.
कंसोल में,
webpack
टाइप करें और बिल्ड पूरा होने का इंतज़ार करें.टूल > Git, इंपोर्ट, और एक्सपोर्ट > GitHub पर एक्सपोर्ट करें पर जाकर, कोड को GitHub पर एक्सपोर्ट करें.
GitHub पर, पुल के अनुरोध वाले पेज पर जाएं और सभी जांचों के पूरा होने का इंतज़ार करें.
हो गया! बंडल का नया साइज़ 125.5 केबी है और सभी जांचें पूरी हो गई हैं. 🎉
Firebase की तुलना में, मोमेंट लाइब्रेरी के हिस्सों को आसानी से इंपोर्ट नहीं किया जा सकता. हालांकि, इसे आज़माने में कोई नुकसान नहीं है. इस्तेमाल न किए गए कोड को हटाने के लिए कोडलैब में जाकर, ऐप्लिकेशन को और ऑप्टिमाइज़ करने का तरीका जानें.
निगरानी
ऐप्लिकेशन अब बजट में है और सब कुछ ठीक है. Travis CI और bundlesize, आपके लिए परफ़ॉर्मेंस बजट को मॉनिटर करते रहेंगे. इससे यह पक्का किया जा सकेगा कि आपका ऐप्लिकेशन तेज़ी से काम करता रहे.