Chalalo Land

[Tutorial] Microsoft Ajax Minifier – Optimiza tus archivos Javascript

Hola, que tal, comienzo una serie de post y screencast sobre como mejorar la performance de nuestras aplicaciones Web, en especial (obviamente) ASP.NET, hay algunos datos que van a servir para PHP, estoy leyendo un libro buenísimo sobre ….

Microsoft Ajax Minifier

Es una herramienta que nos va a permitir mejorar el rendimiento de nuestras aplicaciones que utilizan Javascript, como las ajax (que como ya saben , utilizan bastante), ya que reduce el tamaño de los mismos, admitiendo dos niveles de minificación (diferenciando de compresión).

Normal Crunching
Se realiza el proceso de minificación del js, eliminando los espacios en blanco, puntos y comas y llaves innecesarias, como así también los comentarios (que son necesarios en tiempo de desarrollo, pero en explotación no)

if ( a == 0 )
{
    a = 10;
}

Hyper Crunching
Se realiza el proceso de minificación, además acortando los nombres de las variables locales , nombres de funciones y eliminando lo innecesario.

function DivideTwoNumbers(numerator, denominator, unsedparameter )
{
    return numerator / denominator;
}

El Microsoft Ajax Minifier incluye los siguientes componentes:

• Herramienta de Línea de Comandos: Nos permite minimizar los archivos JavaScript mediante la línea de comandos.
• MSBuild Task: Permite minificar el archivo Javascript en Visual Studio, automáticamente cuando generas tu proyecto.
• Componente: Permite usar el Microsoft Ajax Minifier programáticamente.

Ejemplo 1- Pequeña Sección de Código

Vamos a tener un archivo llamado funcion.js el que tiene el siguiente contenido (tomado prestado por ahi…)

function borra(opt) {
    var temp = opt.options.length;
    for (var x = 0; x < temp; x++) {
        opt.options[temp - x] = null;
    }
}

Al aplicar MAM con Normal Crunching, por línea de comandos:

C:\Program Files\Microsoft\Microsoft Ajax Minifier>ajaxmin prueba.js -o prueba.m
in.js.

Veamos los resultados:

El archivo pesa ahora 92 bytes, en comparación con los 123bytes del archivo normal, si vemos el contenido del archivo veremos:

function borra(opt) { for (var temp = opt.options.length, x = 0; x < temp; x++) opt.options[temp - x] = null }

Es decir el archivo final es aprox 25% más pequeño que el original

Ahora a aplicar Hyper Crunching

C:\Program Files\Microsoft\Microsoft Ajax Minifier>ajaxmin -hc prueba.js -o prue
ba.min.hc.js

El archivo pesa 77 bytes, por lo que es 37% menor al archivo original, si vemos el contenido del archivo veremos:

function borra(c) { for (var b = c.options.length, a = 0; a < b; a++) c.options[b - a] = null }

Ejemplo 2 – Archivo Real tomado de un Website

Para este ejemplo “tome prestado” un archivo JS de un Website de una Universidad, el archivo pesa 29.778 Bytes. No vamos a detallar nuevamente el proceso, en lugar de eso , quiero que veamos una tabla comparativa de los resultados:

Utilizar Microsoft Ajax Minifier desde Visual Studio

Cuando terminamos la instalación vemos que se crea un nuevo MSBuild en C:\program Files\MSBuild\Microsoft\MicrosoftAjax

Lo que debemos hacer ahora, es modificar el archivo del proyecto (.vbproj) , para esto lo puedes hacer con notepad o también puedes descargar el proyecto mediante visual studio y luego modificar el archivo, dentro del tag <Proyect> vamos a incluir lo siguiente:

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
   <ItemGroup>
     <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
   </ItemGroup>
   <AjaxMin SourceFiles="@(JS)" SourceExtensionPattern="\.js$" TargetExtension=".min.js" />
</Target>

Luego guardar y al recargar el proyecto elije la opción cargar normalmente del cuadro de diálogo:

Ahora al presionar F5(Build) , vamos ver que se genera automáticamente el archivo js min.Si no lo notamos de inmediato, es por que no hemos puesto la opción de ver todos los archivos:

Ahora puedes ver el archivo generado funciones.min.js ya en tu proyecto, todo archivo JS va a ser minificado :).

Una aclaración, esto no es compresión, sino minificación, la compresión la podemos hacer con gzip y obtenemos aún mejores resultados (a costa de tiempo de cpu).

Espero que te sirva!
Gonzalo.