Cómo manejar los archivos JavaScript y CSS a través de un sitio?

Question

he tenido algunos pensamientos recientemente sobre cómo manejar los archivos javascript y css compartidos a través de una aplicación web.

En una aplicación web actual que estoy trabajando, me dieron un número bastante grande de diferentes archivos JavaScript y CSS que se colocan en una carpeta en el servidor. Algunos de los archivos son reutilizados, mientras que otros no lo son.

En un lugar de producción, es bastante estúpido tener un alto número de peticiones HTTP y muchos kilobytes de javascript y css redundante innecesaria que se está cargando. La solución a esto es, por supuesto, para crear un gran archivo de paquete por página que sólo contiene la información necesaria, que luego se reduce al mínimo y se envía comprimido (GZIP) al cliente.

No hay ningún problema para crear un conjunto de archivos JavaScript y minimizar de forma manual si se va a hacer una vez, pero ya que la aplicación se mantiene de forma continua y las cosas cambian y se desarrollan, que muy pronto se convierte en un dolor de cabeza para hacer esto manualmente mientras empuja hacia afuera nuevas actualizaciones que presenta cambios a javascript y / o archivos CSS para la producción.

¿Qué es un buen enfoque para manejar esto? ¿Cómo se maneja esto en su aplicación?

Answer 1

Lo que estamos hablando es llamado minimización .

Hay muchas bibliotecas y ayudantes para diferentes plataformas y lenguajes para ayudar con esto. Y cuando no se publique lo que está utilizando, en realidad no puedo apuntar hacia algo más relevante para usted mismo.

Aquí es un proyecto en Google Code -. Minify

Aquí es un ejemplo de un controlador HTTP .NET que hace todo esto sobre la marcha.

Answer 2

I construyó una biblioteca, Combres , que hace exactamente eso, es decir Minify, combine etc. También detecta automáticamente los cambios en ambos JS archivos locales y remotos / CSS y empuje el último en el navegador. Es gratis y de código abierto. Compruebe este artículo hacia fuera para una introducción a Combres.

Answer 3

estoy tratando con el mismo problema exacto en un sitio estoy lanzando.

Hace poco se enteró de un proyecto llamado SquishIt (ver en GitHub ). Está construido para el marco Asp.net. Si no está utilizando asp.net, todavía se puede aprender acerca de los principios detrás de lo que está haciendo aquí.

SquishIt le permite crear denominados "paquetes" de archivos y luego la prestación de estos lotes de archivos combinados y minified todo el sitio.

Answer 4

archivos CSS se puede categorizar y se repartió a partes lógicas (como común, imprimir vs) y luego se puede utilizar la función de importación de CSS para cargar correctamente los archivos CSS. La reutilización de estos pequeños archivos también hace posible el uso de almacenamiento en caché del lado del cliente. Cuando se trata de Javascript, creo que se puede resolver este problema del lado del servidor, varios archivos de secuencia de comandos agregados a la página, también puede generar dinámicamente el lado servidor de archivos de guión, pero para el cliente almacenamiento en caché de un lado al trabajo, estas partes deben tener diferente y estática direcciones.

Answer 5

Me escribió un controlador de ASP.NET hace algún tiempo que combina, compresas / le resta, gzips, y almacena en caché el CSS en bruto y los archivos de código fuente de 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, sería buscar archivos llamados main.css, theme2.css y contact.css). Cuando llega la lectura realizada en el archivo y lo comprime, almacena la cadena grande miniaturizada en la memoria caché del lado del servidor (RAM) durante unas horas. Siempre se ve en la caché primero, para que en las solicitudes posteriores que no tiene que volver a comprimir.

Me encanta esta solución porque ...

• Se reduce el número de solicitudes tanto como sea posible
• No se requieren pasos adicionales para el despliegue
• Es muy fácil de mantener

único inconveniente es que todo el código de estilo / script se almacena finalmente en la memoria del servidor. Sin embargo, la memoria RAM es tan barato hoy en día que no es tan grande de un acuerdo, ya que solía ser.

Además, una cosa vale la pena mencionar, asegúrese de que la cadena de consulta no es susceptible a cualquier manipulación ruta perjudiciales (sólo permitirá A-Z y 0-9).