क्या मुझे js / css फाइलों को एक ही फाइल में मिलाना चाहिए?

11

दोनों YSlow और गूगल के पृष्ठ गति ऐड-ऑन एक एकल फाइल में संयोजन की सलाह देते हैं स्क्रिप्ट (और शैली) फ़ाइलें प्रत्येक HTTP अनुरोध की संख्या को कम करने के लिए, और मैं निश्चित रूप से इस के बिंदु देख सकते हैं जब स्क्रिप्ट फ़ाइलें पूरी साइट में संगत कर रहे हैं, लेकिन एक वेब एप्लिकेशन के लिए जिसकी साइट पर अलग-अलग आवश्यकताएं हैं।

जिस तरह से मैं इसे देखता हूं उसके कुछ विकल्प हैं:

साइट पर उपयोग की जाने वाली सभी फ़ाइलों को मिलाएं, और प्रत्येक पृष्ठ को एक ही संयुक्त फ़ाइल मिलती है - डाउनसाइड अप्रयुक्त सामग्री है जो स्क्रिप्ट को अव्यवस्थित कर रही है (और किसी भी घटक स्क्रिप्ट में परिवर्तन होने पर पहले लोड भी भारी हो जाता है)
फ़ाइलों को प्रति पृष्ठ के आधार पर संयोजित करें - नीचे की ओर प्रत्येक पृष्ठ अलग-अलग आवश्यकताओं के साथ एक अलग संयुक्त फाइल मिलती है (प्रत्येक पृष्ठ प्रकार के लिए भारी पहला भार)
अनुशंसाओं की सख्त 'एक फ़ाइल केवल' व्याख्या को अनदेखा करें और उचित रूप में कई फ़ाइलों में पृष्ठ लोड है, कैशिंग उम्मीद के साथ सामान्य मामले में HTTP अनुरोधों की संख्या को नकारते हुए - नकारात्मक पक्ष प्रत्येक पृष्ठ पर HTTP अनुरोधों की संख्या है

विचार?

optimization css javascript

— Cebjyre
स्रोत

आप यह गलत कर रहे है। या तो भागों को अलग-अलग फाइलों में अलग करें और वार्मअप हिट (अनुरोधों और ठंडे कैश के बड़े # के कारण) को लें या प्रोग्राम फाइल को स्रोत फ़ाइलों के साथ जोड़ दें और हार्ड लिंक के अनुसार सिर्फ 1 js, css, html पृष्ठ परोसें। विभिन्न माइम-प्रकारों के साथ फ़ाइलों को मिलाना = ख़राब करना।

— इवान प्लैस

और ... जैसे @ लॉरी स्मिथमियर ने अपने जवाब में कहा, उन फाइलों के लिए प्रारंभिक कैश वार्मिंग लागतों से पूरी तरह से बचने के लिए सामान्य पुस्तकालय (एक्स-जेकरी) देने के लिए एक सीडीएन (पूर्व Google) का उपयोग करें।

— इवान प्लैस

11

विकल्प 2 सबसे खराब है; इसका मतलब है कि जेएस लिपियों के एक अलग संयोजन के साथ हर पृष्ठ एक HTTP अनुरोध में परिणाम होगा। यह प्रदर्शन को बहुत खराब कर देगा।

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

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

एक टिप हालांकि; यदि आप पहले से ही नहीं हैं तो उन्हें स्वचालित रूप से मर्ज करें!

— थॉमस बोनी
स्रोत

2

हालाँकि आपको अपने होम पेज / लैंडिंग पेजों द्वारा दिए गए शुरुआती इंप्रेशन के बारे में पता होना चाहिए। यदि पहला पृष्ठ एक आगंतुक देखता है लोड करने के लिए धीमा है वे एक दूसरे पृष्ठ को देखने के लिए परेशान नहीं कर सकते हैं।

— जूल

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

— ट्रैविस नॉर्थकट

4

मैं आम तौर पर "वैश्विक जावास्क्रिप्ट" - jQuery और आम प्लगइन्स को एक ही फाइल में संयोजित करता हूं, और फिर आवश्यकता पड़ने पर अलग-अलग फ़ाइलों के रूप में अतिरिक्त प्लगइन्स की सेवा करता हूं।

उदाहरण के लिए, एक साइट जो मैं चलाती हूं, उनमें से कई पृष्ठ में डेटा टेबल होते हैं, इसलिए मेरे पास global.jsjQuery, DataTables और SuperFish (मेरे मेनू के लिए) है। साइट पर दो पृष्ठ हैं जो "लाइटबॉक्स" का उपयोग करते हैं इसलिए मेरे पास उन दो पृष्ठों के लिए एक अलग स्क्रिप्ट है।

CSS के लिए, मैं सिर्फ पूरी साइट के लिए एक ही फाइल परोसता हूं और CSS को यथासंभव सामान्य बनाने की कोशिश करता हूं - ज्यादातर पेजों में केवल कुछ ही सीएसएस तत्व होते हैं।

— DisgruntledGoat
स्रोत

1

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

यदि आपके जेएस को पर्याप्त रूप से दूसरी श्रेणी में धकेला जा सकता है, तो आप अपने उपयोगकर्ताओं के लिए एक बेहतर अनुभव बनाते हुए, पेज की कथित शुरुआती लोड गति में सुधार कर सकते हैं।

— JasonBirch
स्रोत

1

मैं उन सभी के संयोजन का सुझाव नहीं दूंगा। यदि आप एक सामान्य पुस्तकालय का उपयोग कर रहे हैं, तो आप अपने javascripts देने के लिए एक CDN का लाभ उठा सकते हैं। फिर आप ब्राउज़र कैशिंग (अन्य साइटों को उसी CDN का उपयोग कर रहे हैं) और वितरित वितरण का लाभ उठा सकते हैं। Microsoft और Google के पास प्रत्येक समाधान है (मैंने ईमानदारी से या तो उपयोग नहीं किया है, लेकिन मैं निश्चित रूप से शुरू करने जा रहा हूं) और अन्य भी हो सकते हैं। संबंधित नोट पर, SO का यह प्रश्न है:

जब ब्राउज़र स्वचालित रूप से जावास्क्रिप्ट कैश को साफ करता है?

और पहला उत्तर ठोस सोना है।

— लैरी स्मिथमियर
स्रोत

2

मैं पहले से ही Google द्वारा होस्ट की गई jQuery लाइब्रेरी का उपयोग कर रहा हूं, लेकिन मेरा मतलब था कि साइट विशिष्ट फ़ाइलों को संदर्भित करने के लिए (यानी स्टैक एक्सचेंज साइटों के लिए, जब कोई प्रश्न पूछें तो आपको इसी तरह के प्रश्नों की खोज करने के लिए स्क्रिप्ट मिलनी चाहिए, रेंडर करने के लिए स्क्रिप्ट मार्कडाउन और टैग सुझाव, जिनमें से सभी को अलग-अलग फाइलों में विकसित किया जाना चाहते हैं) हो सकता है। एक तरफ के रूप में, यदि आप Google jQuery होस्ट किए गए js का उपयोग करते हैं, जबकि 1.4 और 1.4.2 दोनों आपको एक ही सामग्री (फिलहाल) देंगे, 1.4.2 एक वर्ष के लिए कैश किया जाता है, लेकिन 1.4 केवल एक घंटे के लिए कैश किया जाता है।

— Cebjyre

शांत टिप! होस्ट किए गए jQuery पर कैशिंग अवधि में अंतर्दृष्टि के लिए धन्यवाद।

— लैरी स्मिथमेयर