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

Houssein Djirdeh

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

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

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

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

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

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

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

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

DevTools, JavaScript फ़ाइल का साइज़ दिखाता है.

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

कवरेज टैब.

Node CLI के ज़रिए Lighthouse का पूरा कॉन्फ़िगरेशन तय करके, इस्तेमाल न हुए JavaScript कोड को कम करने वाला ऑडिट चलाया जा सकता है. इससे यह पता चलता है कि आपके ऐप्लिकेशन के साथ कितना इस्तेमाल न हुआ कोड शिप किया गया है.

इस्तेमाल न किए गए JavaScript की रिपोर्ट को कम करें.

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

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

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

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

Webpack बंडल ऐनालाइज़र का ट्रीमैप व्यू.

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

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

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

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

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

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

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

इसे आज़माएं: इस्तेमाल न किए गए कोड हटाएं.

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

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