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

मिलिका मिहाजलिया

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

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

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

दूरी मापें

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

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

webpack

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

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

भारी JS बंडल के बारे में वेबपैक की चेतावनी ⚠️

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

भारी JS बंडल के बारे में वेबपैक की चेतावनी ⚠️

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

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

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

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

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

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

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

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

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

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

संकेत के लिए संभावित वैल्यू ये हैं:

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

वेबपैक की परफ़ॉर्मेंस का मतलब है कि "गड़बड़ी" 🚨

Optimize

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

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

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

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

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

टा-डा! आपका वज़न 223 किबी (230 केबी) हो गया है और ऐप्लिकेशन का बजट भी कम है.🎉

मॉनिटर करना

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