Dlaczego require.js wydaje się ładować wszystkie moje moduły podczas ładowania strony początkowej?

Question

Zajmuję się tworzeniem aplikacji szkieletowej pojedynczej strony przy użyciu requirejs, a dziś, kiedy wdrożyłem ją na naszym serwerze beta, odkryłem, że początkowe ładowanie strony trwało około 20 sekund, gdy pobierane były wszystkie skrypty.

Przypuszczałem to dlatego używałem tablicę zależnościach przy definiowaniu moduły tak:

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 
      // ... 
     } 
    } 
}); 

Które Wierzyłem oznaczało, że gdy główny moduł aplikacji został załadowany, każdy inny skrypt będzie ładowany, ze względu na fakt, że każdy moduł korzystał z tej metody.

Potem zmieniła sposób pobierania modułów, aby je jako Musiałem je poprzez wywołanie require('...') bezpośrednio kiedy muszę je tak:

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

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

Jednak ku mojemu zdziwieniu, po uruchomieniu aplikacji ponownie i sprawdzania zakładka sieci konsoli programistów Chrome - zobaczyłem, że tak jak poprzednio aplikacja pobiera wszystkie moje moduły i mam ten sam czas ładowania strony.

Czy całkowicie pomijałem tutaj punkt? Miałem wrażenie, że skrypty będą wykonywane przy każdym żądaniu. Czy to nie prawda?

Answer 1

W celu asynchronicznie załadować moduły AMD Należy zadzwonić wymagać i dostarczenie zwrotnego funkcji, która zostanie wywołana, gdy żądany moduł został załadowany:

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

Przykładowy kod podany nazywa require('InboxView') w synchronicznym stylu . Ponieważ używasz składni „sugar”, RequireJS poddadzą kodu, znaleźliśmy żadnych synchronicznych połączeń do require() i dodać te zależności do listy zależności najwyższego poziomu modułu, w efekcie daje to:

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 
    } 
    }); 
}); 

... stąd dlaczego wszystkie moduły zostały natychmiast załadowane.

Dodaj wywołanie zwrotne asynchroniczne do wymagania i powinieneś być w porządku. Ponadto, jeśli myślisz o tym, w jaki sposób działałby twój kod, gdyby RequireJS czekał na załadowanie modułu pod numer InboxView, dopóki trasa nie zostanie uruchomiona bez zablokowania połączenia require, dopóki ładowanie nie zostanie zakończone? :)