minified bundle JS और बाहरी पुस्तकालय

Question

मैं जितनी ज्यादा हो सके अपनी वेबसाइट पर HTTP अनुरोध को कम करना चाहता हूं।

क्या यह सभी जेएस को एक बड़ी मिनीफाईड फ़ाइल में छोटा करना है, जिसमें jQuery जैसे बाहरी पुस्तकालय शामिल हैं?

Answer 1

हां; यह पूरी तरह से ठीक है, और सामान्य अभ्यास है।

हालांकि, आप बंडल में शामिल करने के बजाय Google की सीडीएन से jQuery लोड करना पसंद कर सकते हैं।
यह उन लोगों के लिए समय बचाता है जिनके पास पहले से ही उनके कैश में Google का jQuery है।

Answer 2

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

Answer 3

मैं अन्य उत्तर यहाँ है कि यह ठीक है के साथ सहमत हैं, लेकिन इन विचारों जोड़ना होगा:

• SLaks उल्लेख के रूप में, मैं यह jQuery के लिए गूगल CDN उपयोग करने के लिए बेहतर है लगता है। Jquery लगभग 60k है और मुझे विश्वास है कि अधिकांश ने Google से अपने ब्राउज़र पर कैश किया है। यदि आप इस सीडीएन का उपयोग करते हैं, तो आपके उपयोगकर्ताओं के एक बड़े हिस्से को इसे डाउनलोड करने की आवश्यकता नहीं होगी। इसके अलावा, अगर आप स्वयं सीडीएन से सेवा नहीं कर रहे हैं, तो आपको सीडीएन का अतिरिक्त लाभ मिलता है।

• मुझे लगता है कि आप इस एकल जेएस को सिर से लोड करने की योजना बना रहे हैं। यह आमतौर पर एक बुरा विचार है। सिर में जावास्क्रिप्ट शरीर की लोडिंग को अवरुद्ध कर देगा। आप सिर में जावास्क्रिप्ट को न्यूनतम राशि तक सीमित करना चाहते हैं जो आपके पृष्ठ की अन्य स्क्रिप्ट्स पर निर्भर हो। इसमें अक्सर jquery शामिल है। तो अगर इसका मतलब अतिरिक्त अनुरोध है, तो भी मुझे दृढ़ विश्वास है कि स्क्रिप्ट के साथ शीर्ष पर एक स्क्रिप्ट होना बेहतर है जिसमें आपके शरीर को प्रतिपादित करने के लिए निर्भरताएं शामिल हैं और अंत में दूसरी, बड़ी स्क्रिप्ट जिसमें बाकी सब कुछ शामिल है। या अंत में एक स्क्रिप्ट भी बेहतर है जो शीर्ष पर एक गतिशील रूप से निर्मित स्क्रिप्ट टैग बनाता है जो आपके बाकी जेएस को असीमित रूप से लोड करता है।

यहाँ पेज स्क्रिप्ट के उस छोर का एक उदाहरण है:

<script type="text/javascript"> 

    (function() { 

     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.async = true; 
     script.src = 'http://mysite/js/mybigminifiedandmergedscript.js'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(script, s); 
    })(); 

</script> 

• आप ज्यादा स्क्रिप्ट है कि अगर सब पर लोड नहीं अपने पृष्ठ के उपयोगकर्ता अनुभव के साथ हस्तक्षेप नहीं होता है, तो मैं इसे एक तीसरी लिपि में डाल दूंगा जो उपरोक्त स्क्रिप्ट की तरह लोड हो गया है लेकिन दस्तावेज पूरा होने तक स्थगित कर दिया गया है। इस तरह, वह स्क्रिप्ट पेज के "कथित" प्रदर्शन में हस्तक्षेप नहीं करेगी। यह बिना कताई ब्राउज़र आइकन या प्रगति पट्टी के चुपचाप लोड करता है।

• यदि आप .NET का उपयोग कर रहे हैं, तो मैं आपको अपने ओएसएस RequestReduce का उपयोग करने के लिए प्रोत्साहित करता हूं जो सीएसएस और जावास्क्रिप्ट को कम करता है और साथ ही स्प्राइट्स और फ्लाई पर छवियों को अनुकूलित करता है। आपके कोड को बदलने की जरूरत के बिना सभी। यह Nuget और RequestReduce.com पर उपलब्ध है।

Answer 4

हमेशा के रूप में - यह एप्लिकेशन पर निर्भर करता है। हालांकि मैं उपर्युक्त सभी बिंदुओं से सहमत हूं, एक पुराने फैशन इंजीनियरिंग दृष्टिकोण को थोड़ा अनुकूलन के लिए हमेशा इंटरनेट से कनेक्ट होने की निर्भरता बनाने के लिए बाउंस होगा।

हमारे पास एक ब्राउज़र एप्लिकेशन है जिसके लिए jquery, jquery ui, d3js, उनके संबंधित सीएसएस और निश्चित रूप से कार्य करने के लिए हमारे स्वयं के कोड की आवश्यकता होती है। इसके अलावा ग्राहकों को वेरिएंट लेआउट उत्पन्न करने के लिए स्रोत एचटीएमएल को संपादित करने में सक्षम होना चाहिए।

इसलिए हमने एक साधारण "स्पर्श न करें" लाइन का चयन किया है जहां सभी जादू जेएस और सीएसएस झूठ बोलते हैं। हमने सीडीएन दृष्टिकोण से भी ऑप्ट आउट किया है ताकि एचटीएमएल को ऑफ़लाइन संपादित किया जा सके

इसलिए हमारे पास एक छोटा प्रदर्शन प्रदर्शन मूल्य पर एक बहुत अधिक मजबूत समाधान है।

बेन