Share
En av de mest värdefulla metoderna för att optimera din JavaScript-kod kan överraska dig - ta bort den från dina HTML-filer helt och hållet. I den här videon från min kurs, Designerguiden för JavaScript-optimering, lär du dig att externa och minifiera JavaScript.
Ett bra sätt att öka effektiviteten i vår kod är genom att externalisera och minimera vår kod.
När vi pratar om att externalisera vår kod, tar jag allt av vår JavaScript ut av våra HTML-sidor och lägger in JavaScript i en separat JavaScript-fil, en .js-fil.
Det är väldigt lätt att göra. Du skulle bara ta allt inne i manus taggar, ta bort det och skapa sedan en ny textfil med en .js-tillägg. Då skulle du helt enkelt använda en manus tagg för att peka på den filen.
Så här är ett exempel. Jag har en index.html-fil med JavaScript-kod inuti den. Så jag markerar helt enkelt allt inne i manus taggar och klippa den.
Och då kan vi bli av med manus taggar helt och hållet genom att markera och radera dem.
Och då ska jag skapa en ny JavaScript-fil i min JavaScript-mapp och bara ringa den site.js.
Det spelar ingen roll vilken textredigerare du använder. Jag använder Visual Studio-kod här, men du kan också använda parentes eller någon annan vanlig textredigerare. Men jag sparar den som site.js, och jag klistrar bara in all den JavaScript-koden i den.
Nu kommer det inte att fungera ännu eftersom vi inte pekar på denna JavaScript i vår HTML-fil än.
Men vi kan hoppa tillbaka till vårt index.html. Och sedan, efter att vi har laddat alla våra beroende, skapar vi våra egna manus tagg för att ladda filen som vi just skapat.
Så det finns i vår JavaScript-mapp js / och då ringde jag det site.js, så koden är:
Det är verkligen allt som krävs för att externisera JavaScript.
En av de stora fördelarna med att ha JavaScript i en separat fil är att du så enkelt kan minimera eller minska den JavaScript-koden. Och när du har en minifierad version av din kod, kommer den här minifierade versionen att springa mycket snabbare, eftersom det kommer att bli en mindre filstorlek.
Det kommer bli svårt att läsa eller redigera den minifiera filen. Därför lagrar du den ursprungliga kopian av din JavaScript så att om du behöver göra ändringar gör du ändringar i den ursprungliga JavaScript-filen och minskar sedan den igen.
Nu, hur minskar du? Det finns flera alternativ.
De flesta moderna kodredigerare har plugins som kommer att minska din JavaScript för dig. Till exempel använder jag Visual Studio Code. Om vi går till våra tillägg och bara gör en sökning efter "Minifiera" kan du se flera alternativ för att minska din kod.
En annan gratis textredigerare som heter Brackets har också tillägg som du kan använda för att minska kod. Så om du går till tilläggshanteraren för parenteser och gör en sökning efter "minifiera" visas en JavaScript-minifierare.
Tänk på att du måste ändra filen som du pekar på i HTML-filen när du har kodat för din kod. Så om du minifierade site.js så skulle du ha en ny version som förmodligen heter site.min.js. Och så i din HTML, skulle du vilja peka på den minifierade versionen istället för den ursprungliga versionen av din kod. Annars är all denna minering meningslöst
Om du av en eller annan anledning gillar att använda anteckningsblock för att göra all din kodredigering, kan du fortfarande minska, och ett sätt du kan göra det är att gå till en webbplats som JSCompress.
I grund och botten kan du bara klistra in koden och klicka sedan på Komprimera JavaScript knappen och du ser att detta komprimerade vår kod med 74%.
Det här är bara en mycket liten bit av JavaScript här, så du kan tänka dig att om du hade mycket JavaScript på din sida så skulle det verkligen spara mycket filstorlek. Och när du har en högtrafikwebbplats, kommer det verkligen att hjälpa till mycket.
En fördel med att externalisera och minimera ditt JavaScript är att det låter dig hantera caching lite bättre.
Låt oss exempelvis säga att du har en bit av JavaScript-kod som du ska använda på flera olika sidor på din webbplats. Det skulle vara meningsfullt att sätta den lilla biten av JavaScript-kod i sin egen JavaScript-fil, så att en gång din användare besöker den en gång, är den redan cachad i sin webbläsare. Då, när de besöker en annan sida som pekar på samma JavaScript-fil, behöver den inte ladda den JavaScript igen. Så det kommer att minska antalet begäranden som görs för den specifika JavaScript-delen.
Om du vill ta det här till nästa nivå kan du använda ett Content Delivery Network (CDN) för att lagra versioner av dina JavaScript-filer på geografiskt olika platser. Så du kan få din JavaScript lagrad på servrar över hela världen.
Fördelen med det är att om du har skapat din webbplats i Texas och någon i Storbritannien vill komma åt din webbplats, då utan en CDN, skulle den användaren behöva ansluta till din server för att få alla de filer de behöver.
Men om din JavaScript är i en CDN så är chansen att det kommer att finnas en version av den JavaScript-filen på en server, antingen i Storbritannien eller någonstans i Europa. Så det skulle vara mycket närmare den användarens plats, vilket innebär att det skulle ladda ner snabbare och springa mer smidigt.
Tänk på att en CDN kostar pengar, så det är egentligen bara något du vill driva om du är redo för nästa nivå. Men det kan verkligen hjälpa till att påskynda din webbplats.
I hela kursen, The Designer's Guide till JavaScript Optimization, lär du dig mer optimeringstekniker som är perfekta för webbdesigners. Jag ska visa dig några enkla att implementera tekniker för att göra JavaScript, och därmed dina webbplatser, löper smidigt.
Du kan ta kursen direkt med en abonnemang på Envato Elements. För en enda månatlig avgift får du inte bara tillgång till kursen utan också till vårt växande bibliotek med över 1000 videokurser och branschledande e-böcker på Envato Tuts+.
Dessutom får du obegränsade nedladdningar från det enorma Envato Elements-biblioteket med 460 000 + kreativa tillgångar. Skapa med unika teckensnitt, foton, grafik och mallar, och leverera bättre projekt snabbare.
Accentsconagua