क्यों आवश्यक है .js प्रारंभिक पृष्ठ लोड पर मेरे सभी मॉड्यूल लोड कर रहा है?

Question

मैं requjs का उपयोग कर एक एकल पेज रीढ़ की हड्डी ऐप विकसित कर रहा हूं, और आज जब मैंने अपने बीटा सर्वर पर तैनात किया, तो मुझे पता चला कि प्रारंभिक पृष्ठ लोड लगभग 20 सेकंड था जब यह सभी स्क्रिप्ट प्राप्त करता था।

मैं मान लिया था, क्योंकि मैं इस निर्भरता सरणी का उपयोग कर रहा था जब इतनी तरह मॉड्यूल को परिभाषित:

define([ 
    'ui', 
    'models/user', 
    'collections/campaigns', 
    'collections/groups', 
    'collections/keywords', 
    'collections/inboxes', 
    'collections/templates', 
    'collections/contacts', 
    'router' 
], function (Ui, UserDetails, Campaigns, Groups, Keywords, Inboxes, Templates, Contacts, Router) { 

    return { 
     start: function() { 
      // ... 
      // initialize and start app 
      // ... 
     } 
    } 
}); 

कौन सा मैं मानना ​​था मतलब है कि जब मुख्य आवेदन मॉड्यूल लोड किया गया था, हर दूसरे स्क्रिप्ट लोड किया जाएगा, की वजह से तथ्य यह है कि प्रत्येक एकल मॉड्यूल इस विधि का उपयोग कर रहा था। फिर,

define(function (require) { 
    return Backbone.Router(function() { 
     // ... 
     // route initializtion etc 
     // ... 

     inbox: function (routeVar) { 
      var InboxView = require('InboxView'); 
      this.inboxView = new InboxView(); 
      // render view etc 
     } 
    }); 
}); 

हालांकि मेरे आश्चर्य करने के लिए एप्लिकेशन चल रहा पर और जाँच:

मैं तो मॉड्यूल प्राप्त करते समय उन्हें प्राप्त करने के रूप में मैं उन्हें require('...') सीधे फोन करके की जरूरत है जब मैं इस तरह उन्हें जरूरत के तरीके को बदल दिया क्रोम डेवलपर कंसोल का नेटवर्क टैब - मैंने देखा कि एप्लिकेशन के पहले मेरे सभी मॉड्यूल ला रहे हैं, और मुझे एक ही पृष्ठ लोड समय मिल रहा है।

क्या मैं यहां पूरी तरह से इस बिंदु को याद कर रहा हूं? जैसा कि मैं इस धारणा के तहत था कि स्क्रिप्ट प्रत्येक आवश्यकता के कॉल पर लाई जाएगी। क्या यह सही नहीं है?

Answer 1

आदेश एसिंक्रोनस रूप से एएमडी मॉड्यूल लोड करने के लिए आप की आवश्यकता होती है और एक समारोह कॉलबैक कि जब अनुरोध मॉड्यूल लोड किया गया है बुलाया जाएगा प्रदान कॉल चाहिए:

require(['InboxView'], function(InboxView) { 
    // Do something with InboxView here... 
}); 

नमूना कोड आप एक तुल्यकालिक शैली में require('InboxView') कहा जाता है, बशर्ते । क्योंकि आप "sugar" सिंटैक्स का उपयोग कर रहे हैं, RequireJS अपने कोड निरीक्षण करेंगे, require() के लिए किसी भी तुल्यकालिक कॉल पाते हैं और आप इस दे मॉड्यूल के शीर्ष-स्तरीय निर्भरता सूची में उन निर्भरता को जोड़ने के प्रभाव में:

define(['require', 'InboxView'], function (require) { 
    return Backbone.Router(function() { 
    // ... 
    // route initializtion etc 
    // ... 

    inbox: function (routeVar) { 
     var InboxView = require('InboxView'); 
     this.inboxView = new InboxView(); 
     // render view etc 
    } 
    }); 
}); 

... इसलिए आपने तुरंत लोड किए गए सभी मॉड्यूल क्यों देखा।

आवश्यकतानुसार async कॉलबैक जोड़ें और आपको ठीक होना चाहिए। इसके अलावा, यदि आप इसके बारे में सोचते हैं, तो यदि आपका कोड InboxView के लिए मॉड्यूल लोड करने के लिए मॉड्यूल लोड करने का इंतजार कर रहा है, तो आपका कोड कैसे काम करेगा जब तक कि require कॉल अवरुद्ध किए बिना कॉल अवरुद्ध होने तक कॉल अवरुद्ध हो जाए? :)