Share
Pe măsură ce utilizarea JavaScript a crescut foarte mult în ultimii ani, numărul de scripturi care sunt încărcate într-o pagină web medie este același. Cu aceste etichete de script vine o mulțime de bagaje, cum ar fi blocarea și lipsa de gestionare a dependenței.
Astăzi, aș dori să vă atrag atenția asupra unui număr de încărcătoare JavaScript, care sunt mini-instrumente care simplifică în mod semnificativ modul în care adăugați și încărcați scripturi.
Pagina se oprește "se întâmplă" în timp ce scriptul este descărcat.
Fisierele JavaScript încărcate utilizând scenariu eticheta blochează prin natura lor. Tot ceea ce se întâmplă sau se încarcă pe pagină este oprit în timp ce scriptul este descărcat și executat. Și rețineți că acest lucru se aplică fiecărei etichete de script. Unele browsere moderne vă pot permite să le descărcați în paralel, dar restul paginii este încă blocat de a face ceva semnificativ.
Lipsa de gestionare a dependenței este un mare dezavantaj.
Înainte vine problema legării dependențelor. Pentru pagina web medie, probabil că nu aveți nevoie de una. Verificați dacă biblioteca dvs. este încărcată și continuați. Cu toate acestea, pentru o aplicație web non-trivială, aceasta nu este o soluție excelentă. Va trebui să încărcați scripturi în funcție de dependențe. Chiar și atunci, va trebui totuși să dați seama de ordinea în care sunt încărcate. Puteți face acest lucru manual, probabil, pentru 3-4 fișiere, dar când lucrurile încep să se adune, probabil că sunteți mai bine cu o soluție automatizată.
Ideea inițială a acestei runde a fost declanșată de un post de la Hacker News despre crearea unei liste de încărcătoare de script-uri JavaScript, aproximativ o lună în urmă. Am privit balonul din lista de la 3 la un total de 10 înainte de a-mi pierde interesul și m-am mutat.
Acum, că a trecut suficient timp, cred că lista va fi destul de masivă. Din păcate, Google-fu-ul meu este destul de slab și nu pot să-l găsesc. Dacă un utilizator cu ochi vultur reușește să găsească acest fir, postați în comentariile de mai jos, astfel încât să vă pot lega la el și, sperăm, să-mi extind lista și aici.
Această listă este extrasă din recomandările dezvoltatorilor web de nivel înalt care utilizează aceste instrumente în aplicațiile lor.
Și în ceea ce privește alegerile mele de aici, această listă reprezintă o supersetare a recomandărilor care au început să curgă după ce am rugat o parte din comunitatea din front-front să se gândească la soluțiile pe care le folosesc. Unele dintre soluțiile de mai jos se pot ocupa și de gestionarea dependenței, deși majoritatea se supun încărcării asincrone simple. Indiferent de avantajele extra, fiecare dintre scenariile de mai jos face un lucru cu aplomb - încărcați JavaScript-urile cu o coajă minimă.
Așadar, fără nici un fel de ado, și în nici o ordine particulară:
Head JS încarcă scripturi în paralel, indiferent cât de multe dintre ele și ce este browserul. Încarcă scripturi ca imaginile. Utilizați HTML5 și CSS3 în condiții de siguranță. Vizați CSS pentru diferite ecrane, căi, stări și browsere. Faceți-l singurul script în HEAD.
Autor: Tero Piirainen
URL-ul proiectului: Aici
Mărimea: 6,3 KB
Link-uri relevante:
LABjs (JavaScript de încărcare și blocare) este un încărcător de JavaScript cu scop general, capabil să încarce orice resursă JavaScript, din orice locație, în orice pagină, în orice moment. Puteți specifica cu ușurință ce script-uri au dependențe de ordine de execuție și LABjs va asigura ordinea de execuție corespunzătoare. Acest lucru face LABjs sigur pentru a fi folosit pentru orice resursă JavaScript, indiferent dacă îl controlați / gazdați sau nu, și dacă este independent sau face parte dintr-un arbore de resurse mai mare de resurse.
Autor: Kyle Simpson
URL-ul proiectului: Aici
Mărimea: 4,7 KB
Link-uri relevante:
RequireJS este un fișier JavaScript și un modul de încărcare. Este optimizat pentru utilizarea în browser, dar poate fi folosit și în alte medii JavaScript, cum ar fi Rhino și Node. Utilizarea unui încărcător de script-uri modulare, cum ar fi RequireJS, va îmbunătăți viteza și calitatea codului.
Autor: James Burke
URL-ul proiectului: Aici
Mărimea: 13 KB
Link-uri relevante:
ControlJS este un modul JavaScript care se ocupă atât de script-uri in-line, cât și de script-uri externe, întârzie executarea script-ului până după redarea paginii, permite scrierile să fie descărcate, neexecutate și integrate cu modificări simple în HTML și fără modificări de cod
Autor: Steve Souders
URL-ul proiectului: Aici
Mărimea: 3,6 KB
Link-uri relevante:
Proiectul StealJS este o colecție de utilitare JavaScript bazate pe comandă și client, care ușurează construirea, ambalarea, partajarea și consumarea aplicațiilor JavaScript. Include module pentru gestionarea dependenței, compresie JS, curățare și logare.
Autor: Brian Moschel
URL-ul proiectului: Aici
Mărimea: 11,4 KB
Link-uri relevante:
yepnope este un încărcător de resurse condițional asincron, care este foarte rapid și vă permite să încărcați numai scripturile de care au nevoie utilizatorii dvs. Funcționează atât cu JavaScript, cât și cu CSS și are o suită completă de test în Qunit pe care o puteți rula în setul de browsere acceptate pentru a vă asigura că funcționează.
Autor: Alex Sexton și Ralph Holzmann
URL-ul proiectului: Aici
Mărimea: 3,4 KB
Link-uri relevante:
Încărcătorul permite bootstraparea unui mediu CommonJS compatibil și de ultimă oră pentru orice platformă acceptată (pe server și în browser) și, prin urmare, este ideală pentru a fi utilizată ca țintă pentru comanda commonjs și pentru dezvoltarea platformei cross-platform Aplicații JavaScript și biblioteci.
Autor: Christoph Dorn
URL-ul proiectului: Aici
Mărimea: 22 KB
Link-uri relevante:
JSLoad este un încărcător de fișiere Javascript pe care l-am scris pentru Instrucables. Îți dai un set de dependențe și grupări și încarcă fișierele de care ai nevoie când codul de execuție are nevoie de ele. Utilitatea reală a JSLoad vine cu capacitatea sa de a grupa dependențele folosind etichete.
Autor: Eric Nguyen
URL-ul proiectului: Aici
Mărimea: 9,8 KB
Link-uri relevante:
JsDefer include încărcarea paralelă / serială pe baza definițiilor, a dependenței și a înfășurării versus dezarhivate și dacă dependențele sunt definite în fișier separat def sau în script-ul însuși și integrarea cu Deferred (ca în jQuery 1.5) permite sau simplifică multe scenarii de utilizare între multe alții.
Autor: Boris Moore
URL-ul proiectului: Aici
Mărimea: 4,7 KB
Link-uri relevante:
JSL include funcții de încărcare la cerere, browser-ul poate fi cacheabil, încărcare JavaScript dinamică asincronă, încărcare leneșă și prevenirea sursei duplicate într-o tonă de alte caracteristici.
Autor: Andres Vidal
URL-ul proiectului: Aici
Mărimea: 2,1 KB
Link-uri relevante:
Get Utility oferă un mecanism pentru atașarea resurselor de script și css - inclusiv resursele de domenii intermediare - DOM după încărcarea paginii.
Autor: Adam Moore
URL-ul proiectului: Aici
Mărimea: 17,9 KB
Link-uri relevante:
DominateJS vă permite să încărcați asincron toate JavaScript-ul dvs. și să amânați executarea secvențială până la încărcarea paginii. DominateJS își dorește să fie o bibliotecă încrucișată și o bibliotecă 100% document.write-safe! Aceasta este o evoluție puternic modificată (și puternică!) A ControlJS.
Autor: Chris Joel și Jason Benterou
URL-ul proiectului: Aici
Mărimea: 48 KB
load.js este un micro JS leneș-încărcător. Construit pe partea de sus a chain.js, vă permite să încărcați leneș script-urile JS secvențial sau în paralel și să manipulați lanțuri complexe de dependență.
Autor: Chris O'Hara
URL-ul proiectului: Aici
Mărimea: 2 KB
Link-uri relevante:
BravoJS este o implementare a unui proiect propus pentru modulele CommonJS / 2.0
Autor: Wes Garland
URL-ul proiectului: Aici
Mărimea: 10,7 KB
Bootstrap este o bibliotecă mică pentru încărcarea dinamic a fișierelor JavaScript.
Cazul principal de utilizare este utilizarea codului JS pentru a încărca fișierele JS numai atunci când sunt utilizate.
Autor: Scott Koon
URL-ul proiectului: Aici
Mărimea: 1,3 KB
LazyLoad este un utilitar JavaScript (care are doar 904 octeți minificat și gzipat), care nu este dependent de JavaScript, ceea ce îl face foarte ușor să încărcați fișiere JavaScript și CSS externe la cerere.
Ori de câte ori este posibil, LazyLoad va încărca automat resursele în paralel în timp ce asigură ordinea de execuție atunci când specificați un șir de adrese URL de încărcat. În browserele care nu păstrează ordinea de execuție a script-urilor încărcate asincron, LazyLoad va încărca secvențial scenariile.
Autor: Ryan Grove
URL-ul proiectului: Aici
Mărimea: 1,6 KB
curl.js este un încărcător asincron compatibil AMD, dar foarte rapid. Dimensiunea curentă: 4.5KB (2.1KB gzipped) utilizând Compilatorul de închidere Google.
Dacă doriți să utilizați curl.js pentru module non-AMD (fișiere obișnuite javascript), veți dori să utilizați versiunea cu js! plug-in-ul integrat. Ați putea dori, de asemenea, să construiți în modulul domReady. Controlerul combinat curl + js + domReady este încă numai 6.1KB (2.7KB gzipped).
Autor: John Hann
URL-ul proiectului: Aici
Mărimea: 5 KB
$ script.js este un încărcător JavaScript asincron și un manager de dependență cu o amprentă extraordinară, impresionantă. Ca și multe alte încărcătoare de script, $ script.js vă permite să încărcați resursele de script la cerere de la orice adresă URL și să nu blocați alte resurse de la încărcare, cum ar fi CSS și imagini.
Autor: Dustin Diaz
URL-ul proiectului: Aici
Mărimea: 1,4 KB
NBL.js este un script minuscul care va face ca paginile dvs. HTML să se încarce mai rapid prin încărcarea tuturor fișierelor JavaScript în mod asincron (în paralel) cu restul paginii. În mod normal, dacă includeți două sau trei script-uri în pagina dvs., browserul va aștepta ca acestea să fie executate înainte de afișarea paginii.
Autor: Berklee
URL-ul proiectului: Aici
Mărimea: 971 B
Link-uri relevante:
În timp ce fiecare dintre instrumentele enumerate mai sus manipulează încărcarea script-urilor într-un mod ușor unic, asigurați-vă că efectuați testele atunci când decideți care este cea potrivită pentru dvs..
După cum am menționat mai devreme, dacă credeți că un încărcător ar trebui să fie aici, dar nu este, renunțăm la o linie de mai jos și vom actualiza în mod corespunzător coarda.
Accentsconagua