इस पृष्ठ का उद्देश्य उत्पादन वेबसाइटों के लिए प्रदर्शन अनुकूलन की समस्या से निपटने के तरीके पर अधिक सलाह देना है।
ऐसा प्रतीत होता है कि आपने रिएक्ट में React.lazy} andsuspense} का उपयोग करके रिएक्ट प्रोडक्शन वेबसाइट पर बंडल के हिस्सों को विभाजित करने का प्रयास किया; हालाँकि, इससे आपके वेब प्रदर्शन स्कोर में अपेक्षित सुधार नहीं हुआ।
लेकिन ऐसा क्यों है?
यह देखते हुए कि आपकी प्रोडक्शन वेबसाइट के लिए कुछ अतिरिक्त की आवश्यकता थी...
मुझे हाल ही में प्रोडक्शन वेबसाइट के प्रदर्शन को बढ़ाने का कर्तव्य सौंपा गया था। मैंने शुरू में सोचा था कि हमें प्रत्येक मार्ग को अधिक आलस्य से लोड करना चाहिए, लेकिन मुझे जल्द ही एहसास हुआ कि यह पहले ही किया जा चुका है।
मुझे भी आश्चर्य होने लगा था कि आगे क्या होगा।
मैंने वेबपैक बंडल एनलाइज़र प्लगइन स्थापित किया और उसके बाद प्रत्येक टुकड़े का विश्लेषण करने का प्रयास किया। उसके बाद, मेरे पास प्रदर्शन को बेहतर बनाने के बारे में बहुत सारे सुझाव थे।
Main.bundle.js
मुख्य बंडल का आकार बहुत बड़ा था जिसके कारण पार्सिंग समय के साथ-साथ डाउनलोडिंग समय में भी वृद्धि हो रही है।
main.bundle.js को कैसे तोड़ें?
मेरे मामले में मेरे मुख्य बंडल में बहुत सारा json है जो अनुवाद से संबंधित है जिससे मुख्य बंडल का आकार 1.5 एमबी बढ़ रहा था।
मैंने main.js बंडल से आलसी आयात का उपयोग करके अनुवाद हटा लिया। यह 40% प्रदर्शन स्कोर अनुकूलन देता है। लेकिन यह अभी तक नहीं हुआ है क्योंकि हम लाइटहाउस प्रदर्शन स्कोर 25 से 35 तक ही पहुंच पाए हैं।
तब मैंने अन्य संभावित बड़ी फ़ाइलों को देखना शुरू किया।
उनमें से एक मोमेंट जेएस है, जिसमें कई स्थान हैं जिनका उपयोग हम अपनी वेबसाइट के लिए नहीं कर रहे थे। मोमेंट जेएस को लाइटवेट लाइब्रेरी से बदलना इसे ठीक करने का एक तरीका है, लेकिन ऐसा करने के लिए अधिक कोड संशोधनों की आवश्यकता होगी और पूरी वेबसाइट का परीक्षण करने पर मेरा कार्यभार बढ़ जाएगा - कुछ ऐसा जो मैंने पहले नहीं किया था - जिससे अधिक त्रुटियां हो सकती हैं। फिर मैंने यह पता लगाने का निर्णय लिया कि उन अवांछनीय क्षेत्रों से कैसे छुटकारा पाया जाए; सौभाग्य से, एक वेबपैक प्लगइन पहले से ही उपलब्ध था। मैं उस प्लगइन [ContextReplacementPlugin] का उपयोग करके मोमेंट.जेएस फ़ाइल का आकार कम करने में सक्षम था।
हमारे साथ बने रहें और भी बहुत कुछ आने वाला है... धन्यवाद
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3