जावास्क्रिप्ट लोड-टाइम के लिए कौन सा बेहतर है: सभी को एक बड़ी फ़ाइल में संपीड़ित करें या सभी असीमित रूप से लोड करें?

Question

एक साधारण सवाल है कि मुझे यकीन नहीं है कि इसका संक्षिप्त जवाब है या नहीं!

विवरण
मैं जावास्क्रिप्ट का एक फ़ाइलें है कि एक वेबसाइट यहाँ में लोड करने के लिए कर रहे हैं उनके बारे में कुछ नोट है:

• वे सभी कर रहे हैं एक ही डोमेन से आता है (कोई क्रॉस डोमेन लोड हो रहा है की जरूरत है)
• वे वेबसाइट के चारों ओर समान हैं।
• कई फाइलें हैं, जैसे jQuery, और 5 अन्य प्लगइन्स प्लस मेरी अपनी एप्लिकेशन स्क्रिप्ट जो उन पर आधारित है।
• उनका आकार सभी संकुचित = 224KB, (मैं एक फाइल तो में सभी फाइलों गठबंधन मैं उन्हें सेक एक ही बार में YUI कंप्रेसर का उपयोग कर 2

समस्या
मैंने सुना है कि 224KB करने के लिए आदर्श नहीं है एक फ़ाइल में रहें! और इसे अधिकतम 44 केबी के साथ कई फाइलों में विभाजित किया जाना चाहिए .. जब मैंने यह सुना है तो मुझे याद नहीं है और मुझे यकीन नहीं है कि इसे अधिक फ़ाइलों में विभाजित करना प्रभावी है, लेकिन यह सच है कि 224 केबी को पहली बार लोड करने में काफी समय लगता है, मान लीजिए कि वेबसाइट छवियों और सीएसएस के साथ लोड की गई है।

मेरे पास है JavaScript फ़ाइल के प्रारंभिक लोड हो रहा है के लिए की जरूरत को कम से कम और नीचे पर डाल दिया, अब तक यह एक अच्छी प्रगति है, लेकिन मैं समय Source हासिल करने के लिए HTML के साथ assynchounosly इसे लोड करने की आवश्यकता है और बनाने के लिए निर्णय है:

हाँ या ना?
इसे एक संपीड़ित बड़ी फ़ाइल में रखें? या उन्हें कई संपीड़ित फ़ाइल में विभाजित करने के लिए और एक असीमित रूप से लोड किया गया है (मुझे निर्भरता से संबंधित समस्याओं को संभालने के बारे में पता है)?

Answer 1

यह इस बात पर निर्भर करता है कि साइट क्या है और इसके लिए पहले लोड समय कितना महत्वपूर्ण है।

हालांकि, मैं शायद JQuery लोड करता हूं और सार्वजनिक सीडीएन से ऐसी चीजें लोड करता हूं। एक बड़ा फायदा यह है कि यह पहले से ही कैश किया जा सकता है भले ही वे आपकी साइट पर कभी नहीं गए हों।

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Cappuccino टीम एक फ़ाइल का एक बड़ा समर्थक है - वे एक जावास्क्रिप्ट रूपरेखा बनाते हैं। उनके उपकरण से बने ऐप्स से कुछ लोड समय होने की उम्मीद है।

http://cappuccino.org/discuss/2009/11/11/just-one-file-with-cappuccino-0-8/

Answer 2

इस प्रश्न का कोई सटीक उत्तर नहीं है। यह बहुत अधिक निर्भर करता है कि आप उन फ़ाइलों का उपयोग कैसे कर रहे हैं।

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

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

Answer 3

एक सार्वजनिक CDN से लोड हो रहा है JQuery का एक अन्य लाभ और संबंधित वृद्धि हुई हैं गंतव्य से अनुरोध। मेरा मानना ​​है कि क्लाइंट प्रति डोमेन 2 अनुरोधों तक ही सीमित है, इसलिए Google से jquery लोड करके, jquery से एक प्लगइन और अपने कस्टम ऐप कोड को अपने डोमेन से, ब्राउज़र पहले दो के लिए प्रतीक्षा करने के बजाय इन समवर्ती रूप से निष्पादित कर सकता है और फिर तीसरा अनुरोध जारी करना

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

Answer 4

यहां हमने अपना वेब ऐप तेजी से करने के लिए किया है।

मुख्य जेएस और सीएसएस फ़ाइलें संपीड़ित हैं और HTML मार्कअप के साथ इनलाइन डाल दी गई हैं।
एचटीएमएल के सफेद रिक्त स्थान हटा दिए जाते हैं और छवियों को शेल स्क्रिप्ट द्वारा data:image/png में परिवर्तित कर दिया जाता है।

आकार ~ 400kb है लेकिन कैश और gzipped।
वेब ऐप का मोबाइल संस्करण समान है लेकिन ~ 250kb पर है। इसका मतलब है कि पूरा ऐप एक ही http कॉल में निष्पादन योग्य की तरह चलाने के लिए तैयार है।

फिर एक दूसरा http कॉल डेटा (JSON) प्राप्त करता है, और हम टेम्पलेट्स के रूप में पृष्ठ में मौजूदा मार्कअप का उपयोग करके HTML में इसे प्रस्तुत करने के लिए PURE का उपयोग करते हैं।

ऐप मॉड्यूल में विभाजित है, केवल सामान्य मॉड्यूल इस तरह से पहले से लोड किए गए हैं।
उपयोगकर्ता द्वारा अनुरोध किए जाने पर अन्य लोग आ रहे हैं।