tutorial node libros fundamentos español descubriendo performance minify page-load-time

performance - node - ¿Minificar un directorio completo manteniendo las relaciones elemento/estilo/secuencia de comandos?



node js pdf español (3)

¿Existen actualmente soluciones que puedan minificar un directorio completo del proyecto? Más importante aún, ¿existen soluciones que puedan acortar los nombres de las clases, los identificadores y mantenerlos constantes en todos los documentos?

Algo que puede convertir esto:

Index.html ---

<div class="fooBar"> <!-- Code --> </div>

Styles.css ---

.fooBar { // Comments and Messages background-color: #000000; }

Index.js ---

$(".fooBar").click( function () { /* More Comments */ alert( "fooBar" ); });

Dentro de esto:

Index.html ---

<div class="a"></div>

Styles.css ---

.a{background-color:#000;}

Index.js ---

$(".a").click(function(){alert("fooBar");});


Lo que estás buscando no es minificante, sino compresión. La reducción por definición solo elimina el espacio en blanco, ya que el acortamiento de identificadores altera la interfaz, lo que puede romper los guiones externos que dependen de él. Por esta razón, la minificación es intrínsecamente "más segura" que la compresión, aunque en un sistema cerrado (es decir, una aplicación web encapsulada), la compresión puede ser una buena idea.

Para Javascript , la mayoría de la gente usa el compresor YUI o el empacador de Dean Edwards .

Para CSS , hay muchas herramientas para ''optimizar'' los estilos, pero no conozco ninguna que acorte los nombres de clase también. Las razones para esto podrían ser varias:

  1. Para comprimir un archivo CSS, el script necesitaría conocer todos los archivos HTML que lo incluyen, a fin de cambiar la clase y las referencias de identificación dentro de ellos. Dependiendo del tamaño y estructura de su sitio web, el suyo podría ser no trivial.
  2. Después de la compresión, el HTML semántico se vuelve menos legible, ya que <span class="image_caption"> convierte en <span class="a12"> , o peor aún, <p id="a12"> .

Definitivamente sería posible hacer algo como lo que describes (y en realidad estoy trabajando en un CMS / framework personal), pero para que sea mantenible, probablemente tenga que ser una parte integrada de un CMS estrechamente estructurado. , comprimiendo todos los archivos ''detrás de escena'' cada vez que se publica un nuevo cambio, mientras se conservan todos los archivos originales para que el sitio se pueda mantener como un todo.



Utilizo YUICompressor para minificar mis archivos css y js, y un programa llamado replace para hacer un reemplazo personalizado de cadenas en html (eliminando comentarios, reemplazando el jquery lib local con google api, etc.)

Utilice un archivo de proceso por lotes para llamar al programa en todos los archivos con una extensión específica en el directorio de su proyecto, como sigue:

java -jar yuicompressor-2.4.2.jar -o temp/css/one-compressed.css temp/css/one.css replace -quotes /q -srcdir temp/ -fname "*.php" -find "<script type=/qtext/javascript/q src=/qjs/jquery.js/q></script>" -replace "<script src=/qhttp://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js/q type=/qtext/javascript/q></script>"

y así.

Hasta ahora, no he podido encontrar ninguna buena herramienta para la ofuscación. Pero estos dos solo hacen que la tarea de minificación y compresión sea automatizada y mucho más fácil.