Share
Siden JavaScript-bruken har skyrocketet de siste årene, har også det rene antallet skript som lastes inn i en gjennomsnittlig nettside. Med disse skriptetiketter kommer mye bagasje, for eksempel blokkering og mangel på avhengighetsadministrasjon.
I dag vil jeg gjerne gi oppmerksomhet til en rekke JavaScript-lastere, som er mini toolkits som betydelig forenkler hvordan du legger til og laster skript.
Siden stopper 'skjer' mens manuset lastes ned.
JavaScript-filer lastet ved hjelp av manus tag blokkerer av natur. Alt som skjer eller lastes på siden stoppes mens skriptet lastes ned og utføres. Og husk at dette gjelder for hver skriptetikett. Noen moderne nettlesere kan la deg laste dem ned parallelt, men resten av siden er fortsatt blokkert fra å gjøre noe meningsfylt.
Manglende avhengighetsstyring er en stor ulempe.
Neste opp kommer spørsmålet om håndtering av avhengigheter. For din gjennomsnittlige nettside trenger du sannsynligvis ikke en. Sjekk om biblioteket ditt er lastet og gå videre. For en ikke-triviell webapplikasjon skjønt, er dette ikke en god løsning. Du må laste inn skript betinget avhengig av avhengigheter. Selv da må du fortsatt finne ut hvilken rekkefølge de er lastet inn. Du kan sannsynligvis gjøre det manuelt for 3-4 filer, men når ting begynner å hakke opp, er du sannsynligvis bedre med en automatisert løsning.
Den opprinnelige ideen for denne runden ble utløst av et innlegg over på Hacker News om å lage en liste over JavaScript-skriptlastere, omtrent en måned siden. Jeg så listen ballong opp fra 3 til en total på 10 før jeg mistet interessen og flyttet videre.
Nå som tilstrekkelig tid har gått, tror jeg at listen vil bli ganske enorm. Dessverre er min Google-fu ganske svak og jeg kan ikke synes å finne den. Hvis en eagle eyed bruker klarer å finne denne tråden, legg inn i kommentarene nedenfor så jeg kan koble til den og forhåpentligvis utvide listen min også.
Denne listen er hentet fra anbefalinger fra høyt nivå webutviklere som bruker disse verktøyene i deres applikasjoner.
Og når det gjelder mine valg her, representerer denne listen en superset av anbefalinger som fløt inn etter at jeg spurte noen av frontend-fellesskapet om å sette inn med de løsningene de bruker. Noen av løsningene nedenfor kan også håndtere avhengighetsstyring, selv om de fleste holder fast ved enkel asynkron lasting. Uavhengig av de ekstra detaljene, gjør hver av skriftene nedenfor en ting med aplomb - last opp JavaScripts med minimal oppstyr.
Så uten videre, og i ingen bestemt rekkefølge:
Hodet JS laster skript parallelt, uansett hvor mange av dem og hva nettleseren er. Legg inn skript som bilder. Bruk HTML5 og CSS3 trygt. Mål CSS for forskjellige skjermer, baner, stater og nettlesere. Gjør det eneste skriptet i HEADEN din.
Forfatter: Tero Piirainen
Prosjekt URL: Her
Størrelse: 6,3 kB
Relaterte linker:
LABjs (Loading og Blocking JavaScript) er en allsidig, on-demand JavaScript-laster, som er i stand til å laste inn en hvilken som helst JavaScript-ressurs, fra et hvilket som helst sted til en hvilken som helst side, når som helst. Du kan enkelt angi hvilke skript som har eksekveringsordreavhengigheter, og LABjs vil sikre riktig eksekveringsordre. Dette gjør at LABjs er trygt å bruke for nesten hvilken som helst JavaScript ressurs, uansett om du kontrollerer / verter det eller ikke, og om det er frittstående eller en del av et større avhengighetstreet av ressurser.
Forfatter: Kyle Simpson
Prosjekt URL: Her
Størrelse: 4,7 kB
Relaterte linker:
RequireJS er en JavaScript-fil og modullaster. Den er optimalisert for bruk i nettleseren, men den kan brukes i andre JavaScript-miljøer, som Rhino og Node. Ved å bruke en modulær skriptlaster som RequireJS, vil du forbedre hastigheten og kvaliteten på koden din.
Forfatter: James Burke
Prosjekt URL: Her
Størrelse: 13 KB
Relaterte linker:
ControlJS er en JavaScript-modul som håndterer både inline-skript og eksterne skript, forsinker manuell utførelse til etter at siden har gjengitt, gjør det mulig å laste ned skript, ikke utføres og integreres med enkle endringer i HTML og ingen kodeendringer
Forfatter: Steve Souders
Prosjekt URL: Her
Størrelse: 3,6 kB
Relaterte linker:
StealJS-prosjektet er en samling av kommando- og klientbaserte JavaScript-verktøy som gjør det enkelt å bygge, pakke, dele og konsumere JavaScript-applikasjoner. Inkluderer moduler for avhengighetsstyring, JS-komprimering, rengjøring og logging.
Forfatter: Brian Moschel
Prosjekt URL: Her
Størrelse: 11,4 KB
Relaterte linker:
yepnope er en asynkron betinget ressurslaster som er super-rask, og lar deg bare laste inn skriptene som brukerne trenger. Den fungerer med både JavaScript og CSS og har en full testpakke i QUnit som du kan kjøre i settet av støttede nettlesere for å sikre at det fungerer.
Forfatter: Alex Sexton og Ralph Holzmann
Prosjekt URL: Her
Størrelse: 3,4 KB
Relaterte linker:
Lasteren gjør det mulig å bootstrapping et konsekvent og state-of-the-art CommonJS-miljø for alle støttede plattformer (på server og i nettleser) og er derfor ideelt egnet til å bli brukt som mål for commonjs-kommandoen og utvikling av kryssplattform JavaScript-applikasjoner og biblioteker.
Forfatter: Christoph Dorn
Prosjekt URL: Her
Størrelse: 22 KB
Relaterte linker:
JSLoad er en Javascript fillaster som vi skrev for Instructables. Du gir det et sett av avhengigheter og grupperinger, og det laster opp filene du trenger, når din henrettende kode trenger dem. Den virkelige nytte av JSLoad kommer med sin evne til å gruppere avhengigheter ved hjelp av koder.
Forfatter: Eric Nguyen
Prosjekt URL: Her
Størrelse: 9,8 KB
Relaterte linker:
JsDefer har parallell / seriell lasting basert på definisjoner, avhengighet og innpakning versus uåpnet, og om avhengigheter er definert i separat def-fil eller i selve skriptet og integrasjon med Utsatt (som i jQuery 1.5) muliggjør eller forenkler mange bruksscenarier blant mange andre.
Forfatter: Boris Moore
Prosjekt URL: Her
Størrelse: 4,7 kB
Relaterte linker:
JSL-funksjoner på forespørsel lastes, er hurtigbuffer, dynamisk asynkron JavaScript-lasting, lat lasting og duplikatkildeforebygging blant mange andre funksjoner.
Forfatter: Andres Vidal
Prosjekt URL: Her
Størrelse: 2,1 kB
Relaterte linker:
Get Utility gir en mekanisme for vedlegg av skript og css ressurser - inkludert kildedomenes ressurser - til DOM etter at siden har lastet inn.
Forfatter: Adam Moore
Prosjekt URL: Her
Størrelse: 17,9 KB
Relaterte linker:
DominateJS lar deg asynkront laste alle JavaScript, og utsette sekvensiell utføring til siden laster. DominateJS har som mål å være en kryssbrowser og 100% document.write-safe bibliotek! Dette er en tungmodifisert (og kraftig!) Utvikling av ControlJS.
Forfatter: Chris Joel & Jason Benterou
Prosjekt URL: Her
Størrelse: 48 KB
load.js er en micro JS lat-loader. Bygget på toppen av chain.js, kan du lai laste dine JS-skript sekventielt eller parallelt og håndtere komplekse avhengighetskjeder.
Forfatter: Chris O'Hara
Prosjekt URL: Her
Størrelse: 2 KB
Relaterte linker:
BravoJS er en implementering av et utkast til CommonJS Modules / 2.0
Forfatter: Wes Garland
Prosjekt URL: Her
Størrelse: 10,7 KB
Bootstrap er et lite bibliotek for dynamisk lasting av JavaScript-filer.
Det er primært bruk saken er å bruke i JS-koden for å laste JS-filer bare når de brukes.
Forfatter: Scott Koon
Prosjekt URL: Her
Størrelse: 1,3 KB
LazyLoad er et lite (bare 904 bytes minifisert og gzipped), avhengighetsfritt JavaScript-verktøy som gjør det super enkelt å laste eksterne JavaScript- og CSS-filer på etterspørsel.
Når det er mulig, vil LazyLoad automatisk laste ressurser i parallell samtidig som du sikrer utførelsesrekkefølgen når du angir en rekke nettadresser som skal lastes inn. I nettlesere som ikke beholder eksekveringsrekkefølgen for asynkront belastede skript, vil LazyLoad trygt laste inn skriptene i rekkefølge.
Forfatter: Ryan Grove
Prosjekt URL: Her
Størrelse: 1,6 KB
curl.js er en liten, men veldig rask AMD-kompatibel asynkron laster. Nåværende størrelse: 4.5KB (2.1KB gzipped) ved hjelp av Googles Closure Compiler.
Hvis du vil bruke curl.js for ikke-AMD-moduler (vanlige javascript-filer), vil du bruke versjonen med js! plugin innebygd. Du vil kanskje også bygge inn domReady-modulen. Den kombinerte krøll + js + domReady-lasteren er fortsatt bare 6.1KB (2,7KB gzipped).
Forfatter: John Hann
Prosjekt URL: Her
Størrelse: 5 KB
$ script.js er en asynkron JavaScript Loader og dependence manager med et imponerende imponerende lettvekts fotavtrykk. Som mange andre skriptlastere, lar $ script.js deg laste inn skriptressurser på forespørsel fra en hvilken som helst nettadresse og ikke blokkere andre ressurser fra lasting, som CSS og bilder.
Forfatter: Dustin Diaz
Prosjekt URL: Her
Størrelse: 1,4 KB
NBL.js er et lite skript som gjør at HTML-sidene dine lastes raskere ved å laste inn alle JavaScript-filene dine asynkront (parallelt) med resten av siden din. Normalt hvis du inkluderer to eller tre skript på siden din, vil nettleseren vente på at de skal utføres før siden din vises.
Forfatter: Berklee
Prosjekt URL: Her
Størrelse: 971 B
Relaterte linker:
Mens hvert av verktøyene som er oppført ovenfor, håndterer skriptopplasting på litt unike måter, må du sørge for å utføre testene dine når du bestemmer hvilken som er den rette for deg.
Som jeg nevnte tidligere, hvis du tror at en laster skal være her, men ikke, slipp oss en linje under, og vi oppdaterer raundupen tilsvarende.
Accentsconagua