Gzip vs minify

Question

Tuve una discusión algo animada el otro día sobre cómo minimizar Javascript y CSS frente a alguien que prefiere usar Gzip.

Llamaré a esta persona X.

X dijo que Gzip ya minimiza el código, ya que comprime los archivos.

No estoy de acuerdo. Zip es un método sin pérdidas para reducir el tamaño del archivo. Sin pérdida significa que el original debe restaurarse perfectamente, lo que significa que la información debe almacenarse para poder restaurar los espacios, los caracteres innecesarios, el código comentado y todo lo demás. Eso ocupa más espacio, ya que se debe comprimir más.

No tengo ningún método de prueba, pero creo que el Gzip de este código:

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

Todavía será más grande que el Gzip de este código:

.a1{body:background-color:#FFF;padding:40px}

¿Hay alguien que pueda probar que esto es correcto o incorrecto?
¡Y por favor no vengas a decir & "; Es correcto porque eso es lo que siempre he usado &";

Estoy solicitando pruebas científicas aquí.

Answer 1

Muy simple de probar. Tomé tu js, los puse en diferentes archivos y ejecuté gzip -9 en ellos. Aquí está el resultado. Esto se hizo en una máquina WinXP que ejecuta Cygwin y gzip 1.3.12.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

Aquí hay otra prueba usando un ejemplo de JS del mundo real. El archivo fuente es & Quot; common.js & Quot; El tamaño original del archivo es 73134 bytes. Minificado, llegó a 26232 bytes.

Archivo original:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

Archivo minimizado:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

Archivo original comprimido con la opción -9 (misma versión que la anterior):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

Archivo minimizado comprimido con la opción -9 (misma versión que la anterior):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

Como puede ver, hay una diferencia definitiva entre los diversos métodos. La mejor opción es minimizarlos y comprimirlos.

Answer 2

Aquí están los resultados de una prueba que hice hace un tiempo, usando un & "; vida real &"; Archivo CSS de mi sitio web. CSS Optimizer se utiliza para la minificación. La aplicación estándar de archivo de Linux que viene con Ubuntu se usó para Gzipping.

Original: 28,781 bytes
Minified: 22,242 bytes
Gzipped: 6,969 bytes
Min + Gzip: 5,990 bytes

Mi opinión personal es ir primero por Gzipping, ya que eso obviamente hace la mayor diferencia. En cuanto a la minificación, depende de cómo trabajes. Tendría que conservar el archivo CSS original para realizar ediciones más adelante. Si no le molesta minificarlo después de cada cambio, hágalo.

(Nota: hay otras soluciones, como ejecutarlo a través de un minificador " a pedido " cuando sirve el archivo y lo almacena en caché en el sistema de archivos).

Answer 3

Tenga cuidado al probar esto: esos dos fragmentos de CSS son trivialmente pequeños, por lo que no se benefician de la compresión GZIP: la adición del pequeño encabezado de GZIP solo perderá las ganancias obtenidas. En realidad, no tendría un archivo CSS tan pequeño y estaría preocupado por comprimirlo.

minify + gzip comprime más que solo gzip

La respuesta a la pregunta original es, sí, minify + gzip obtendrá una cantidad significativa más de compresión que solo gzip. Esto es cierto para cualquier ejemplo no trivial (es decir, cualquier código JS o CSS útil que tenga más de unos pocos cientos de bytes).

Para obtener ejemplos de esto en efecto, tome el código fuente de Jquery que está disponible minificado y sin comprimir, comprima ambos con gzip y echen un vistazo.

Vale la pena señalar que Javascript se beneficia mucho más de la minificación que CSS bien optimizado, pero todavía hay un beneficio.

Razonamiento:

La compresión GZIP no tiene pérdidas. Esto significa que tiene que almacenar todo el texto, incluido el espacio en blanco exacto, comentarios, nombres largos de variables, etc., para que puedan reproducirse perfectamente más adelante. Por otro lado, la minificación es con pérdida. Si minimiza su código, está eliminando gran parte de esta información de su código, dejando menos que GZIP necesita conservar.

• La minificación descarta los espacios en blanco innecesariamente, dejando espacios solo donde sea necesario por razones sintácticas.
• Minificación elimina comentarios.
• La minificación de código puede reemplazar los nombres de los identificadores con nombres más cortos donde no habría efectos secundarios.
• La minificación de código puede hacer 'optimizaciones de compilador' triviales al código que solo son posibles al analizar el código en realidad
• La minificación CSS puede eliminar reglas redundantes o combinar reglas que tengan el mismo selector.

Answer 4

Tienes razón.

No es lo mismo minificar que gzipping (se llamarían igual si ese fuera el caso). Por ejemplo, no es lo mismo comprimir esto:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Luego, minimiza para terminar con algo como:

var a = null;

Por supuesto, diría que el mejor enfoque en la mayoría de los casos es minificar PRIMERO y luego Gzip, que solo minificar o gzipping, aunque dependiendo del código a veces solo minificar o gzippear le dará mejores resultados que hacer ambas cosas.

Answer 5

Hay un umbral en el que la codificación gzip es ventajosa. La regla general es: cuanto más grande sea el archivo, mejor será la compresión y gzip ganará fácilmente. Por supuesto, puedes minificar primero y luego gzip después.

Pero si estamos hablando de gzip vs.minify en un pequeño texto de no más de 100bytes de largo, un & "; objetivo &"; la comparación no es confiable, incluso no tiene sentido, a menos que salgamos con un texto de referencia para establecer un medio estándar de evaluación comparativa, como un tipo Lorem Ipsum pero escrito en Javascript o CSS.

Entonces, permítanme proponer comparar las últimas versiones de jQuery y MooTools (las versiones sin comprimir) usando mi Código de Fat-Free Minify (PHP) (simplemente eliminando espacios en blanco y comentarios, sin acortamiento de variables, sin codificación baseX)

Aquí están los resultados de minify vs. gzip (con compresión conservadora de nivel 5) vs. minify + gzip:

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

Antes de que alguien salte el arma, esta no es una batalla de bibliotecas JS.

Como puede ver, la minificación + gzipping le da una mejor compresión en archivos grandes . La reducción del código tiene sus ventajas, pero el factor principal es cuánto espacio en blanco y comentarios están presentes en el código original. En este caso, jQuery tiene más, por lo que ofrece una mejor minificación (muchos más espacios en blanco en la documentación en línea). La fuerza de la compresión Gzip está en cuánta repetición hay en el contenido. Entonces no se trata de minify vs.Gzip. Hacen las cosas de manera diferente. Y obtienes lo mejor de ambos mundos al usar ambos.

Answer 6

¿Por qué no usar ambos?

Answer 7

Es fácil de probar: simplemente coloque el texto de su CSS en archivos de texto y comprima los archivos usando un archivador como gzip en Linux.

Acabo de hacer esto, y sucede que para el primer CSS, el tamaño es de 184 bytes y para el segundo 162 bytes.

Entonces, tiene razón, el espacio en blanco es importante incluso para archivos comprimidos, pero como se puede ver en esta pequeña prueba, para archivos realmente pequeños, el tamaño del archivo comprimido puede ser mayor que el tamaño del archivo original.

Esto se debe al tamaño muy pequeño de su ejemplo, para archivos más grandes, gzipping obtendrá archivos más pequeños.

Answer 8

No vi a nadie mencionar a Mangling, así que publico mis resultados al respecto.

Aquí hay algunas cifras que se me ocurrieron usando UflifyJS para minificación y Gzip. Tenía unos 20 archivos que concatenaba juntos a unos 2.5 MB con comentarios y todo.

Concat Files 2.5MB

uglify({
    mangle: false
})

Minified sin destrozar: 929kb

uglify({
    mangle: true
})

Minificado y destrozado: 617kb

Ahora, si tomo esos archivos y los comprimo, obtendré 239kb y 190kb respectivamente.

Answer 9

Hay un método muy simple para probar esto: cree un archivo que consista solo en espacios en blanco y otro archivo que esté realmente vacío. Luego Gzip ambos y comparar sus tamaños. El archivo con el espacio en blanco será, por supuesto, más grande.

Answer 10

Por supuesto " humano " la compresión con pérdida que conserva el diseño u otras cosas importantes y elimina cualquier basura no necesaria (espacios en blanco, comentarios, cosas redundantes, etc.) será mejor que una compresión gZip sin pérdidas.

Por ejemplo, cosas como marcas o nombres de funciones probablemente tendrán una cierta longitud para describir el significado. Reemplazar esto por nombres de un carácter de largo ahorrará mucho espacio y no es posible con una compresión sin pérdidas.

Por cierto, para CSS hay herramientas como compresor CSS eso hará el trabajo con pérdidas para usted.

Sin embargo, obtendrá los mejores resultados al combinar " optimización con pérdida " y compresión sin pérdidas.

Answer 11

por supuesto que puede probar: escriba su archivo en un archivo y gzip con zlib . También puedes probar con & Quot; gzip & Quot; programa de utilidad.

vuelva a su pregunta: no existe una relación definida entre la longitud de la fuente y el resultado comprimido. el punto clave es la 'entropía' (cuán diferente es cada elemento en la fuente).

entonces, eso depende de cómo sea su fuente. por ejemplo, muchos espacios continuos (por ejemplo, > 1000) pueden comprimirse del mismo tamaño que unos pocos espacios (por ejemplo, < 10).

Answer 12

este es el resultado cuando gzipea los dos archivos

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Answer 13

Tienes razón, minify + gzip resulta en menos bytes. Sin embargo, no hay pruebas científicas.

¿Cómo es que no tienes método de prueba?

Minifique su código en un archivo y déjelo " no minified " en otro. Cargue en un servidor web capaz de comprimir la salida (mod_deflate para Apache, por ejemplo), instale la extensión Firebug para firefox, borre su caché y acceda a ambos archivos. Firebug's & Quot; NET & Quot; la pestaña contendrá la cantidad exacta de datos transferidos, compárelos y tendrá " empirical " prueba.