Buone pratiche su come fare riferimento a Javascript

La pratica che generalmente vedo seguita è quella di inserire tutto il codice js in un singolo file, utilizzando un minimizzatore come il minificatore Microsoft AJAX o il compressore YUI e fare riferimento al file sulla pagina principale. In questo modo hai un piccolo file per la versione di produzione, mentre puoi mantenere il codice in file separati per facilitare lo sviluppo e il debug. Fai riferimento a ASP.NET - Chirpy è un buon plugin VS per aiutarti a gestire il mashing e la minimizzazione di js / css.

Per avere file separati con funzionalità specifiche della pagina e riferendoli su una pagina per pagina, devi valutare i vantaggi di avere uno script "principale" più leggero e gli utenti che devono scaricare script aggiuntivi quando necessario rispetto a quelli aggiuntivi lavoro necessario per mantenere questa impostazione più elaborata.

Se si dispone di uno script js veramente "pesante" richiesto solo per alcune funzionalità utilizzate raramente a cui accederà solo ad una frazione degli utenti (mi viene in mente un editor di rich text), potresti vedere dei benefici includendoli solo dove è assolutamente necessario. Usa la tua opinione migliore qui per decidere quanto granulare vuoi creare i tuoi script.

Ricordo di aver letto da qualche parte come sia una buona pratica mantenere lo script per la tua pagina principale il più leggero possibile, dato che questo è quello su cui si basano le impressioni degli utenti e utilizzare uno script 'normale' su altre pagine. Tuttavia, dovrei cercare il riferimento per questo.

Per le librerie comuni, collega a un CDN

Il punto di combinazione delle importazioni JS è quello di ridurre il numero di richieste HTTP richieste per caricare la pagina.

Con questo in mente, le librerie comuni come jQuery potrebbero già essere nella cache del browser dell'utente. Utilizzando un comune collegamento CDN, i tuoi utenti ottengono il vantaggio di velocità di una cache pre-riscaldata e ottieni il vantaggio aggiuntivo di non dover mantenere una copia locale sul tuo server.

Qualsiasi libreria JS comune di dimensioni apprezzabili sarà di solito ha la capacità di recuperare il codice da una CDN interna o di terze parti (ex google). Solitamente forniscono collegamenti a più versioni in modo che gli utenti possano bloccarsi in un determinato momento mentre il team di sviluppo mantiene la libertà di continuare lo sviluppo.

Per darti un'idea, ecco il test runner per uno dei miei progetti. Se visualizzi "Visualizza sorgente", vedrai che jQuery viene offerto dal CDN delle API di Google e qUnit è in fase di definizione servito dal jQuery CDN .

Per le cose locali, potrebbe essere una buona idea compilare tutto in un unico file

Dipende dalle dimensioni del codice base, ma è possibile ottenere un vantaggio misurabile riducendo il numero di richieste Web richieste per caricare la pagina. La stessa regola vale per l'uso di sprite di immagini per l'interfaccia utente / CSS.

Preferisco la leva di RequireJS . Ci vuole un po 'per abituarsi, ma credo che il tuo caso d'uso arrivi nella timoniera di RequireJS.

Preferisco questo approccio perché combina le tue due decisioni in un unico ... RequireJS caricherà solo il javascript richiesto (un file per ogni pagina, se preferisci), e le caricherà in una sola richiesta HTTP.

In breve, condensa tutto il codice javascript modulare in un unico file per un sovraccarico.

Se inserisci tutto il tuo JavaScript in un unico file e lo usi ovunque, il browser può memorizzare nella cache il file e solo scaricarlo una volta.