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 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.
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.
(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
¿Cuando fue la última vez que guardaron algo en un disquete?
 | 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.