Trazar la carga de módulos en RequireJS

Hace tiempo estuve hablando de la potencia que nos da RequireJS, cargando nuestros archivos/módulos JavaScript bajo demanda. Lo cierto es que, cuando tenemos aplicaciones grandes con muchos módulos, puede ser complicado saber cuántos se han cargado, si tienen correctamente sus dependencias, etcétera. Investigando un poco sobre cómo conseguir esta información descubrí el evento onResourceLoad.

onResourceLoad

Se trata de una API privada de requirejs que, tal y como comentan en su espacio en Github, puede estar sujeta a cambio en cualquier momento. De hecho, puedes agregar tu contacto en la propia wiki con el fin de ser informado si se produce algún cambio. Siguiendo el ejemplo del post anterior, he ampliado el mismo para agregar una función que maneje dicho evento antes de comenzar a utilizar require.js en el script app.js.

(function () {

    requirejs.config({
        baseUrl: 'scripts'
    });

    requirejs.onResourceLoad = function (context, map, depArray) {
        console.log(["{0} module loaded; Url {1}; Dependencies".format(map.name, map.url), depArray]);
    };

    require(['messenger'], function (messenger) {
        messenger.showMessage();
    });

})();
La forma de concatenar el texto de console.log es una extensión de la clase String contada en este otro post.

Esta función, a día de hoy, recibe tres argumentos:

context
Se trata del objeto que utiliza RequireJS para almacenar información relacionada con la carga y exportación de módulos.
map
Es el argumento más importante para nosotros ya que tiene toda la información relacionada con el módulo que se acaba de cargar. En este ejemplo se han utilizado el nombre del módulo (map.name) y la url de dónde está alojado(map.url). Más información.
depArray
Se trata de un array con las dependencias del módulo.

Si arrancamos el ejemplo podremos ver en la consola la información de cada uno de los módulos cargados:

onResourceLoad

Espero que sea de utilidad 😀

¡Saludos!