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

Milica Mihajlija

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

इसे ऐक्शन में देखने के लिए, यहां एक ऐसा ऐप्लिकेशन दिया गया है जो नए साल के आने में बचे हुए दिनों की गिनती करता है. इसे React और moment.js का इस्तेमाल करके बनाया गया है. (ठीक वैसे ही जैसे असल दुनिया में मौजूद ऐप्लिकेशन, फ़्रेमवर्क और लाइब्रेरी पर ज़्यादा से ज़्यादा निर्भर होते हैं. 😉)

मापें

इस कोडलैब में, webpack के साथ बंडल किया गया ऐप्लिकेशन पहले से मौजूद है.

1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
2. टर्मिनल पर क्लिक करें (ध्यान दें: अगर आपको टर्मिनल बटन नहीं दिखता है, तो आपको फ़ुलस्क्रीन विकल्प का इस्तेमाल करना पड़ सकता है).
3. कंसोल में webpack टाइप करके, ऐसेट और उनके साइज़ की रंग के हिसाब से कोड की गई सूची पाएं.

webpack

मुख्य बंडल को पीले रंग में हाइलाइट किया गया है, क्योंकि इसका साइज़ 244 केआईबी (250 केबी) से ज़्यादा है.

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

Webpack आपको सिर्फ़ चेतावनी नहीं देगा, बल्कि बंडलों का साइज़ कम करने के बारे में सुझाव भी देगा. सुझाई गई तकनीकों के बारे में ज़्यादा जानने के लिए, वेब फ़ंडामेंटल पर जाएं.

परफ़ॉर्मेंस बजट को पसंद के मुताबिक सेट करना

परफ़ॉर्मेंस बजट, आपके प्रोजेक्ट के हिसाब से तय किया जाता है. अपनी तरफ़ से रिसर्च करना हमेशा बेहतर होता है. सबसे अच्छा तरीका यह है कि कंप्रेस/छोटा किए गए क्रिटिकल-पाथ रिसॉर्स का साइज़ 170 केबी से कम हो.

इस आसान डेमो के लिए, ज़्यादा से ज़्यादा 100 केबी (97.7 केआईबी) का बजट सेट करें. webpack.config.js में यह जोड़ें:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

नया परफ़ॉर्मेंस बजट, बाइट में सेट किया जाता है:

• अलग-अलग ऐसेट के लिए 1,00,000 बाइट (maxAssetSize)
• एंट्री-पॉइंट के लिए 1,00,000 बाइट (maxEntrypointSize)

इस मामले में, सिर्फ़ एक बंडल है, जो एंट्री पॉइंट के तौर पर भी काम करता है.

hints के लिए ये वैल्यू इस्तेमाल की जा सकती हैं:

1. warning (डिफ़ॉल्ट): इससे चेतावनी के तौर पर पीले रंग का मैसेज दिखता है, लेकिन बिल्ड पास हो जाता है. इसका इस्तेमाल डेवलपमेंट एनवायरमेंट में करना सबसे सही होता है.
2. error: इसमें लाल रंग में गड़बड़ी का मैसेज दिखता है, लेकिन बिल्ड अब भी पास हो जाता है. इस सेटिंग का सुझाव, प्रोडक्शन बिल्ड के लिए दिया जाता है.
3. false: कोई चेतावनी या गड़बड़ी नहीं दिखाई जाती है.

Optimize

परफ़ॉर्मेंस बजट का मकसद, परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में आपको चेतावनी देना है. ऐसा इसलिए किया जाता है, ताकि समस्याएं ठीक करने में ज़्यादा मुश्किल न हों. किसी ऐप्लिकेशन को बनाने के लिए हमेशा एक से ज़्यादा तरीके होते हैं. कुछ तकनीकों की मदद से, ऐप्लिकेशन को तेज़ी से लोड किया जा सकता है. इनमें से कई के बारे में, JavaScript को ऑप्टिमाइज़ करना लेख में बताया गया है. 🤓)

फ़्रेमवर्क और लाइब्रेरी से डेवलपर को आसानी होती है. हालांकि, असली उपयोगकर्ताओं को इस बात से कोई फ़र्क़ नहीं पड़ता कि ऐप्लिकेशन कैसे बनाए गए हैं. उन्हें सिर्फ़ इस बात से मतलब होता है कि ऐप्लिकेशन काम करते हों और तेज़ी से काम करते हों. अगर आपको लगता है कि परफ़ॉर्मेंस बजट से ज़्यादा खर्च हो रहा है, तो ऑप्टिमाइज़ेशन के बारे में सोचें.

असल दुनिया में, क्लाइंट-साइड के बड़े फ़्रेमवर्क को बदलना आम तौर पर मुश्किल होता है. इसलिए, इनका इस्तेमाल सोच-समझकर करना ज़रूरी है. थोड़ी रिसर्च करके, आपको अक्सर लोकप्रिय लाइब्रेरी के छोटे विकल्प मिल सकते हैं. ये विकल्प, लाइब्रेरी की तरह ही काम करते हैं. उदाहरण के लिए, moment.js के लिए date-fns एक अच्छा विकल्प है. कभी-कभी, किसी फ़्रेमवर्क या लाइब्रेरी का इस्तेमाल न करना ज़्यादा सही होता है. ऐसा तब होता है, जब इससे परफ़ॉर्मेंस पर काफ़ी असर पड़ता है.

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

app/components/Countdown.jsx में जाकर, यह कोड हटाएं:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

इसके बाद, यह लाइन मिटाएं:

const moment = require('moment');

इसमें थोड़ी गणित शामिल है, लेकिन सामान्य JavaScript का इस्तेमाल करके भी इसी तरह का काउंटडाउन लागू किया जा सकता है:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

अब package.json से moment.js हटाएं. इसके बाद, ऑप्टिमाइज़ किया गया बंडल बनाने के लिए, कंसोल में webpack को फिर से चलाएं.

ता-दा! आपने 223 केआईबी (230 केबी) का साइज़ कम कर दिया है और ऐप्लिकेशन बजट के मुताबिक है.🎉

निगरानी

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