it-swarm-es.com

¿Debo combinar archivos js / css en un solo archivo?

Ambos complementos YSlow y Google Velocidad de página recomiendan combinar archivos de script (y estilo) en un solo archivo cada uno para reducir la cantidad de solicitudes HTTP, y ciertamente puedo ver el punto de esto cuando los archivos de script son consistentes en todo el sitio, pero para una aplicación web que tiene diferentes requisitos en todo el sitio.

A mi modo de ver, hay algunas opciones:

  1. Combine todos los archivos que se usan en todo el sitio, y cada página obtiene el mismo archivo combinado: la desventaja es el contenido no utilizado que satura el script (y una primera carga más pesada (también se recarga cuando cambia cualquier script de componente))

  2. Combine los archivos por página: la desventaja es que cada página con diferentes requisitos obtiene un archivo combinado diferente (primera carga más pesada para cada tipo de página)

  3. Ignore la interpretación estricta de 'un solo archivo' de las recomendaciones y haga que la página se cargue en varios archivos, según corresponda, con el almacenamiento en caché, con suerte, negando la cantidad de solicitudes HTTP en el caso general; la desventaja es la cantidad de solicitudes HTTP en cada página

Pensamientos?

11
Cebjyre

La opción 2 es la peor; significa que cada página con una combinación diferente de scripts JS necesarios dará como resultado una solicitud HTTP. Hará peor el rendimiento mucho.

La opción 1 es la mejor. Eventualmente, la mayoría de los usuarios visitarán la mayoría de los "tipos" de páginas de su sitio web, por lo que sigue siendo ventajoso combinar todo en un solo archivo, con la excepción de los archivos JS grandes que se necesitan en pocas páginas que rara vez se visitan.

La primera visita a la página puede ser más lenta que con diferentes archivos, pero vale la pena hacerlo ya que cada otra visita a la página utilizará el JS global en caché.

Un consejo sin embargo; ¡combínalos automáticamente si aún no lo has hecho!

11
Thomas Bonini

Por lo general, combino "Javascript global" (jQuery y complementos comunes) en un solo archivo, y luego sirvo complementos adicionales como archivos separados cuando es necesario.

Por ejemplo, un sitio donde ejecuto muchas de las páginas tiene tablas de datos, así que tengo un global.js con jQuery, DataTables y SuperFish (para mi menú). Hay dos páginas en el sitio que usan una "caja de luz", así que tengo un script separado para esas dos páginas.

Para CSS, solo sirvo un solo archivo para todo el sitio e intento hacer que el CSS sea lo más general posible: la mayoría de las páginas solo tienen unos pocos elementos CSS únicos.

4
DisgruntledGoat

No sugeriría combinarlos todos. Si está utilizando una biblioteca común, puede aprovechar un CDN para entregar sus javascripts. Luego puede aprovechar el almacenamiento en caché del navegador (suponiendo que otros sitios estén usando el mismo CDN) y la entrega distribuida. Microsoft y Google cada uno tiene soluciones (tampoco lo he usado honestamente, pero ciertamente voy a comenzar) y puede haber otras. En una nota relacionada, SO tiene esta pregunta:

¿Cuándo el navegador borra automáticamente la memoria caché de JavaScript?

y la primera respuesta es oro macizo.

1
Larry Smithmier

Si bien definitivamente se recomienda usar la menor cantidad de archivos posible, es posible que tenga una división entre la funcionalidad que se requiere en la carga de la página y la funcionalidad que se puede diferir mediante la carga asincrónica.

Si suficiente de su JS puede ser empujado a la segunda categoría, puede mejorar la velocidad de carga inicial percibida de la página, creando una mejor experiencia para sus usuarios.

1
JasonBirch