सीडीएन बनाम एक फाइल स्थानीय रूप से कई फाइलें


93

मेरी वेबसाइट में लगभग 10 थर्ड पार्टी जावास्क्रिप्ट लाइब्रेरियों जैसे jQuery, jQuery UI, prefixfree, कुछ jQuery प्लगइन्स और मेरे अपने जावास्क्रिप्ट कोड का भी उपयोग किया गया है। वर्तमान में मैं सीडीएन से बाहरी पुस्तकालयों को खींचता हूं जैसे कि Google सीडीएन और क्लाउडफेयर। मैं सोच रहा था कि एक बेहतर तरीका क्या है:

  1. सीडीएन से बाहरी पुस्तकालयों को खींचना (जैसे मैं आज करता हूं)।
  2. सभी फाइलों को एक ही js और एक css फाइल में मिलाकर स्थानीय स्तर पर संग्रहित करना।

जब तक उन्हें समझाया जाता है तब तक किसी भी राय का स्वागत किया जाता है। धन्यवाद :)

जवाबों:


139

CDN का मान उस उपयोगकर्ता की संभावना में निहित है जो पहले से ही उस CDN से उसी फ़ाइल को कॉल करने वाली किसी अन्य साइट पर गया है, और फ़ाइल के आकार के आधार पर तेजी से मूल्यवान हो जाता है। यह मामला होने की संभावना फ़ाइल की सर्वव्यापीता और CDN की लोकप्रियता के साथ बढ़ जाती है।

इसे ध्यान में रखते हुए, एक लोकप्रिय सीडीएन से अपेक्षाकृत बड़ी और लोकप्रिय फ़ाइल को खींचना पूर्ण समझ में आता है। jQuery, और, कुछ हद तक, jQuery UI, इस बिल को फिट करते हैं।

इस बीच, संक्षिप्त फ़ाइलें छोटी फ़ाइलों के लिए समझ में आती हैं, जिनके बदलने की संभावना नहीं है - आपके आमतौर पर उपयोग किए जाने वाले प्लगइन्स इस बिल में फिट होंगे, लेकिन आपका मुख्य एप्लिकेशन-विशिष्ट कोड संभवतः नहीं: यह सप्ताह से सप्ताह में बदल सकता है, और यदि आप ' अपने सभी अन्य फ़ाइलों के साथ इसे फिर से जोड़ना, आपको उपयोगकर्ता को फिर से सब कुछ डाउनलोड करने के लिए मजबूर करना होगा।

HTML5 बॉयलरप्लेट इसके लिए एक सामान्य समाधान प्रदान करने का एक बहुत अच्छा काम करता है:

  1. आधुनिकीकरण सिर में स्थानीय से भरा हुआ है: यह बहुत छोटा है और उदाहरण के लिए उदाहरण से काफी भिन्न होता है, इसलिए इसका सीडीएन से स्रोत होने का कोई मतलब नहीं है और यह उपयोगकर्ता को आपके द्वारा इसे लोड करने के लिए बहुत अधिक चोट नहीं पहुंचाएगा। सर्वर। इसे सिर में लगाया जाता है क्योंकि सीएसएस इसका उपयोग कर रहा हो सकता है, इसलिए आप चाहते हैं कि यह प्रभाव प्रदान किया जाए कि इससे पहले कि शरीर को रेंडर किया जाए। जब वे लोड करते हैं और निष्पादित करते हैं, तो आपकी भारी स्क्रिप्ट को रेंडरिंग ब्लॉक करने से रोकने के लिए बाकी सब कुछ नीचे चला जाता है।
  2. CDN से jQuery, क्योंकि लगभग हर कोई इसका उपयोग करता है और यह काफी भारी है। आपकी साइट पर जाने से पहले उपयोगकर्ता के पास शायद ही यह कैश होगा, जिस स्थिति में वे इसे तुरंत कैश से लोड करेंगे।
  3. आपकी सभी छोटी 3 पार्टी निर्भरताएं और कोड स्निपेट जो plugins.js आपके अपने सर्वर से लोड की गई फ़ाइल में बहुत अधिक परिवर्तन की संभावना नहीं रखते हैं । यह पहली बार उपयोगकर्ता के आने और बाद की यात्राओं पर कैश से लोड होने पर दूर की समाप्ति हेडर के साथ कैश हो जाएगा।
  4. आपका मुख्य कोड main.jsइस तथ्य को ध्यान में रखता है कि आपका आवेदन तर्क सप्ताह से सप्ताह या महीने से महीने में बदल सकता है। इस तरह जब आपने बग को ठीक किया है या उपयोगकर्ता द्वारा एक पखवाड़े का दौरा करने पर नई कार्यक्षमता पेश की है, तो यह ताजा लोड हो सकता है जबकि ऊपर की सभी सामग्री कैश से लाई जा सकती है।

अपने अन्य प्रमुख पुस्तकालयों के लिए, आपको उन्हें व्यक्तिगत रूप से देखना चाहिए और खुद से पूछना चाहिए कि क्या उन्हें jQuery के लीड का पालन करना चाहिए, अपने स्वयं के सर्वर से व्यक्तिगत रूप से लोड किया जाना चाहिए, या संक्षिप्त होना चाहिए। आप उन फैसलों में कैसे आ सकते हैं, इसका एक उदाहरण:

  • कोणीय अविश्वसनीय रूप से लोकप्रिय है, और बहुत बड़ा है। इसे सीडीएन से प्राप्त करें।
  • ट्विटर बूटस्ट्रैप लोकप्रियता के समान स्तर पर है, लेकिन आपको इसके घटकों का अपेक्षाकृत पतला चयन मिला है, और यदि उपयोगकर्ता के पास पहले से यह नहीं है, तो हो सकता है कि यह पूरी तरह से डाउनलोड करने के लिए उन्हें प्राप्त करने के लायक न हो। यह कहने के बाद, कि यह आपके कोड के बाकी हिस्सों में फिट बैठता है, बहुत आंतरिक है, और आप इसे पूरी साइट के पुनर्निर्माण के बिना इसे बदलने की संभावना नहीं रखते हैं - इसलिए आप इसे स्थानीय रूप से होस्ट करना चाहते हैं, लेकिन इसे अपने से अलग रखने वाली फ़ाइलों को रखना चाहते हैं। मुख्य plugins.js। इस तरह आप हमेशा plugins.jsबूटस्ट्रैप कोर के सभी डाउनलोड करने के लिए उपयोगकर्ता को मजबूर किए बिना अपने बूटस्ट्रैप एक्सटेंशन के साथ अपडेट कर सकते हैं ।

लेकिन कोई अनिवार्यता नहीं है - आपका माइलेज अलग-अलग हो सकता है।


4
बहुत अच्छा जवाब। ब्राउज़र कैश को आपके लिए काम करने दें। मुझे लोकप्रिय पुस्तकालयों को समवर्ती फ़ाइलों से अलग करने का विचार पसंद है।
जॉन

3
बहुत उपयोगी विश्लेषण
उपयोगकर्ता

8
बहुत अच्छा जवाब। इसके अलावा उल्लेख के लायक है, कि CDN उपयोगकर्ताओं को एक "स्थानीय" या कम से कम करीब (उपयोगकर्ता के लिए) सर्वर से फ़ाइलों को खींचने की अनुमति देगा। इसलिए, यदि आपका सर्वर यूरोप में है, उदाहरण के लिए, दक्षिण अमेरिका या रूस के उपयोगकर्ता अभी भी फ़ाइलों को अपेक्षाकृत तेज़ी से प्राप्त करेंगे।
एच। वॉलर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.