Javascript - Para combinar o no combinar, esa es la pregunta

Question

Ok, entonces sé que es obvio combinar todas las páginas de Javascript en un solo archivo externo para fines de eficiencia, pero esa no es exactamente la pregunta aquí.

Digamos que tengo Default.htm con un campo de búsqueda que tiene un poco de magia Javascript adjunto. Luego tengo Contact.htm con un formulario de contacto que tiene algo de magia Javascript adjunto. Y finalmente tengo un FAQ.htm con algunos paneles jQuery que muestran las respuestas ... usted obtiene la imagen.

Básicamente tengo tres páginas que todas tienen "alguna" necesidad de Javascript, pero ninguna de las Javascript se usa en ninguna otra página.

Es mejor combinar todo ese Javascript en un gran archivo minificado que se carga una vez y luego se almacena en caché, o es mejor utilizar un archivo Javascript individual en la página predeterminada, pero no usarlo en el contacto página ... etc?

¿Qué funciona mejor en este escenario?

Opción: 1

default.htm
jquery.js
default.js

contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

Opción: 2

default.htm
jquery-default-contacto-FAQ-min.js

Contact.htm
jquery-default- contactar-faq-min.js

Faq.htm
jquery-default-contacto-faq-min.js

PD: por todo lo que ASP.NET chicos, estoy usando Combres para combinar, minificar y versionar mis archivos Javascript

Answer 1

Definitivamente votaría para combinarlos. Si le preocupa el análisis o el tiempo de configuración para el Javascript "no utilizado", entonces le recomendaría estructurar su Javascript con cada archivo en un cierre, y luego ejecutar los cierres que necesita en las páginas que los necesita. Por ejemplo:

// File 1 
window.closures = window.closures || {} 
window.closures["page1"] = (function() { 
    // Javascript for Page 1 
}); 

// File 2 
window.closures = window.closures || {} 
window.closures["page2"] = (function() { 
    // Javascript for Page 2 
});  

// File 3 
window.closures = window.closures || {} 
window.closures["page2"] = (function() { 
    // Javascript for Page 2 
}); 

Luego, en su página:

<!-- This one combined.js file will be downloaded once and cached //--> 
<script type="text/javascript" src="combined.js"></script> 
<script> 
    // Run the Javascript in your combined.js intended for page2 
    window.closures["page2"]() 
</script> 

Answer 2

combinar en 1 archivo. déjalo en caché se carga una vez en cualquier página, y para cualquier página posterior puede usar la copia en caché.

Answer 3

Siempre es un acto de equilibrio entre el número de solicitudes HTTP y la limitación de los bytes transferidos que aún no son realmente necesarios.

hay tres posibilidades:

1. combinar todo en 1 archivo
2. tienen tres archivos separados, y cargarlos cuando sea necesario
3. tienen tres archivos separados, la carga de la que se necesita para que la página de inmediato y precargue los otros (cuando sea el momento adecuado)

Solo sabrá qué es lo mejor para su situación realizando algunas pruebas de carga AB.

Todo depende del tamaño de los datos transferidos, la superposición de la funcionalidad necesaria y la probabilidad de que se necesite cierta funcionalidad.

Answer 4

Porque no parece que haya muchos javascript, sería mejor combinarlo en un solo archivo. Solo si hay cantidades significativas de javascript que no necesitan cargarse si un usuario no visita una página, entonces consideraría mantener los archivos separados.

Answer 5

Si el archivo combinado está por debajo del indicado, 25kb minificado, luego opta por él. Pero si es más que eso, diría, identifique el que es el más grande de ellos, y deje que ese archivo js esté separado. Combina el resto. Ese límite de 25kb tampoco es una regla dura, depende de ti.

Si sus archivos individuales tienen una magnitud de, digamos, 30kb, recomiendo no combinarlos y dejar que los archivos js individuales se guarden en caché como archivos js individuales.

Espero que ayude.