En primer lugar, discúlpeme por mi pregunta tonta, pero no pude encontrar una explicación exhaustiva al respecto. Creé una aplicación web con React y usé un complemento NPM para generar versiones comprimidas estándar y Gzip de los archivos main.js y main.css (originalmente, main.js era 1.2 Mb, con compresión Gzip es alrededor de 331Kb).
Así que sé que en mi carpeta "dist" tengo:
Bueno, ¿qué debo hacer para saber?
Pensé que tenía que cargar todo en mi servidor y modificar el Index.html, para que cargara los archivos .gz en lugar de los estándar... ¡pero NO! Si edito el Index.html, para apuntar a los archivos comprimidos con gzip, aparece el error "Error al cargar la secuencia de comandos del módulo: se esperaba una secuencia de comandos del módulo JavaScript, pero el servidor respondió con un tipo MIME de "aplicación/x-gzip"
Con mi gran sorpresa, revisando la pestaña Red de la consola de desarrollo de Chrome, puedo ver en el encabezado de respuesta de Main.js "Codificación de contenido: gzip", y su tamaño es de 343 Kb... No es el mismo tamaño que "mi "archivo comprimido, pero no está demasiado lejos
Entonces, mi gran pregunta: ¿qué está pasando? ¿Mi servidor está creando automáticamente versiones comprimidas con gzip de mis archivos .js y .css (debería parecer así...)? Si es así, ¿dónde se almacenan estas versiones? ¿Se crean sobre la marcha desde cero cada vez que alguien los solicita (??) Y, de ser así, ¿de qué sirve crear versiones comprimidas con gzip de los archivos Main.js y Main.css? ¿Qué debo hacer con ellos?
¡Muchas gracias por ayudarme a entender algo!
La clave aquí es la diferencia entre Content-Type y Content-Encoding .
Los conceptos básicos absolutos de HTTP son que el navegador realiza una solicitud HTTP para una URL y luego el servidor decide cómo responder a esa solicitud.
Esa decisión podría ser todo tipo de cosas diferentes, pero la más básica es buscar en el disco duro una ruta que coincida con la ruta de la URL y dársela al navegador junto con un Content-Type que diga cuál es.
Entonces, si solicita /foo.css , y todavía estamos hablando de un enfoque básico, le dará el contenido de ese archivo y un tipo de contenido que dice que es CSS. Mientras que si solicita /foo.css.gz , le dará el contenido de ese archivo y le dirá que es un archivo GZip.
Un archivo GZip no es CSS, por lo que el navegador se niega a tratarlo como un archivo CSS. No espera poder extraer CSS de él.
Un enfoque un poco más inteligente sería comprimir el archivo. Entonces, el navegador solicita /foo.css y el servidor responde con foo.css , pero primero lo comprime y envía el resultado comprimido con un tipo de contenido que dice que es CSS y una codificación de contenido que dice que es GZipped.
El navegador entonces sabe que puede descomprimirlo y extraer el CSS.
(Hay cierta complejidad adicional en la que el navegador le dice al servidor si admite compresión o no, pero no entraré en detalles al respecto).
Ahora, el siguiente nivel de complejidad es si desea guardar los recursos necesarios para comprimir el archivo CSS sobre la marcha (que necesitaría que se comprimiera o almacenara en caché repetidamente).
El navegador solicita /foo.css y el servidor ve que hay un foo.css en el disco pero también que hay un foo.css.gz al lado. Luego envía este último de vuelta con el tipo de contenido que dice que es CSS y una codificación de contenido que dice que está comprimido en GZipped.
El servidor que está utilizando parece admitir y estar configurado para realizar el segundo de esos tres enfoques en lugar del más complejo.