Caricamento javascript principale su ogni pagina? O suddividerlo in pagine pertinenti?

Ho un 700kbfile JS decompresso che viene caricato su ogni pagina. Prima avevo 12file javascript su ogni pagina ma per ridurre le richieste http li ho compressi tutti 1 file.

Questo file è ~130kb gzippeded è pubblicato gzip. Tuttavia sul computer locale è ancora decompresso e caricato su ogni pagina. È un problema di prestazioni?

Ho profilato javascript con il profiler di firebug ma non ho riscontrato alcun problema. Il problema / illusione che sto affrontando è che ci sono librerie jquery compresse in quel file che a volte non vengono utilizzate nella pagina corrente.

Ad esempio, jquery datatablesè compresso a 200kb e viene caricato solo su 2 pagine del mio sito Web. Un altro è jqplote questo è un altro 200kb.

Ora ho 400kbun codice in eccesso che non viene eseguito sulle 80%pagine.

Devo lasciare tutto in 1 file?

Devo estrarre le librerie jquery e caricare solo JS rilevanti nella pagina corrente?

Puoi usare requestjs per caricare dinamicamente le librerie che ti servono solo su quelle pagine. Quindi devi solo caricare il requestjs (che è di circa 14k) su tutte le pagine, risparmiando circa 385kb.

Anche l'integrazione è molto semplice: basta "racchiudere" il codice che hai con le cose include include:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

Se il tuo framework / CMS / qualunque cosa abbia le funzioni appropriate, puoi includere lo script in modo condizionale come suggerisce @Michael, ma senza la libreria aggiuntiva.

Prendendo la custodia dei tuoi database, ad esempio, WordPress potrebbe gestire la situazione tramite qualcosa di simile:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

Non c'è niente di sbagliato in RequireJS; devi solo valutare se il livello aggiuntivo di complessità che aggiunge (oltre a imparare a usarlo in primo luogo) compensa ciò che gli strumenti più prontamente disponibili possono fare per te. Se hai solo i due casi che hai menzionato sopra, questa potrebbe essere un'opzione migliore. Se hai ancora molto da fare, RequireJS potrebbe essere un approccio migliore nel complesso.

700kb di JavaScript sono un problema di prestazioni, perché devono essere analizzati dopo il caricamento della pagina. Per questo motivo, dovresti aver cura di caricare solo gli script necessari. Un grande JavaScript potrebbe essere OK su siti AJAX completi, come GMail, quando la navigazione viene gestita internamente senza uscire dalla singola pagina. Tuttavia, anche i siti AJAX completi eseguono il caricamento JS dinamico per impedire il caricamento di JS non necessari all'avvio (problemi di memoria e velocità).

Hai detto che volevi ridurre il traffico http. Dovresti giocare con la cache HTTP . Il problema è che le modifiche a JS potrebbero non essere visibili fino alla scadenza della cache, se si imposta un tempo di scadenza troppo elevato.

C'è un trucco, tuttavia, a cui non ti riferisci myscript.js, ma myscript.js?version={myversion}. Dopo l'aggiornamento dell'applicazione, si modifica {myversion}e si forza il caricamento di JavaScript.

~ 700kb di JavaScript sono un problema di prestazioni e se compressi e dobbiamo vedere le regole da seguire mentre ci si occupa di ottimizzare il codice sono:

1. Minimizza Javascripts - Semplicemente stai comprimendo e decomprimendo, il che non ha ridotto il codice, Innanzitutto usa il buon strumento Minify JS e Minimizza il tuo codice. Sono 12 file e ogni file dovrebbe essere Minify separatamente prima di clubbing per le migliori prestazioni.

2. Usa il caricamento javascript asincrono , usando il caricamento asincrono si ottengono tempi di caricamento e rendering della pagina molto rapidi. L'impatto dell'utente è molto forte perché un buon caricamento asincrono non bloccherà il processo di rendering e il tempo di caricamento della pagina percepito è fortemente ridotto. Le immagini e gli altri elementi visualizzati regolarmente verranno visualizzati come se non fosse caricato javascript.

3. Usa GOOGLE cdn per JQUERY ; Penso che tu stia usando JQUERY e lo stia caricando dal tuo sito web, che è anche un ulteriore svantaggio, usa gentilmente il CDN GOOGLE (gratuito) per caricare JQUERY. Poiché viene utilizzato da quasi ogni terzo sito Web e quindi già disponibile sul computer client nella cache.

4. Intestazioni di scadenza lunghe personalizzate : in alcuni casi il modo in cui il sito Web viene caricato con problemi di tempo di caricamento, quindi è necessario fornire le scadenze lunghe per i file JS HTTP, in modo che non possano essere scaricati ogni volta, il che ridurrà la richiesta per la seconda volta. Secondo la mia ricerca, il tempo di caricamento impiegato nella seconda pagina ha più uscite rispetto alla prima visita della pagina.

5. Verifica con la velocità della pagina : alcune volte altre risorse influiscono anche sulla velocità di caricamento della pagina di controllo incrociato e cercano anche di ottimizzare altre risorse. Come fare un po 'di passo su ogni risorsa dare un tempo extra al nostro caricamento JS.