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

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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