Optimizar módulos de RequireJS y archivos Javascript

Una vez que tenemos desarrollada una aplicación que hace uso de RequireJS como herramienta para gestionar las dependencias y archivos de javascript podemos realizar una optimización para conseguir que haya menos archivos y tengan menor tamaño. Esta optimización hará que la aplicación web realice menos peticiones al servidor y necesite transferir menos bytes dando como resultado una aplicación más rápida.

Para conseguir esta optimización necesitamos tener instalado la herramienta node.js y descargar el javascript que realizará la optimización, r.js. En Arch Linux instalar node.js consiste en instalar su paquete con:

# pacman -S nodejs

view raw script-1.sh hosted with ❤ by GitHub

Teniendo instalado node.js y habiendo descargado r.js el proceso consiste en ejecutar un comando desde la terminal. Este es:

$ node r.js -o build.js

view raw script-2.sh hosted with ❤ by GitHub

El contenido del archivo build.js contendrá alguna información como el archivo de salida y la localización del módulo principal de la aplicación, básicamente la configuración es:

	({
	baseUrl: ".",
	name: "main",
	out: "app.js"
	})

view raw build.js hosted with ❤ by GitHub

Este sería el resultado de optimizar el ejemplo de introducción sobre RequireJS. En el resultado se han eliminado los espacios y tabuladores, los diferentes archivos se han fusionado en uno solo (en este caso únicamente figuras.js y main.js) y los nombres de las variables se han acortado, esto reduce el tamaño del Javascript final. Esta optimización sirve también en cierta forma como ofuscación del código si queremos dificultar a alguien (como a la competencia de un producto) se aproveche del código que hemos desarrollado:

define("figuras",[],function(){function e(e){this.lado=e}function t(e,t){this.base=e,this.altura=t}return e.prototype.calculateArea=function(){return this.lado*this.lado},t.prototype.calculateArea=function(){return this.base*this.altura/2},{Cuadrado:e,Triangulo:t}}),define("built",["figuras"],function(e){var t=new e.Cuadrado(4),n=new e.Triangulo(4,3);alert("El área de un cuadrado de lado "+t.lado+" es "+t.calculateArea()),alert("El área de un triágulo de base "+n.base+" y altura "+n.altura+" es "+n.calculateArea())});

view raw built.js hosted with ❤ by GitHub

Al optimizar los archivos es recomendable ver las notas que indican en la documentación de RequireJS.

Si se quiere optimizar archivos individuales de javascript o no usamos RequireJS se puede utilizar la herramienta Closure Compiler, es muy sencilla, no hace falta instalar nada en nuestro equipo sino simplemente usar el servicio y da un resumen de la optimización que realiza.

Este ejemplo de introducción a RequireJS es muy sencillo y no muestra del todo el potencial que podemos conseguir con la utilidad r.js. La optimización de la lista de tareas con Marionette, otro ejemplo que hice, es más bastante más complejo y en el puede verse la mejora que podemos conseguir en cuanto a número de peticiones necesarias a realizar al servidor, tamaño en kilobytes del código descargado y tiempo en cargar de la página.

Referencia:
Introducción y ejemplo de RequireJS
Introducción y ejemplo de Mustache
Logging en Javascript con log4javascript
Capturar errores de Javascript

Introducción y ejemplo de Backbone.js
Ejemplo lista de tareas con Backbone, RESTEasy y Tapestry
Ejemplo de pruebas unitarias en javascript con Jasmine y Sinon
Como optimizar módulos de RequireJS y archivos Javascript (II)