Clicky

Optimiza tu JavaScript con RequireJS

RequireJs - logo

RequireJS incluye un optimizador para comprimir los datos en un solo archivo minimizado

RequireJS es una forma efectiva para mejorar la velocidad y la calidad de tu código JavaScript, además lo hace mucho más legible y fácil de mantener.

En este artículo se presenta RequireJS y cómo puedes comenzar a utilizarlo. Se dirán los archivos que requiere, la definición de un módulo e incluso tocar en la optimización.

En términos simples require.js es un gestor de secuencia de comandos que permite deslizar el código JavaScript en archivos y módulos gestionando las dependencias de cada modelo.

Archivos requeridos

Para empezar a trabajar con RequireJS y su definición de módulos asíncrono (Asynchronous Module Definition - AMD) primero tenemos que descargarlo, y luego enlazar con el archivo require.js en la cabecera de nuestro documento, así:

<script src="/require.js" data-main="main"></script>

Te estarás preguntando qué hace el atributo data-main. Bien, usar RequireJS significa que cuando se llama a require en la cabecera del documento también se está enlazado al archivo principal de la aplicación JavaScript, el atributo data-main es un enlace al archivo principal de JavaScript para su aplicación, en este caso main.js . (Ten en cuenta que RequireJS añade automáticamente el .js al final del nombre del archivo).

En este archivo main.js colocará la configuración para RequireJS, lo cargará en sus módulos y definirá una ruta base para su uso cuando se requieran archivos.

La función require

RequireJS utiliza una función simple require para leerla en los scripts, en este ejemplo RequireJS carga jQuery:

require(["jquery"], function($) {
  $("˜#mydiv").html("˜Hello this is RequireJS talking");
});

Una de las mejores cosas de RequireJS es que es muy fácil de leer, si nos fijamos en ese bloque de código, veremos que primero require toma el archivo con el nombre de jquery.js y pasa a una función anónima con jQuery $ como parámetro, esto hace que seas libre de utilizar todo el código jQuery que quieras.

Pero normalmente no tendrías la biblioteca jQuery en un archivo llamado jquery.js, al igual que la mayoría de los plugins y los frameworks, normalmente se opta por cargarla después desde GitHub o el CDN de Google, y para ello se necesita configurar las rutas de acceso para que señalen el lugar correcto:

require.config({
 paths: {
   "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

Esto significa que puedes llamar a jQuery a través de Google y utilizarlo sin ningún problema. (Ten en cuenta que en este ejemplo se ha utilizado el nombre "jquery", pero se le puede llamar como quieras.)

Definir un módulo

Utilizar el patrón de AMD significa que el código puede ser estructurado en módulos, estos modelos son sólo los bits de código que hacen algo en nuestra aplicación. En un módulo se pueden colocar dos líneas de código o 100, sólo depende de lo que quieras que haga el módulo.

Para definir un módulo que utilice un código como este:

define(function () { 
 function add (x,y) {
   return x + y;
 }
});

En este ejemplo se ha creado un función simple add sin dependencias, pero si esta función es necesaria para que jQuery funcione correctamente, la función define estaría estructurada de esta manera:

define(["˜jquery"™], function () { 
 function place(mydiv) {
$(mydiv).html("˜My Sample Text"™);
 }
});

Utilizando esta sintaxis le decimos al JavaScript que primero busque jQuery, y luego ejecute el código de jQuery para que esté disponible cuando sea necesario. Esto también se puede utilizar en los módulos que se han escrito en los archivos de JavaScript, no se limita a los frameworks o plugins.

Optimización

Como se puede ver RequireJS es una gran herramienta para organizar tus archivos en módulos y carga sólo lo que necesita. La desventaja es que muchos archivos JavaScript dan pobres resultados en los tiempos de carga, por lo que RequireJS incluye un optimizador para recoger los datos de todos los archivos y colocarlos en un solo archivo minimizado.

Con todo, RequireJS es una de las mejores formas de organizar y optimizar tu JavaScript para la web moderna.

Jesus_Caceres