[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)

Código Normal

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

Normal Crunching

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.

Código Normal
function DivideTwoNumbers(numerator, denominator, unsedparameter )
{
    return numerator / denominator;
}
Hyper Crunching
function a(a,b){return a/b}

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 FilesMicrosoftMicrosoft Ajax Minifier>ajaxmin prueba.js -o prueba.m

in.js.

Veamos los resultados:image

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 FilesMicrosoftMicrosoft Ajax Minifier>ajaxmin -hc prueba.js -o prue

ba.min.hc.js

image

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:

image

Utilizar Microsoft Ajax Minifier desde Visual Studio

Cuando terminamos la instalación vemos que se crea un nuevo MSBuild en C:program FilesMSBuildMicrosoftMicrosoftAjax

image

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)MicrosoftMicrosoftAjaxajaxmin.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:

image

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:

image

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.

[Tips] RockScroll Una gran ayuda para Visual Studio

Hola que tal? Quería compartir este tip, que no es nuevo, pero sirve mucho, o por lo menos a mí, se trata de RockScroll, una utilidad para Visual Studio que nos permite ver una vista en miniatura (o mega miniatura) al lado de nuestro Scroll, y destacando en esta sección cuando seleccionamos, por ejemplo una variable, todas las partes dentro del código del documento en donde se repite esa variable, es muy bueno! , nos permite ahorrar tiempo, que es lo que se necesita.

image(Imagen tomada del Blog de Scott Hanselman)

Descárgalo aquí:
Rocky Downs’ RockScroll for Visual Studio

Puedes ver el Blog de Scott Hanselman, para más detalles.
http://www.hanselman.com/blog/IntroducingRockScroll.aspx

Saludos,
Gonzalo

[Off-Topic] Pensamiento Freak: Hasta cuando vamos a seguir con los íconos de guardar con un disquete?

¿Cuando fue la última vez que guardaron algo en un disquete?

image Solo eso, estoy mutando desarrollando, y de repente me detuve en el botón de guardar, siempre con el disquete, cuando los computadores venían con una unidad de discos! ,las clásicas 1.44. Tengo alumnos que no conocen los disquetes, solo pendrive y dvd, sin embargo el ícono sigue.

Jajajaj esto es muy off-topic y a nadie de interesa!

Saludos y sigo programando….
PD: Apuesto que también les ha pasado, el cerebro como mecanismo de autoprotección ante la diarrea craneo-encéfalica de varios días programando y durmiendo 4 horas diarias puede producir.