Javascript - Per combinare o non combinare, questa è la domanda

Question

Ok, quindi so che è ovvio combinare tutte le pagine Javascript in un singolo file esterno per motivi di efficienza, ma non è proprio la domanda qui.

Dire che ho Default.htm con un campo di ricerca a cui è associata una piccola magia Javascript. Quindi ho Contact.htm con un modulo di contatto che ha qualche magia Javascript collegata ad esso. E finalmente ho una FAQ.htm con alcuni pannelli jQuery che mostrano le risposte ... ottieni l'immagine.

Fondamentalmente ho tre pagine che hanno tutti bisogno di "alcuni" javascript, ma nessuno dei Javascript è utilizzato su altre pagine.

È meglio combinare tutto ciò che Javascript in un grande file minificato che viene caricato una volta e quindi memorizzato in Cache, oppure è preferibile utilizzare un singolo file Javascript nella pagina Default, ma non usarlo sul Contatto pagina ... ecc.?

Cosa funziona meglio in questo scenario?

Opzione: 1

Default.htm
jquery.js
Default.js

Contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

Opzione: 2

Default.htm
jquery-default-contatto-FAQ-min.js

Contact.htm
jquery-predefinito- contact-FAQ-min.js

Faq.htm
jquery-default-contatto-FAQ-min.js

PS: per tutto quello che asp.net ragazzi, sto usando Combres per combinare, minimizzare e versione i miei file Javascript

Answer 1

Vorrei assolutamente votare per combinarli. Se sei preoccupato dell'analisi o del tempo di configurazione per il Javascript "non utilizzato", ti consiglio di strutturare il tuo javascript con ogni file in una chiusura, quindi di eseguire le chiusure necessarie sulle pagine che ti servono. Per esempio:

// 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 
}); 

Poi, nella tua pagina:

<!-- 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

combinare in 1 file. lascia che venga memorizzato nella cache. carica una volta su qualsiasi pagina e per le pagine successive può utilizzare la copia memorizzata nella cache.

Answer 3

È sempre un atto di bilanciare il numero di richieste HTTP e limitare i byte trasferiti che non sono ancora realmente necessari.

ci sono tre possibilità:

1. unire il tutto in 1 file di
2. hanno tre file separati, e caricarli in base alle esigenze
3. hanno tre file separati, caricare quella necessaria per quella pagina subito e precarica gli altri (quando è il momento giusto)

Saprai solo cosa è meglio per la tua situazione eseguendo alcuni test di carico AB.

Tutto dipende dalla dimensione dei dati trasferiti, dalla sovrapposizione delle funzionalità necessarie e dalla probabilità che alcune funzionalità siano necessarie.

Answer 4

Perché non sembra che ci sia un sacco di javascript, la combinazione in un file sarebbe meglio. Solo se c'è una quantità significativa di javascript che non ha bisogno di essere caricato se un utente non visita una pagina, si dovrebbe considerare di tenere separati i file.

Answer 5

Se il file combinato è sotto dire, 25kb minificato, quindi andare per esso. Ma se è più di questo, direi, identifica quello che è il più grande di loro, e lascia che quel file js sia separato. Combina il resto. Anche quel limite di 25kb non è una regola difficile, dipende da te.

Se i singoli file hanno una grandezza di 30kb, consiglio di non combinarli e lasciare che i singoli file js siano memorizzati nella cache come singoli file js.

Spero che questo aiuti.