Share
Dato che l'utilizzo di JavaScript è salito alle stelle negli ultimi anni, così ha il numero di script che viene caricato in una pagina Web media. Con questi tag script arriva un sacco di bagagli, come il blocco e la mancanza di gestione delle dipendenze.
Oggi vorrei portare la tua attenzione su un numero di caricatori JavaScript, che sono mini toolkit che semplificano in modo significativo il modo in cui aggiungi e carica gli script.
La pagina smette di "accadere" mentre lo script viene scaricato.
File JavaScript caricati utilizzando il copione i tag stanno bloccando per natura. Tutto ciò che accade o il caricamento sulla pagina viene interrotto mentre lo script viene scaricato ed eseguito. E ricorda che questo si applica a ogni tag dello script. Alcuni browser moderni potrebbero permetterti di scaricarli in parallelo, ma il resto della pagina è ancora bloccato dal fare qualcosa di significativo.
La mancanza di gestione delle dipendenze è un grosso inconveniente.
Il prossimo arriva il problema della gestione delle dipendenze. Per la tua pagina web media, probabilmente non ne hai bisogno. Controlla se la tua libreria è caricata e vai avanti. Per un'applicazione web non banale, tuttavia, questa non è una soluzione eccezionale. Avrai bisogno di caricare script in modo condizionale in base alle dipendenze. Anche allora, dovrai comunque capire l'ordine in cui sono caricati. Probabilmente puoi farlo manualmente per 3-4 file, ma quando le cose cominciano ad accumularsi, probabilmente stai meglio con una soluzione automatizzata.
L'idea iniziale di questo riepilogo è stata scatenata da un post su Hacker News sulla creazione di un elenco di caricatori di script JavaScript, circa un mese fa. Ho visto l'elenco salire da 3 a un totale di 10 prima di perdere interesse e andare avanti.
Ora che è trascorso un tempo sufficiente, penso che la lista sarà abbastanza massiccia. Sfortunatamente, il mio Google-fu è piuttosto debole e non riesco a trovarlo. Se un utente con gli occhi d'aquila riesce a trovare questo thread, inserisci i commenti qui sotto in modo che possa collegarmi ad esso e, si spera, espandere il mio elenco anche qui.
Questo elenco è tratto dalle raccomandazioni degli sviluppatori di alto livello che utilizzano questi strumenti nelle loro applicazioni.
E per quanto riguarda le mie scelte qui, questa lista rappresenta un superset delle raccomandazioni che si sono susseguite dopo che ho chiesto ad alcune delle community front-end di presentare le soluzioni che stanno utilizzando. Alcune delle soluzioni seguenti possono gestire anche le gestioni delle dipendenze, anche se la maggior parte si limita al semplice caricamento asincrono. Indipendentemente dalle sottigliezze extra, ciascuno degli script qui sotto fa una cosa sola con aplomb - carica JavaScripts con il minimo sforzo.
Quindi, senza ulteriori indugi, e in nessun ordine particolare:
Head JS carica gli script in parallelo, non importa quanti di loro e quale sia il browser. Carica script come immagini. Usa HTML5 e CSS3 in modo sicuro. Target CSS per diversi schermi, percorsi, stati e browser. Falla diventare l'unica sceneggiatura nel TESTO.
Autore: Tero Piirainen
URL del progetto: Qui
Taglia: 6.3 KB
Link correlati:
LABjs (caricamento e blocco JavaScript) è un caricatore JavaScript on-demand multiuso, in grado di caricare qualsiasi risorsa JavaScript, da qualsiasi posizione, in qualsiasi pagina, in qualsiasi momento. Puoi facilmente specificare quali script hanno dipendenze degli ordini di esecuzione e LABjs garantirà il corretto ordine di esecuzione. Ciò rende LABjs sicuro da utilizzare praticamente per qualsiasi risorsa JavaScript, indipendentemente dal fatto che tu la controlli / l'ospitiamo o no, e se sia indipendente o parte di una più grande struttura di risorse dipendente.
Autore: Kyle Simpson
URL del progetto: Qui
Taglia: 4,7 KB
Link correlati:
RequireJS è un file JavaScript e un caricatore di moduli. È ottimizzato per l'uso in-browser, ma può essere utilizzato in altri ambienti JavaScript, come Rhino e Node. L'uso di un caricatore di script modulare come RequireJS migliorerà la velocità e la qualità del tuo codice.
Autore: James Burke
URL del progetto: Qui
Taglia: 13 KB
Link correlati:
ControlJS è un modulo JavaScript che gestisce sia gli script inline che gli script esterni, ritarda l'esecuzione degli script fino a dopo il rendering della pagina, consente il download degli script, non l'esecuzione e l'integrazione con semplici modifiche all'HTML e senza modifiche al codice
Autore: Steve Souders
URL del progetto: Qui
Taglia: 3,6 KB
Link correlati:
Il progetto StealJS è una raccolta di utilità JavaScript basate su comandi e client che facilitano la creazione, l'imballaggio, la condivisione e il consumo di applicazioni JavaScript. Include moduli per la gestione delle dipendenze, la compressione JS, la pulizia e la registrazione.
Autore: Brian Moschel
URL del progetto: Qui
Taglia: 11,4 KB
Link correlati:
yepnope è un caricatore di risorse condizionale asincrono che è super veloce e consente di caricare solo gli script di cui gli utenti hanno bisogno. Funziona con JavaScript e CSS e ha una suite di test completa in QUnit che puoi eseguire nel tuo set di browser supportati per assicurarti che funzioni.
Autore: Alex Sexton e Ralph Holzmann
URL del progetto: Qui
Taglia: 3,4 KB
Link correlati:
Il caricatore consente di eseguire il bootstrap di un ambiente CommonJS coerente e all'avanguardia per qualsiasi piattaforma supportata (su server e browser) e quindi è ideale per essere utilizzato come target per il comando commonjs e lo sviluppo di piattaforme multipiattaforma Applicazioni e librerie JavaScript.
Autore: Christoph Dorn
URL del progetto: Qui
Taglia: 22 KB
Link correlati:
JSLoad è un caricatore di file Javascript che abbiamo scritto per Instructables. Gli dai un insieme di dipendenze e raggruppamenti e carica i file che ti servono, quando il codice di esecuzione ne ha bisogno. La vera utilità di JSLoad è data dalla sua capacità di raggruppare le dipendenze usando i tag.
Autore: Eric Nguyen
URL del progetto: Qui
Taglia: 9,8 KB
Link correlati:
JsDefer offre il caricamento parallelo / seriale basato su definizioni, dipendenza e wrapping rispetto a unwrapped, e se le dipendenze sono definite in file def separati o nello script stesso e l'integrazione con Deferred (come in jQuery 1.5) abilita o semplifica molti scenari d'uso tra molti altri.
Autore: Boris Moore
URL del progetto: Qui
Taglia: 4,7 KB
Link correlati:
Funzionalità JSL per il caricamento su richiesta, il caching del browser, il caricamento dinamico asincrono di JavaScript, il caricamento lento e la prevenzione della duplicazione delle sorgenti tra una tonnellata di altre funzionalità.
Autore: Andres Vidal
URL del progetto: Qui
Taglia: 2,1 KB
Link correlati:
Get Utility fornisce un meccanismo per collegare le risorse di script e css, incluse le risorse tra domini, al DOM dopo il caricamento della pagina.
Autore: Adam Moore
URL del progetto: Qui
Taglia: 17,9 KB
Link correlati:
DominateJS consente di caricare in modo asincrono tutto il codice JavaScript e di rinviare l'esecuzione sequenziale fino al caricamento della pagina. DominateJS mira ad essere una libreria cross-browser e al 100% document.write-safe! Questa è un'evoluzione fortemente modificata (e potente!) Di ControlJS.
Autore: Chris Joel e Jason Benterou
URL del progetto: Qui
Taglia: 48 KB
load.js è un lazy-loader micro JS. Costruito in cima a chain.js, consente di caricare in modo lento gli script JS in sequenza o in parallelo e gestire catene di dipendenze complesse.
Autore: Chris O'Hara
URL del progetto: Qui
Taglia: 2 KB
Link correlati:
BravoJS è un'implementazione di una bozza proposta per CommonJS Modules / 2.0
Autore: Wes Garland
URL del progetto: Qui
Taglia: 10,7 KB
Bootstrap è una piccola libreria per caricare in modo dinamico i file JavaScript.
Il suo uso principale è l'utilizzo nel codice JS per caricare i file JS solo quando vengono utilizzati.
Autore: Scott Koon
URL del progetto: Qui
Taglia: 1,3 KB
LazyLoad è una minuscola (solo 904 byte minified e gzip), un'utilità JavaScript senza dipendenza che semplifica il caricamento di file JavaScript e CSS esterni su richiesta.
Laddove possibile, LazyLoad caricherà automaticamente le risorse in parallelo garantendo l'ordine di esecuzione quando si specifica una matrice di URL da caricare. Nei browser che non conservano l'ordine di esecuzione degli script caricati in modo asincrono, LazyLoad caricherà in modo sicuro gli script in modo sequenziale.
Autore: Ryan Grove
URL del progetto: Qui
Taglia: 1,6 KB
curl.js è un piccolo, ma molto veloce caricatore asincrono AMD-compatibile. Dimensione attuale: 4,5 KB (2,1 KB di Gzip) utilizzando il compilatore di chiusura di Google.
Se desideri utilizzare curl.js per moduli non AMD (file javascript ordinari), ti consigliamo di utilizzare la versione con js! plug-in integrato. Potresti anche voler creare il modulo domReady. Il caricatore combinato curl + js + domReady è ancora solo 6.1KB (2.7KB gzip).
Autore: John Hann
URL del progetto: Qui
Taglia: 5 KB
$ script.js è un caricatore asincrono di JavaScript e un gestore delle dipendenze con un'impronta leggera sorprendentemente impressionante. Come molti altri caricatori di script, $ script.js consente di caricare risorse di script su richiesta da qualsiasi URL e non bloccare il caricamento di altre risorse, come CSS e immagini.
Autore: Dustin Diaz
URL del progetto: Qui
Taglia: 1,4 KB
NBL.js è un minuscolo script che velocizzerà il caricamento delle pagine HTML caricando tutti i file JavaScript in modo asincrono (in parallelo) con il resto della pagina. Normalmente se includi due o tre script nella tua pagina, il browser attenderà che vengano eseguiti prima che venga visualizzata la tua pagina.
Autore: Berklee
URL del progetto: Qui
Taglia: 971 B
Link correlati:
Mentre ciascuno degli strumenti sopra elencati gestisce il caricamento degli script in modi univoci, assicurati di eseguire i test quando decidi qual è quello giusto per te.
Come ho detto prima, se pensi che un loader dovrebbe essere qui ma non lo è, scrivici una riga qui sotto e aggiorneremo la retata di conseguenza.
Accentsconagua