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

Milica Mihajlija

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में यह Glitch खोलें.

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

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

मापें

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

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

webpack

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

ध्यान दें: Webpack, "KiB" यूनिट का इस्तेमाल करता है. ऐसा हो सकता है कि आपने पहले कभी इस यूनिट को न देखा हो. 1 "किबी" और 1 "केबी" का साइज़ काफ़ी मिलता-जुलता है: 1 किबी में 1024 बाइट होते हैं, जबकि 1 केबी में 1000 बाइट होते हैं.

Webpack, आपको बड़े साइज़ के JS बंडल के बारे में चेतावनी दे रहा है ⚠️

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

Webpack, आपको बड़े JS बंडल के बारे में चेतावनी दे रहा है ⚠️

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

Webpack की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के लिए सुझाव 💁

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

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

ध्यान दें: क्रिटिकल-पाथ संसाधन, संसाधनों का वह कम से कम सेट होता है जो ब्राउज़र को पहली स्क्रीन का कॉन्टेंट दिखाने के लिए ज़रूरी होता है.

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

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

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

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

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

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

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

Webpack की परफ़ॉर्मेंस से जुड़ा "गड़बड़ी" वाला संकेत 🚨

Optimize

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

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

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

इस्तेमाल नहीं किए जा रहे कोड को हटाने से, उन ऐप्लिकेशन को ऑप्टिमाइज़ करने में मदद मिलती है जिनमें तीसरे पक्ष की बड़ी लाइब्रेरी शामिल होती हैं. इस्तेमाल न किए गए कोड को हटाने की गाइड में इस प्रोसेस के बारे में पूरी जानकारी दी गई है. साथ ही, यहां 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 की मदद से यह पक्का किया जा सकता है कि आपको हर समय परफ़ॉर्मेंस के असर के बारे में पता रहे.