Più file su CDN rispetto a un file in locale

Il mio sito web utilizza circa 10 librerie javascript di terze parti come jQuery, jQuery UI, prefixfree, alcuni plugin jQuery e anche il mio codice javascript. Attualmente estraggo le librerie esterne da CDN come Google CDN e cloudflare. Mi chiedevo quale sia un approccio migliore:

1. Estrarre le librerie esterne dai CDN (come faccio oggi).
2. Combinando tutti i file in un singolo js e un singolo file css e archiviandoli localmente.

Qualsiasi opinione è benvenuta purché spiegata. Grazie :)

Il valore di un CDN risiede nella probabilità che l'utente abbia già visitato un altro sito chiamando lo stesso file da quel CDN e diventa sempre più prezioso a seconda delle dimensioni del file. La probabilità che questo sia il caso aumenta con l'ubiquità del file richiesto e la popolarità del CDN.

Con questo in mente, estrarre un file relativamente grande e popolare da un CDN popolare ha assolutamente senso. jQuery e, in misura minore, jQuery UI, si adattano a questo disegno di legge.

Nel frattempo, la concatenazione di file ha senso per file più piccoli che probabilmente non cambieranno molto: i plugin comunemente usati si adatteranno a questo disegno di legge, ma il codice specifico dell'applicazione principale probabilmente no: potrebbe cambiare di settimana in settimana, e se tu ' ri concatenandolo con tutti gli altri file, dovresti costringere l'utente a scaricare tutto di nuovo.

Il boilerplate HTML5 fa un ottimo lavoro nel fornire una soluzione generica per questo:

1. Modernizr viene caricato da locale nella testa: è molto piccolo e differisce molto da istanza a istanza, quindi non ha senso provarlo da un CDN e non farà molto male all'utente caricarlo dal tuo server. Viene messo in testa perché i CSS potrebbero usarlo, quindi vuoi che i suoi effetti siano noti prima che il corpo venga renderizzato. Tutto il resto va in fondo, per impedire agli script più pesanti di bloccare il rendering durante il caricamento e l'esecuzione.
2. jQuery dal CDN, poiché quasi tutti lo usano ed è piuttosto pesante. L'utente probabilmente lo avrà già memorizzato nella cache prima di visitare il tuo sito, nel qual caso lo caricherà immediatamente dalla cache.
3. Tutte le dipendenze di terze parti più piccole e gli snippet di codice che probabilmente non cambieranno molto vengono concatenati in un plugins.js file caricato dal tuo server. Questo verrà memorizzato nella cache con un'intestazione di scadenza distante la prima volta che l'utente visita e caricato dalla cache nelle visite successive.
4. Il tuo codice principale viene inserito main.js, con un'intestazione di scadenza più vicina per tenere conto del fatto che la logica dell'applicazione può cambiare di settimana in settimana o di mese in mese. In questo modo, quando hai risolto un bug o introdotto nuove funzionalità quando l'utente visita tra due settimane da adesso, questo può essere caricato di nuovo mentre tutto il contenuto sopra può essere portato dalla cache.

Per le altre tue principali librerie, dovresti esaminarle individualmente e chiederti se dovrebbero seguire l'esempio di jQuery, essere caricate individualmente dal tuo server o essere concatenate. Un esempio di come potresti arrivare a queste decisioni:

• Angular è incredibilmente popolare e molto grande. Scaricalo dalla CDN.
• Twitter Bootstrap ha un livello di popolarità simile, ma hai una selezione relativamente ridotta dei suoi componenti e, se l'utente non lo possiede già, potrebbe non valere la pena fargli scaricare l'intera cosa. Detto questo, il modo in cui si inserisce nel resto del codice è piuttosto intrinseco e non è probabile che lo cambierai senza ricostruire l'intero sito, quindi potresti voler mantenerlo ospitato localmente ma mantenere i file separati dal tuo principale plugins.js. In questo modo puoi sempre aggiornare il tuo plugins.jscon le estensioni Bootstrap senza costringere l'utente a scaricare tutto il core di Bootstrap.

Ma non c'è alcun imperativo: il tuo chilometraggio può variare.