javascript - data - require js

¿Por qué los módulos concatenados RequireJS AMD necesitan un cargador?

Question

Nos encanta RequireJS y AMD durante el desarrollo, en el que podemos editar un módulo, volver a cargar el hit en nuestro navegador e inmediatamente ver el resultado. Pero cuando llega el momento de concatenar nuestros módulos en un único archivo para la implementación de producción, aparentemente tiene que haber un cargador AMD presente, ya sea que el cargador sea RequireJS o su socio "almendra" más pequeño, como se explica aquí:

http://requirejs.org/docs/faq-optimization.html#wrap

Mi confusión es: ¿por qué es necesario un cargador? A menos que tenga circunstancias inusuales que lo hagan necesario para hacer llamadas a require() dentro de sus módulos, parecería que una serie de módulos AMD podrían concatenarse sin un cargador presente. El ejemplo más simple posible sería un par de módulos como el siguiente.

ModA.js:

define([], function() {
    return {a: 1};
});

ModB.js:

define([''ModA''], function(A) {
    return {b : 2};
});

Dados estos dos módulos, parece que un concatenator podría simplemente producir el siguiente texto, y no cargar al servidor de producción o al navegador con el ancho de banda adicional o el cálculo requerido por RequireJS o Almond.

Imagino un concatenator que produce (y estoy usando chevron-quotes «,» para mostrar dónde se han insertado los fragmentos de los dos módulos anteriores):

(function() {
    var ModA = «function() {
        return {a: 1};
    }»();
    var ModB = «function(A) {
        return {b : 2};
    }»(ModA);
    return ModB;
})();

Esto, hasta donde puedo ver, reproduciría correctamente la semántica de AMD, con un mínimo de pegamento extraño JavaScript. ¿Hay tal concatenación disponible? Si no, sería un tonto por pensar que debería escribir uno: ¿realmente hay muy pocas bases de código que consistan en módulos simples y limpios escritos con define() y que nunca necesiten más llamadas require() inside) que comiencen luego asincrónicamente? busca de código?

Answer 1

El único beneficio real es si usa módulos en todas las secciones, por lo que los módulos de almacenamiento en caché tienen un beneficio independiente.

Answer 2

En caso de que compile su código con require.js en un solo archivo grande para la producción, puede usar almond.js para reemplazar completamente require.

Almond solo maneja la administración de referencias del módulo, no la carga en sí misma, que ya no es necesaria.

Tenga cuidado con las restrictions impone la almendra para trabajar

Answer 3

No hay ninguna razón por la que no pueda haber una herramienta de compilación como la que usted propone.

La última vez * Miré la salida del optimizador, convirtió los módulos a módulos denominados explícitamente y luego los combinó. Depende de sí mismo para asegurarse de que las funciones de fábrica se llamaron en el orden correcto y que se pasaron los objetos del módulo adecuado. Para construir una herramienta como usted quiere, tendría que linealizar explícitamente los módulos, no imposible, pero mucho más trabajo. Esa es probablemente la razón por la que no se ha hecho.

Creo ** que el optimizador tiene una función para incluir automáticamente requerirse a sí mismo (o almendra) en el archivo integrado, por lo que solo debe tener una descarga. Eso sería más grande que el resultado de la herramienta de compilación que desea, pero por lo demás igual.

Si hubiera una herramienta de compilación que produjera el tipo de salida que está solicitando, tendría que tener más cuidado, en el caso de la necesidad síncrona, el uso de exports lugar de retorno y cualquier otra característica de compatibilidad CommonJS.

* Eso fue hace unos años. 2010, creo.

** Pero parece que no puede encontrarlo ahora.

Answer 4

Tenía la misma necesidad, así que creé un simple "compilador" de AMD para ese propósito que hace precisamente eso. Puede obtenerlo en https://github.com/amitayh/amd-compiler

Tenga en cuenta que le faltan muchas características, pero cumple su función (al menos para mí). Siéntase libre de contribuir a la base de código.

Answer 5

Un optimizador de AMD tiene el alcance para optimizar más que la cantidad de archivos que se descargarán, también puede optimizar la cantidad de módulos cargados en la memoria.

Por ejemplo, si tiene 10 módulos y puede optimizarlos en 1 archivo, entonces se habrá guardado 9 descargas.

Si Page1 usa los 10 módulos, eso es genial. ¿Pero qué pasa si Page2 solo usa 1? Un cargador AMD puede retrasar la ejecución de la ''función de fábrica'' hasta que se require un módulo ''d. Por lo tanto, Page2 solo activa una sola ''función de fábrica'' para ejecutar.

Si cada módulo consume 100kb de memoria al ser require ''d, entonces un marco AMD que tenga optimización en tiempo de ejecución también nos ahorrará 900kb de memoria en la Página2.

Un ejemplo de esto podría ser un diálogo de estilo ''Acerca del cuadro''. Donde la misma ejecución se retrasa hasta el último segundo, ya que no se accederá en el 99% de los casos. Ej. (En sintaxis jQuery suelta):

aboutBoxBtn.click(function () {
    require([''aboutBox''], function (aboutBox) {
        aboutBox.show();
    }
});

Se ahorra el gasto de crear los objetos JS y DOM asociados con el ''Cuadro Acerca de'' hasta que esté seguro de que es necesario.

Para obtener más información, consulte Delay ejecutando define hasta que requiera requirejs para esto.