javascript - ¿Cómo lograr la carga lenta con RequireJS?

backbone.js js-amd

Question

Estamos construyendo una aplicación web no trival usando Backbone, RequireJS y Handlebars, y bueno, solo tengo curiosidad. Por el momento, cada uno de nuestros modelos se ve así:

define([''Backbone'', ''js/thing/a'', ''js/thing/b'', ''js/lib/bob''], function(a, b, bob) {
  return Backbone.Router.extend({
    // stuff here
  });
});

donde cosa / a, cosa / b tienen sus propias dependencias, por ejemplo en plantillas de manubrios, etc. Lo que ocurre ahora es que en mi main.js, todos los enrutadores de ''nivel superior'' se cargan e inicializan; cada enrutador de nivel superior tiene un conjunto de dependencias (modelos, vistas, etc.) que tienen sus propias dependencias (plantillas, ayudantes, utilidades, etc.). Básicamente, una gran estructura de árbol.

El problema en este caso es que todo este árbol se resuelve y carga en la carga de la página. No me importa eso por sé, ya que lo ejecutaremos a través del optimizador eventualmente y terminaremos con un solo archivo grande (reduciendo RequireJS básicamente a un marco de modularización). Sin embargo, tengo curiosidad de si puede cargar cosas como vistas y plantillas ''a pedido''.

Aquí se explica el "ajuste simplificado de CommonJS", así que lo intenté:

define(function(require) {
  Backbone = require(''Backbone'');
  return Backbone.Router.extend({
    doStuff: function() {
      var MyView = require(''js/myView'');
      new MyView().render();
    }
  });
});

Sin embargo, mirando al inspector de red de Chrome, parece que RequireJS, de alguna manera, incluso sin activar la ruta que desencadena el controlador doStuff, aún carga la dependencia myView . Preguntas:

• ¿Es esto realmente posible? ¿Hay magicks negros en RequireJS que buscan llamadas a require() sin activar realmente la ruta doStuff ?
• ¿Es esta la forma teóricamente correcta de "cargar bajo demanda", carga lenta de los módulos y recursos RequireJS?
• ¿El optimizador r.js sigue funcionando como se anuncia si usa esta notación?

Answer 1

Es posible que también desee verificar require-lazy .

Tiene un componente de tiempo de ejecución y un componente de tiempo de compilación. El componente de tiempo de ejecución le permite solicitar un módulo de manera perezosa (observe el plugin lazy! ):

define(["lazy!mymodule"], function(mymodule) {
    ...
});

En el contexto anterior, mymodule es una promise , el módulo real se cargará con get() y estará disponible en la devolución de llamada then() :

mymodule.get().then(function(m) {
    // here m is the real mymodule
});

Require-lazy se integra con r.js para crear automáticamente "paquetes" de archivos Javascript. También maneja automáticamente el almacenamiento en memoria caché para los paquetes. Hay varios ejemplos para tener una idea. También hay integración de Grunt y Bower .

Answer 2

¿Es esto realmente posible? ¿Hay magicks negros en RequireJS que buscan llamadas a require () sin activar realmente la ruta doStuff?

Cuando utiliza la sintaxis ''azúcar'' , utiliza Function.prototype.toString y una expresión regular para extraer sus referencias y luego las enumera como dependencias antes de ejecutar la función. Básicamente se convierte en el estilo normal de define con una matriz de deps como primer argumento.

Debido a esto, no importa dónde están sus llamadas requeridas y es por eso que se ignoran las declaraciones condicionales (también explica por qué las llamadas require se use una cadena literal, y no una variable).

¿Es esta la forma teóricamente correcta de "cargar bajo demanda", carga lenta de los módulos y recursos RequireJS?

El uso de la sintaxis del azúcar no permitirá la carga condicional como lo ha visto. La única forma en que puedo pensar en la parte superior de mi cabeza es usar una llamada require una serie de deps y una devolución de llamada:

define(function(require) {
    var module1 = require(''module1'');

    // This will only load if the condition is true
    if (true) {
        require([''module2''], function(module2) {

        });
    }

    return {};
});

El único inconveniente es otra función anidada, pero si buscas rendimiento, esta es una ruta válida.

¿El optimizador r.js sigue funcionando como se anuncia si usa esta notación?

Si está utilizando la sintaxis ''azúcar'', entonces sí, el optimizador funcionará bien. Un ejemplo:

modules / test.js

define(function(require) {
    var $ = require(''jquery'');
    var _ = require(''underscore'');

    return {
        bla: true
    }
});

Una vez compilado por r.js esto se ve así:

define(''modules/test'', [''require'', ''jquery'', ''underscore''], function(require) {
    var $ = require(''jquery'');
    var _ = require(''underscore'');

    return {
        bla: true
    }
});

En conclusión, puede cargar cosas condicionalmente, pero como mencionó, si tiene la intención de optimizar el proyecto con r.js, entonces no hay una gran sobrecarga en el uso de la sintaxis de azúcar.