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

Tanto los complementos YSlow como Page Speed ​​de Google 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 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?

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á que el rendimiento sea mucho peor.

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!

Generalmente 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 en el que ejecuto muchas de las páginas tiene tablas de datos, así que tengo una global.jscon 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.

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 puede diferirse 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.

No sugeriría combinarlos todos. Si está utilizando una biblioteca común, puede aprovechar una 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 tienen soluciones (sinceramente, tampoco las he usado, 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.