इस्तेमाल न होने वाले कोड हटा दें

npm आपके प्रोजेक्ट में कोड जोड़ना बेहद आसान बना देता है. लेकिन क्या आप वाकई इन अतिरिक्त बाइट का इस्तेमाल कर रहे हैं?

हुसैन जिरदेह

npm जैसी रजिस्ट्री ने किसी को भी आसानी से पांच लाख सार्वजनिक पैकेज डाउनलोड करने और उपयोग करने की अनुमति देकर, JavaScript की दुनिया को बेहतर तरीके से बदला है. हालांकि, हम अक्सर ऐसी लाइब्रेरी शामिल करते हैं जिनका हम पूरी तरह इस्तेमाल नहीं कर रहे हैं. इस समस्या को ठीक करने के लिए, अपने बंडल का विश्लेषण करें, ताकि इस्तेमाल न हो रहे कोड का पता लगाया जा सके. इसके बाद, इस्तेमाल नहीं की गई और ग़ैर-ज़रूरी लाइब्रेरी को हटाएं.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर असर

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

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

यह गाइड आपको अपने प्रोजेक्ट के कोडबेस का विश्लेषण करने का तरीका बताकर, आपके प्रोजेक्ट के इस्तेमाल नहीं किए गए कोड को हैंडल करने में मदद करेगी. साथ ही, इससे आपको उन JavaScript ऐसेट से इस्तेमाल न किए गए कोड को कम करने के तरीके पता करने में मदद मिलेगी जिन्हें प्रोडक्शन के दौरान उपयोगकर्ताओं को भेजा जाता है.

अपने बंडल का विश्लेषण करें

DevTools की मदद से, सभी नेटवर्क अनुरोधों का साइज़ आसानी से देखा जा सकता है:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. नेटवर्क टैब पर क्लिक करें.
3. कैश मेमोरी बंद करें चेकबॉक्स चुनें.
4. पेज को फिर से लोड करें.

DevTools में कवरेज टैब से, आपको यह भी पता चलेगा कि आपके ऐप्लिकेशन में कितने सीएसएस और जेएस कोड का इस्तेमाल नहीं हुआ है.

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

अगर आपके बंडलर के तौर पर वेबपैक का इस्तेमाल किया जा रहा है, तो Webpack बंडल ऐनालाइज़र से आपको यह पता लगाने में मदद मिलेगी कि बंडल में क्या-क्या शामिल है. किसी भी अन्य प्लग इन की तरह, अपनी वेबपैक कॉन्फ़िगरेशन फ़ाइल में प्लग इन को शामिल करें:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

हालांकि, आम तौर पर वेबपैक का इस्तेमाल एक पेज वाले ऐप्लिकेशन बनाने के लिए किया जाता है, लेकिन Parcel और Rollup जैसे दूसरे बंडलर में भी विज़ुअलाइज़ेशन टूल होते हैं. इनका इस्तेमाल करके अपने बंडल का विश्लेषण किया जा सकता है.

इस प्लग इन के साथ ऐप्लिकेशन को फिर से लोड करने पर, आपके पूरे बंडल का ज़ूम किया जा सकने वाला ट्रीमैप दिखता है.

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

इस्तेमाल न होने वाली लाइब्रेरी हटाएं

पिछली ट्रीमैप इमेज में, एक ही @firebase डोमेन में कुछ पैकेज दिए गए थे. अगर आपकी वेबसाइट को सिर्फ़ Firebase डेटाबेस कॉम्पोनेंट की ज़रूरत है, तो उस लाइब्रेरी को फ़ेच करने के लिए इंपोर्ट को अपडेट करें:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

इस बात पर ज़ोर देना ज़रूरी है कि बड़े ऐप्लिकेशन के लिए यह प्रक्रिया काफ़ी जटिल है.

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

अगर वेबपैक इस्तेमाल किया जा रहा है, तो ऐसे प्लगिन की सूची देखें जो लोकप्रिय लाइब्रेरी से, इस्तेमाल न होने वाले कोड को अपने-आप हटा देते हैं.

गै़र-ज़रूरी लाइब्रेरी हटाएं

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