¿Por qué require.js parece estar cargando todos mis módulos en la carga de la página inicial?

Question

Estoy desarrollando una aplicación de red troncal de una sola página utilizando requirejs, y hoy, cuando implementé en nuestro servidor beta, descubrí que la carga inicial de la página era de alrededor de 20 segundos mientras recuperaba todos los scripts.

I supone que esto era debido a que estaba usando la matriz de dependencia en la definición de los módulos de este modo:

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

Qué yo creía significaba que cuando el módulo principal de la aplicación se cargó, se carga cada otro script, debido a el hecho de que cada módulo estaba usando este método.

entonces cambió el método de ir a buscar módulos de conseguir como los necesitaba llamando require('...') directamente cuando los necesito como esto:

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

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

Sin embargo, para mi sorpresa, al ejecutar de nuevo la aplicación y el control de la pestaña de red de la consola de desarrolladores de chromes: lo vi como antes de que la aplicación vaya a buscar todos mis módulos, y obtengo el mismo tiempo de carga de la página.

¿Me falta completamente el punto aquí? Como tenía la impresión de que los scripts se buscarían en cada llamada de require. ¿No es eso correcto?

Answer 1

Para cargar de forma asíncrona módulos AMD debe llamar a requerir y disponer una devolución de llamada función que se llama cuando se ha cargado el módulo solicitado:

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

El código de ejemplo que ya ha proporcionado llamado require('InboxView') en un estilo síncrona . Puesto que está utilizando el "sugar" sintaxis, RequireJS inspeccionará su código, encontrar llamadas síncronas a require() y añadir esas dependencias a la lista de dependencias de nivel superior del módulo, en efecto, que le da esto:

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

... por lo tanto, ¿por qué vio todos los módulos cargados inmediatamente?

Agregue la devolución de llamada asíncrona para requerir y usted debe estar bien. Además, si lo piensa, ¿cómo funcionaría su código si RequireJS esperó a cargar el módulo para InboxView hasta que su ruta se disparó sin el bloqueo de llamadas require hasta que se completó la carga? :)