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

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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