¿Cómo manejar archivos javascript y css en un sitio?

Question

Recientemente he tenido algunas ideas sobre cómo manejar archivos javascript y css compartidos en una aplicación web.

En una aplicación web actual en la que estoy trabajando, obtuve una gran cantidad de javascripts y archivos css diferentes que se colocan en una carpeta en el servidor. Algunos de los archivos se vuelven a usar, mientras que otros no.

En un sitio de producción, es bastante estúpido tener un gran número de solicitudes HTTP y muchos kilobytes de javascript innecesarios y css redundantes que se cargan. La solución a eso es, por supuesto, crear un gran archivo agrupado por página que solo contenga la información necesaria, que luego se minimiza y se envía comprimida (GZIP) al cliente.

No hay preocupaciones para crear un paquete de archivos javascript y minimizarlos manualmente si lo iba a hacer una vez, pero como la aplicación se mantiene continuamente y las cosas cambian y se desarrollan, pronto se convierte en un dolor de cabeza hacer esto de forma manual, mientras se lanzan nuevas actualizaciones que presentan cambios en javascripts y/o archivos css en producción.

¿Cuál es un buen enfoque para manejar esto? ¿Cómo manejas esto en tu aplicación?

Answer 1

Lo que está hablando se llama minification.

Hay muchas bibliotecas y ayudantes para diferentes plataformas e idiomas para ayudar con esto. Como no publicaste lo que estás usando, realmente no puedo apuntar hacia algo más relevante para ti.

Aquí hay un proyecto en código de google - minify.

Here es un ejemplo de un controlador .NET Http que hace todo esto sobre la marcha.

Answer 2

Los archivos CSS se pueden clasificar y dividir en partes lógicas (como común, imprimir, comparar) y luego puede usar la función de importación de CSS para cargar correctamente los archivos CSS. La reutilización de estos archivos pequeños también hace posible usar el almacenamiento en caché del lado del cliente. Cuando se trata de Javascript, creo que puede resolver este problema en el servidor, se pueden agregar varios archivos de script a la página, también se puede generar dinámicamente el lado del servidor de archivos de comandos pero para que el caché del lado del cliente funcione, estas partes deben tener diferentes direcciones estáticas

Answer 3

Estoy tratando exactamente el mismo problema en un sitio que estoy lanzando.

Recientemente descubrí un proyecto llamado SquishIt (ver en GitHub). Está construido para el framework Asp.net. Si no está utilizando asp.net, aún puede aprender sobre los principios detrás de lo que está haciendo aquí.

SquishIt le permite crear "paquetes" de archivos con nombre y luego procesar esos paquetes de archivos combinados y minificados en todo el sitio.

Answer 4

Escribí hace un tiempo un controlador de ASP.NET que combina, comprime/minimiza, gzips y almacena en caché los archivos de código fuente en bruto CSS y Javascript bajo demanda. Para traer en tres archivos CSS, por ejemplo, se vería así en el marcado ...

<link rel="stylesheet" type="text/css" 
     href="/getcss.axd?files=main;theme2;contact" /> 

El manejador getcss.axd lee en la cadena de consulta y determina qué archivos que necesita para leer y Minify (en este caso, buscaría archivos llamados main.css, theme2.css y contact.css).Cuando termina de leer en el archivo y comprimirlo, almacena la gran cadena minimizada en el caché del lado del servidor (RAM) durante unas horas. Siempre busca primero en la memoria caché para que en solicitudes posteriores no tenga que volver a comprimir.

Me encanta esta solución porque ...

• Reduce el número de solicitudes lo más posible
• No se requieren pasos adicionales para el despliegue
• Es muy fácil de mantener

El único inconveniente es que todo el código de estilo/script eventualmente se almacenará dentro de la memoria del servidor. Pero la RAM es tan barata hoy en día que no es tan importante como solía ser.

Además, una cosa que vale la pena mencionar es asegurarse de que la cadena de consulta no sea susceptible de manipulación de rutas dañinas (solo permita A-Z y 0-9).

Answer 5

Creé una biblioteca, Combres, que hace exactamente eso, es decir, minify, combine etc. También detecta automáticamente los cambios en los archivos JS/CSS locales y remotos y envía los últimos al navegador. Es gratis & de código abierto. Compruebe this article para una introducción a Combres.