Share
Een van de meest waardevolle methoden voor het optimaliseren van uw JavaScript-code kan u verbazen en deze volledig uit uw HTML-bestanden verwijderen. In deze video van mijn cursus De gids voor de ontwerper van JavaScript-optimalisatie leer je hoe je JavaScript kunt externaliseren en verkleinen.
Een geweldige manier om de efficiëntie van onze code te verhogen, is door onze code te externaliseren en te minimaliseren.
Wanneer we het hebben over het externaliseren van onze code, heb ik het erover dat al onze JavaScript-code uit onze HTML-pagina's wordt gehaald en dat JavaScript in een apart JavaScript-bestand wordt geplaatst, een .js-bestand.
Het is heel gemakkelijk om te doen. Je zou gewoon alles binnenin de script tags, verwijder deze en maak vervolgens een nieuw tekstbestand met de extensie .js. Dan zou je gewoon een script tag om naar dat bestand te verwijzen.
Dus hier is een voorbeeld. Ik heb een index.html-bestand met daarin JavaScript-code. Dus ik benadruk eenvoudig alles in de script tags en knip het.
En dan kunnen we van de script tags helemaal door ze te markeren en te verwijderen.
En dan ga ik een nieuw JavaScript-bestand maken in mijn JavaScript-map en het gewoon bellen site.js.
Het maakt niet uit welke teksteditor u gebruikt. Ik gebruik Visual Studio-code hier, maar je kunt ook haakjes of een andere teksteditor gebruiken. Maar ik bewaar het als site.js en ik zal er gewoon al die JavaScript-code in plakken.
Nu gaat het nog niet werken omdat we nog niet naar dit JavaScript in ons HTML-bestand verwijzen.
Maar we kunnen terug springen naar onze index.html. En dan, nadat we al onze afhankelijkheden hebben geladen, zullen we onze eigen afhankelijkheden creëren script label om het bestand te laden dat we zojuist hebben gemaakt.
Dus het zit in onze JavaScript-map js / en toen heb ik het gebeld site.js, dus de code is:
Dat is echt alles wat nodig is om uw JavaScript te externaliseren.
Een van de grote voordelen van het hebben van uw JavaScript in een apart bestand is dat u die JavaScript-code vervolgens heel eenvoudig kunt minimaliseren of verkleinen. En als je een verkleinde versie van je code hebt, gaat die verkleinde versie veel sneller draaien, omdat het een kleinere bestandsgrootte wordt.
Het is moeilijk om dat verkleinde bestand te lezen of te bewerken. Dat is waarom u het originele exemplaar van uw JavaScript opslaat, zodat u wijzigingen in dat oorspronkelijke JavaScript-bestand aanbrengt en het vervolgens opnieuw verkleint als u wijzigingen moet aanbrengen.
Nu, hoe verkleint u? Er zijn verschillende opties.
De meeste moderne codebewerkers hebben plug-ins die uw JavaScript verkleinen voor u. Ik gebruik bijvoorbeeld Visual Studio Code. Als we naar onze extensies gaan en gewoon zoeken naar 'verkleinen', ziet u verschillende opties voor het verkleinen van uw code.
Een andere gratis online teksteditor genaamd Brackets heeft ook extensies die u kunt gebruiken om code te verkleinen. Dus als u naar de extensiebeheerder voor haakjes gaat en een zoekopdracht uitvoert naar 'verkleinen', ziet u een JavaScript-minivermerker.
Houd er rekening mee dat nadat u uw code hebt verkleind, u het bestand waarnaar u verwijst in het HTML-bestand moet wijzigen. Dus als je site.js verkleinde, zou je een nieuwe versie hebben, waarschijnlijk site.min.js. En dus zou je in je HTML naar die verkleinde versie willen verwijzen in plaats van de originele versie van je code. Anders is al dat minificeren zinloos
Als je om de een of andere reden kladblok graag gebruikt om al je code te bewerken, kun je nog steeds verkleinen, en een manier om dat te doen is door naar een website zoals JSCompress te gaan.
In principe kunt u hiermee uw code plakken en vervolgens op de knop klikken Comprimeer JavaScript knop, en je zult zien dat dit onze code met 74% comprimeerde.
Dit is gewoon een heel klein stukje JavaScript, dus je kunt je voorstellen dat als je veel JavaScript op je pagina had, dit je veel bestandsgrootte zou besparen. En wanneer u een website met veel verkeer heeft, gaat dat echt veel helpen.
Een voordeel van het externaliseren en verkleinen van uw JavaScript is dat u hiermee de cache een beetje beter kunt afhandelen.
Laten we bijvoorbeeld zeggen dat je een stuk JavaScript-code hebt die je op verschillende pagina's van je website gaat gebruiken. Het zou logisch zijn om die kleine brok JavaScript-code in zijn eigen JavaScript-bestand te plaatsen, zodat zodra uw gebruiker het eenmaal bezoekt, het al in de cache van de browser staat. Wanneer ze vervolgens een andere pagina bezoeken die naar hetzelfde JavaScript-bestand verwijst, hoeven ze dat JavaScript niet opnieuw te laden. Dus dat vermindert het aantal verzoeken voor dat specifieke stuk JavaScript.
Als u dit naar een hoger niveau wilt tillen, kunt u een Content Delivery Network (CDN) gebruiken om versies van uw JavaScript-bestanden op te slaan op geografisch verschillende locaties. U kunt dus uw JavaScript op servers over de hele wereld laten opslaan.
Het voordeel hiervan is dat als u uw website in Texas hebt gemaakt en iemand in het Verenigd Koninkrijk uw website wil bezoeken, deze gebruiker zonder een CDN verbinding met uw server moet maken om alle bestanden te krijgen die ze nodig hebben.
Maar als uw JavaScript zich in een CDN bevindt, is de kans groot dat er een versie van dat JavaScript-bestand op een server in het Verenigd Koninkrijk of ergens in Europa zal zijn. Het zou dus veel dichter bij de locatie van die gebruiker zijn, wat betekent dat het sneller zou downloaden en soepeler zou werken.
Houd er rekening mee dat een CDN geld kost, dus dat is eigenlijk alleen iets dat u wilt nastreven als u klaar bent voor dat volgende niveau. Maar het kan echt helpen om uw website te versnellen.
In de volledige cursus, de handleiding voor JavaScript-optimalisatie, leert u meer optimalisatietechnieken die perfect zijn voor webontwerpers. Ik zal u een aantal eenvoudig te implementeren technieken laten zien om uw JavaScript, en dus uw websites, soepel te laten verlopen.
Je kunt deze cursus meteen volgen met een abonnement op Envato Elements. Voor een enkel laag maandelijks bedrag krijg je niet alleen toegang tot deze cursus, maar ook tot onze groeiende bibliotheek met meer dan 1000 videocursussen en toonaangevende e-boeken over Envato Tuts+.
Bovendien krijgt u nu onbeperkte downloads van de enorme Envato Elements-bibliotheek met meer dan 460.000 creatieve items. Creëer met unieke lettertypen, foto's, afbeeldingen en sjablonen en lever sneller betere projecten.
Accentsconagua