Share
Aangezien het gebruik van JavaScript de laatste jaren enorm is toegenomen, geldt hetzelfde voor het enorme aantal scripts dat in een gemiddelde webpagina wordt geladen. Met deze script-tags komt veel bagage, zoals blokkeren en gebrek aan afhankelijkheidsbeheer.
Vandaag zou ik graag uw aandacht willen vestigen op een aantal JavaScript-laders, dit zijn mini-toolkits die het toevoegen en laden van scripts aanzienlijk vereenvoudigen.
De pagina stopt met 'happen' terwijl het script is gedownload.
JavaScript-bestanden geladen met behulp van de script tag blokkeren van nature. Alles wat gebeurt of wordt geladen op de pagina wordt gestopt terwijl het script wordt gedownload en uitgevoerd. En onthoud dat dit van toepassing is op elke scripttag. Sommige moderne browsers kunnen u deze parallel laten downloaden, maar de rest van de pagina is nog steeds geblokkeerd om iets zinvols te doen.
Gebrek aan afhankelijkheidsmanagement is een groot nadeel.
Vervolgens komt het probleem van het omgaan met afhankelijkheden. Voor uw gemiddelde webpagina heeft u er waarschijnlijk geen nodig. Controleer of uw bibliotheek is geladen en ga verder. Voor een niet-triviale webapplicatie is dit echter geen geweldige oplossing. U moet scripts voorwaardelijk laden op basis van afhankelijkheden. Zelfs dan moet je nog steeds uitzoeken in welke volgorde ze zijn geladen. Je kunt het waarschijnlijk handmatig doen voor 3-4 bestanden, maar als de zaken beginnen op te lopen, ben je waarschijnlijk beter af met een geautomatiseerde oplossing.
Het oorspronkelijke idee voor deze round-up werd aangewakkerd door een bericht op Hacker News over het maken van een lijst met JavaScript-scriptladers, ongeveer een maand geleden. Ik keek toe hoe de lijst opliep van 3 tot een totaal van 10 voordat ik mijn interesse verloor en verder ging.
Nu er voldoende tijd is verstreken, denk ik dat die lijst behoorlijk massaal zal zijn. Helaas is mijn Google-fu vrij zwak en ik kan het blijkbaar niet vinden. Als een gebruiker van adelaar eyed deze thread kan vinden, post dan in de comments hieronder, zodat ik er een link naar kan maken en hopelijk ook mijn lijst hier kan uitbreiden.
Deze lijst is gebaseerd op aanbevelingen van web-ontwikkelaars van hoog niveau die deze tools gebruiken in hun applicaties.
En wat betreft mijn keuzes hier, deze lijst vertegenwoordigt een superset van aanbevelingen die binnenstroomden nadat ik een aantal van de front-endcommunity had gevraagd om hun oplossingen te gebruiken. Sommige oplossingen hieronder behandelen mogelijk ook afhankelijkheidsbeheer, maar de meeste houden zich aan eenvoudige asynchrone belasting. Ongeacht de extra aardigheden doet elk van de onderstaande scripts één ding met aplomb - laad JavaScripts met minimale gedoe.
Dus zonder verder gedoe en in willekeurige volgorde:
Hoofd JS laadt scripts parallel, ongeacht hoeveel en wat de browser is. Laad scripts zoals afbeeldingen. Gebruik veilig HTML5 en CSS3. Target CSS voor verschillende schermen, paden, toestanden en browsers. Maak het het enige script in je hoofd.
Schrijver: Tero Piirainen
Project URL: Hier
Grootte: 6.3 KB
Gerelateerde Links:
LABjs (JavaScript laden en blokkeren) is een JavaScript-lader op aanvraag die JavaScript-bronnen van elke locatie, op elke pagina en op elk gewenst moment kan laden. U kunt eenvoudig opgeven welke scripts afhankelijkheden van uitvoeringsvolgorde hebben en LABJ's zorgen voor een juiste uitvoeringsvolgorde. Hierdoor zijn LABJ's veilig te gebruiken voor vrijwel elke JavaScript-bron, of u deze nu beheert / host of niet, en of deze op zichzelf staat of deel uitmaakt van een grotere afhankelijkheidsboom van bronnen.
Schrijver: Kyle Simpson
Project URL: Hier
Grootte: 4,7 KB
Gerelateerde Links:
RequireJS is een JavaScript-bestand en module-lader. Het is geoptimaliseerd voor gebruik binnen de browser, maar het kan ook worden gebruikt in andere JavaScript-omgevingen, zoals Rhino en Node. Het gebruik van een modulaire scriptlader zoals RequireJS zal de snelheid en kwaliteit van uw code verbeteren.
Schrijver: James Burke
Project URL: Hier
Grootte: 13 kB
Gerelateerde Links:
ControlJS is een JavaScript-module die zowel inline-scripts als externe scripts afhandelt, scriptuitvoering vertraagt tot nadat de pagina is gerenderd, scripts kan downloaden, niet uitvoeren en kan worden geïntegreerd met eenvoudige wijzigingen in HTML en geen codewijzigingen
Schrijver: Steve Souders
Project URL: Hier
Grootte: 3,6 KB
Gerelateerde Links:
Het StealJS-project is een verzameling opdracht- en clientgebaseerde JavaScript-hulpprogramma's die het maken, verpakken, delen en consumeren van JavaScript-applicaties gemakkelijk maken. Bevat modules voor afhankelijkheidsbeheer, JS-compressie, opschonen en loggen.
Schrijver: Brian Moschel
Project URL: Hier
Grootte: 11,4 KB
Gerelateerde Links:
yepnope is een asynchrone voorwaardelijke hulpbronloader die supersnel is en waarmee u alleen de scripts laadt die uw gebruikers nodig hebben. Het werkt met zowel JavaScript als CSS en heeft een volledige testsuite in QUnit die u kunt uitvoeren in uw set van ondersteunde browsers om te controleren of het werkt.
Schrijver: Alex Sexton en Ralph Holzmann
Project URL: Hier
Grootte: 3,4 KB
Gerelateerde Links:
De lader biedt de mogelijkheid om een consistente en geavanceerde CommonJS-omgeving te bootstrappen voor elk ondersteund platform (op server en in browser) en is dus bij uitstek geschikt om te worden gebruikt als doelwit voor de opdracht commonjs en de ontwikkeling van platformonafhankelijke platforms JavaScript-toepassingen en -bibliotheken.
Schrijver: Christoph Dorn
Project URL: Hier
Grootte: 22 KB
Gerelateerde Links:
JSLoad is een Javascript-bestandslader die we hebben geschreven voor Instructables. U geeft het een reeks afhankelijkheden en groeperingen en het laadt de bestanden die u nodig hebt, wanneer uw uitvoeringscode deze nodig heeft. Het echte nut van JSLoad komt met de mogelijkheid om afhankelijkheden te groeperen met behulp van tags.
Schrijver: Eric Nguyen
Project URL: Hier
Grootte: 9.8 KB
Gerelateerde Links:
JsDefer biedt parallelle / seriële belasting op basis van definities, afhankelijkheid en ingepakt of niet-ingepakt, en of afhankelijkheden zijn gedefinieerd in een afzonderlijk def-bestand of in het script zelf en integratie met Uitgestelde (zoals in jQuery 1.5) maakt of vereenvoudigt veel scenario's van use-case onder vele anderen.
Schrijver: Boris Moore
Project URL: Hier
Grootte: 4,7 KB
Gerelateerde Links:
JSL biedt laden op aanvraag, is browser-cacheable, dynamische asynchrone JavaScript-laden, lui laden en dubbele bronpreventie bij een ton andere functies.
Schrijver: Andres Vidal
Project URL: Hier
Grootte: 2.1 KB
Gerelateerde Links:
Het Get-hulpprogramma biedt een mechanisme voor het koppelen van script- en CSS-bronnen - inclusief resources tussen verschillende domeinen - aan de DOM nadat de pagina is geladen.
Schrijver: Adam Moore
Project URL: Hier
Grootte: 17,9 KB
Gerelateerde Links:
Met DominateJS kunt u asynchroon al uw JavaScript laden en uitgestelde uitvoering uitstellen totdat de pagina wordt geladen. DominateJS wil een browserbrowser en een 100% document.schrijf-veilige bibliotheek zijn! Dit is een sterk gewijzigde (en krachtige!) Evolutie van ControlJS.
Schrijver: Chris Joel en Jason Benterou
Project URL: Hier
Grootte: 48 kB
load.js is een micro JS lazy-loader. Gebouwd bovenop chain.js, hiermee kunt u uw JS-scripts achter elkaar of parallel laden en complexe afhankelijkheidsketens afhandelen.
Schrijver: Chris O'Hara
Project URL: Hier
Grootte: 2 KB
Gerelateerde Links:
BravoJS is een implementatie van een voorgestelde draft voor CommonJS Modules / 2.0
Schrijver: Wes Garland
Project URL: Hier
Grootte: 10.7 KB
Bootstrap is een kleine bibliotheek voor het dynamisch laden van JavaScript-bestanden.
Het belangrijkste gebruik is om in uw JS-code JS-bestanden alleen te laden als ze worden gebruikt.
Schrijver: Scott Koon
Project URL: Hier
Grootte: 1.3 KB
LazyLoad is een klein (slechts 904 bytes verkleind en gzipped), afhankelijkheidsvrij JavaScript-hulpprogramma dat het super eenvoudig maakt om externe JavaScript- en CSS-bestanden op aanvraag te laden.
Waar mogelijk zal LazyLoad automatisch bronnen parallel laden, terwijl de uitvoeringsvolgorde wordt gegarandeerd wanneer u een reeks URL's opgeeft die moeten worden geladen. In browsers die de uitvoeringsvolgorde van asynchroon geladen scripts niet bewaren, zal LazyLoad de scripts veilig achter elkaar laden.
Schrijver: Ryan Grove
Project URL: Hier
Grootte: 1.6 KB
curl.js is een kleine, maar zeer snelle AMD-compatibele asynchrone lader. Huidige grootte: 4,5 KB (2,1 KB gzipped) met Google's Closure Compiler.
Als u curl.js wilt gebruiken voor niet-AMD-modules (gewone javascript-bestanden), wilt u de versie gebruiken met de js! plugin ingebouwd. Mogelijk wilt u ook de domReady-module inbouwen. De gecombineerde curl + js + domReady-lader is nog steeds slechts 6,1 KB (2,7 kB gzipped).
Schrijver: John Hann
Project URL: Hier
Grootte: 5 KB
$ script.js is een asynchrone JavaScript-lader en afhankelijkheidsbeheerder met een verbluffend indrukwekkende lichtgewicht voetafdruk. Net als veel andere scriptladers, kunt u met $ script.js scriptbronnen op aanvraag laden vanuit elke URL en niet blokkeren dat andere bronnen worden geladen, zoals CSS en afbeeldingen.
Schrijver: Dustin Diaz
Project URL: Hier
Grootte: 1,4 KB
NBL.js is een klein script dat ervoor zorgt dat uw HTML-pagina's sneller worden geladen door al uw JavaScript-bestanden asynchroon (parallel) met de rest van uw pagina te laden. Normaal gesproken als u twee of drie scripts op uw pagina opneemt, wacht de browser totdat ze worden uitgevoerd voordat uw pagina wordt weergegeven.
Schrijver: Berklee
Project URL: Hier
Grootte: 971 B
Gerelateerde Links:
Hoewel elk van de hierboven genoemde hulpprogramma's het laden van het script op enigszins unieke manieren verwerkt, moet u uw tests uitvoeren om te bepalen welke de juiste is voor u.
Zoals ik al eerder zei, als je denkt dat een loader hier moet zijn, maar dat niet is, stuur ons dan een regel hieronder en we zullen de roundup dienovereenkomstig bijwerken.
Accentsconagua