Share
En av de mest verdifulle metodene for optimalisering av JavaScript-koden kan overraske deg - fjerne den fra HTML-filene dine helt og holdent. I denne videoen fra kurset mitt Designerhåndboken til JavaScript-optimalisering, lærer du hvordan du eksterniserer og minifiserer JavaScript.
En flott måte å øke effektiviteten av koden vår er ved å eksternalisere og minimere koden vår.
Når vi snakker om eksternalisering av koden, er det jeg snakker om å ta alle våre JavaScript ut av våre HTML-sider og sette JavaScript inn i en egen JavaScript-fil, en .js-fil.
Det er veldig enkelt å gjøre. Du ville bare ta alt inne i manus tagger, fjern det, og opprett en ny tekstfil med en .js-utvidelse. Da ville du bare bruke en manus tag for å peke på den filen.
Så her er et eksempel. Jeg har en index.html-fil med JavaScript-kode inne i den. Så jeg bare markere alt inni manus merker og klipp det.
Og så kan vi kvitte oss med manus merker alt ved å markere og slette dem.
Og så skal jeg lage en ny JavaScript-fil i min JavaScript-mappe og bare ringe den site.js.
Det spiller ingen rolle hvilken tekstredigerer du bruker. Jeg bruker Visual Studio-kode her, men du kan også bruke parenteser eller andre enkle tekstredigeringsprogrammer. Men jeg lagrer det som site.js, og jeg vil bare lime inn all den JavaScript-koden i den.
Nå skal det ikke fungere enda fordi vi ikke peker på dette JavaScript i vår HTML-fil enda.
Men vi kan hoppe tilbake til vår index.html. Og da, etter at vi har lastet inn alle våre avhengigheter, lager vi vår egen manus tag for å laste filen som vi nettopp har opprettet.
Så det er i vår JavaScript-mappe JS / og så ringte jeg det site.js, så koden er:
Det er egentlig alt som trengs for å eksternisere JavaScript.
En av de store fordelene med å ha JavaScript i en egen fil er at du så enkelt kan minimere eller redusere JavaScript-koden. Og når du har en minifisert versjon av koden din, vil den minifiserte versjonen kjøre mye raskere, fordi det kommer til å bli en mindre filstørrelse.
Det blir vanskelig å lese eller redigere den beregnede filen. Det er derfor du lagrer den originale kopien av JavaScript, slik at hvis du trenger å gjøre endringer, gjør du endringer i den originale JavaScript-filen, og deretter reduserer den igjen.
Nå, hvordan kan du redusere? Det er flere alternativer.
De fleste moderne kode redaktører har plugins som vil redusere JavaScript for deg. For eksempel bruker jeg Visual Studio Code. Hvis vi går til utvidelsene våre og bare gjør et søk etter "Minify", kan du se flere alternativer for å redusere koden din.
En annen gratis online tekstredigerer som heter Brackets, har også utvidelser du kan bruke til å redusere koden. Så hvis du går til utvidelsesbehandleren for parenteser og gjør et søk etter "minifiser", vil du se en JavaScript minifier.
Husk at etter at du har kalkulert koden din, må du endre filen du peker på i HTML-filen. Så hvis du minifiserte site.js, ville du ha en ny versjon sannsynligvis kalt site.min.js. Og så i HTML-en din, ønsker du å peke på den minifiserte versjonen i stedet for den opprinnelige versjonen av koden din. Ellers er all den minifunksjonen meningsløs
Hvis du av en eller annen grunn liker å bruke notisblokk for å gjøre all kode redigering, kan du likevel redusere, og en måte du kan gjøre på, er å gå til et nettsted som JSCompress.
I utgangspunktet lar dette deg bare lime inn koden din og deretter klikke på Komprimere JavaScript knappen, og du vil se at dette komprimerte vår kode med 74%.
Dette er bare en veldig liten del av JavaScript her, så du kan tenke deg at hvis du hadde mye JavaScript på siden din, ville dette virkelig spare deg for mye filstørrelse. Og når du har en høy trafikk nettsted, det kommer virkelig til å hjelpe mye.
En fordel ved eksternalisering og minifisering av JavaScript er at den lar deg håndtere caching litt bedre.
La oss for eksempel si at du har en del av JavaScript-kode som du skal bruke på flere forskjellige sider på nettstedet ditt. Det ville være fornuftig å sette den lille delen av JavaScript-koden i sin egen JavaScript-fil, slik at når brukeren besøker den en gang, er den allerede cached i nettleseren sin. Da, når de besøker en annen side som peker på samme JavaScript-fil, trenger den ikke å laste den JavaScript på nytt. Så det vil redusere antall forespørsler som er laget for den aktuelle delen av JavaScript.
Hvis du vil ta dette til neste nivå, kan du bruke et Content Delivery Network (CDN) til å lagre versjoner av JavaScript-filene dine på geografisk forskjellige steder. Så du kan ha JavaScript lagret på servere over hele verden.
Fordelen med det er at hvis du har opprettet nettstedet ditt i Texas, og noen i Storbritannia ønsker å få tilgang til nettstedet ditt, så uten CDN, må den brukeren koble til serveren din for å få alle filene de trenger.
Men hvis JavaScript er i en CDN, er det sjansene for at det vil være en versjon av JavaScript-filen på en server, enten i Storbritannia eller et sted i Europa. Så det ville være mye nærmere den brukerens plassering, noe som betyr at den vil laste ned raskere og kjøre mer jevnt.
Husk at en CDN koster penger, så det er egentlig bare noe du vil forfølge hvis du er klar for det neste nivået. Men det kan virkelig bidra til å øke hastigheten på nettstedet ditt.
I hele kurset, Designerhåndboken til JavaScript-optimalisering, lærer du mer optimaliseringsteknikker som er perfekte for webdesignere. Jeg vil vise deg noen enkle å implementere teknikker for å lage JavaScript, og dermed dine nettsteder løper jevnt.
Du kan ta dette kurset med en gang med et abonnement på Envato Elements. For en enkelt månedlig avgift får du tilgang ikke bare til dette kurset, men også til vårt voksende bibliotek med over 1000 videokurser og bransjeledende e-bøker på Envato Tuts+.
I tillegg får du ubegrensede nedlastinger fra det store biblioteket Envato Elements med 460 000 + kreative eiendeler. Lag med unike skrifttyper, bilder, grafikk og maler, og lever bedre bedre prosjekter raskere.
Accentsconagua