CSS या JS को मर्ज करते समय, प्रत्येक पृष्ठ प्रकार के लिए एक नई फ़ाइल बनाई जाती है


15

हमारे पास बहुत सी छोटी सीएसएस और जेएस फाइलें हैं और मर्जिंग को सक्षम करना एक अच्छा विकल्प है।

CSS और JS फ़ाइलों में से कई का उपयोग हर पृष्ठ (होम पेज, श्रेणी पृष्ठ, उत्पाद विवरण पृष्ठ) पर किया जाता है।

जब भी हमने देखा कि प्रत्येक पृष्ठ पर एक अलग मर्ज की गई फ़ाइल फिर से लोड की गई है, यहां तक ​​कि निहित सीएसएस को ओवरलैपिंग होना चाहिए।

हम इससे कैसे बच सकते हैं और अधिक डेटा का पुन: उपयोग कर सकते हैं?


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

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

मैं "मर्ज जावास्क्रिप्ट फाइल्स" फीचर की खोज कर रहा था, ताकि कैश बस्टिंग में मदद मिल सके। उम्मीद है कि यह टिप्पणी खोज इंजन को अपडेट करती है और डंप को रोकती है।
रे फॉस

जवाबों:


14

संक्षिप्त उत्तर: Magento के JS / CSS विलय कार्य को कभी भी सक्षम न करें। कुल मिलाकर यह व्यक्तिगत रूप से प्रत्येक संपत्ति को भेजने की तुलना में एक विशिष्ट चेकआउट के जीवन चक्र में प्रदर्शन के लिए बदतर है।

लंबा उत्तर: आपको केवल उपयोगकर्ताओं के लिए एक सीएसएस फ़ाइल परोसी जानी चाहिए। सभी सीएसएस डाउनलोड होने तक कई फाइलें रेंडरिंग को ब्लॉक कर देती हैं। जब तक आप सीएसएस की एक बड़ी राशि की सेवा नहीं कर रहे हैं तब तक यह सब एक बार में भेजने के लिए फायदेमंद है, फिर ब्राउज़र ने इसे कैश कर दिया है। Sass या LESS जैसे पूर्व-प्रोसेसर का उपयोग करके इस कदम को अपनी निर्माण प्रक्रिया में लाया जा सकता है बजाय इसके कि Magento को अक्षमता के इसे करने दें।

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

फ़ोमन स्पीडस्टर एडवांस्ड एक्सटेंशन, डुप्लिकेट (आज) के बिना समझदारी से संपत्ति के संयोजन के लिए आपका सबसे अच्छा दांव है।

आप Magento 1.x आर्किटेक्चर द्वारा कुछ हद तक सीमित हैं जो फ्रंटएंड प्रदर्शन के लिए खराब प्रथाओं के ढेर के साथ शुरू होता है। उस जहाज के पाठ्यक्रम को बदलना यथार्थवादी नहीं है। Magento 2 में योगदान करें।


1
"Magento के लिए योगदान 2."
3

6

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

पृष्ठ से:

Javascript और CSS फाइलों को मिलाकर, कंप्रेस करके और कैशिंग करके अपने स्टोर को गति दें। फ़ोमन स्पीडस्टर कई जावास्क्रिप्ट और सीएसएस फ़ाइलों को एक एकल जावास्क्रिप्ट फ़ाइल और एकल सीएसएस फ़ाइल में जोड़ता है, ताकि तेज पृष्ठ लोड समय को सक्षम किया जा सके।


4
उल्लेख के लिए धन्यवाद। मैं अपने अन्य मुफ्त स्पीडस्टर एक्सटेंशन (स्पीडस्टर एडवांस्ड) को इंगित करना चाहता हूं, जो मर्ज किए गए जावास्क्रिप्ट फ़ाइलों में दोहरे उतार-चढ़ाव को कम करने के लिए एक थीम ऑप्टिमाइज़र के साथ आता है - कृपया मेरी प्रस्तुति इबीसा डेवलपर सम्मेलन 2012 में यहां देखें magento-developers-paradise.com विवरण के लिए / WP- सामग्री / अपलोड /…
फोमन में क्रिस्टोफ़

मैंने बहुत परीक्षण किया। यह सभी अतिरेक से छुटकारा नहीं देता है, लेकिन यह कुछ से छुटकारा दिलाता है। और यह सबसे अच्छा मिनीफ़ायर नहीं है, लेकिन अतिरेक हटाने से आप एक शेल स्क्रिप्ट के साथ अपने दम पर क्या कर सकते हैं, इसकी भरपाई करता है। @KristofatFooman यदि आप सिस्टम का उपयोग कर सकते हैं uglifyjs --compressऔर टिप्पणियों से बेहतर तरीके से निपट सकते हैं, तो आप मेरे कोड के साथ लगभग 4% छोटा सुधार कर सकते हैं। im नोड से uglifyjs v3 का उपयोग कर रहा है।
रे फॉस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.