JavaScript-compressoren: hoe en waarom uw JS verkleinen?

We zijn er allemaal geweest, je hebt geleerd hoe bouw je een geweldige website , maar als je het eenmaal publiceert, is het ondraaglijk traag.

Het verkleinen van uw javascript is een manier om de responstijden van websites te versnellen (samen met HTML comprimeren ), en gelukkig voor jou is het een eenvoudig proces. Vandaag laat ik je alles zien wat je moet weten.

Wat betekent verkleinen?

Het proces van minificatie (of verkleinen ) is een eenvoudig concept. Wanneer u code schrijft in JavaScript of een andere taal, zijn er veel functies die alleen nodig zijn om de code voor mensen gemakkelijker te begrijpen te maken -- het maakt computers niet uit hoe u uw variabelen noemt, of hoeveel ruimte er tussen haakjes is, bijvoorbeeld.

Door code te verkleinen, kunt u de bestandsgrootte drastisch verkleinen. Een kleiner bestand is daarom sneller te downloaden voor uw gebruikers. Als u slechts één of twee regels JavaScript schrijft, zal er waarschijnlijk geen merkbare verbetering zijn. Als u echter veel code schrijft of grote bibliotheken zoals jQuery gebruikt, zijn merkbare prestatieverbeteringen en drastisch verminderde bestandsgroottes gemakkelijk haalbaar!

Als u code laadt van een extern CDN, zoals: Door Google gehoste bibliotheken , je hebt verkleinde code gebruikt.

hoe een niet-koppelbaar opstartvolume te repareren

Hoe ziet geminimaliseerde code eruit?

Laten we eens kijken naar enkele voorbeelden. Het is moeilijk om de impact van minificatie op kleine codebases te zien, dus ik verontschuldig me bij voorbaat voor hun lange lengte.

Hier is wat niet-geminimaliseerd JavaScript uit onze handleiding voor het gebruik van JSON met Python en JavaScript:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

Hier is de verkleinde code:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

Deze verkleinde versie van de code is 39 procent kleiner. In dit voorbeeld blijven de variabelenamen hetzelfde, maar zijn alle spaties en opmerkingen verwijderd.

Hier is nog een voorbeeld uit onze gids voor jQuery:

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

Hier is de verkleinde code:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

Deze keer was er maar een 26 procent reductie -- dat is nog steeds erg goed voor zo'n klein codeblok.

Hier is nog een laatste voorbeeld uit onze gids voor Javascript en de DOM:

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

Let op hoe er zijn heel veel van opmerkingen en witruimte. De verkleinde versie verkleinde de bestandsgrootte met 52 procent :

microsoft software reparatie tool voor windows 10

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Hier zijn de afmetingen van enkele veelgebruikte JavaScript-bibliotheken in vergelijking met hun verkleinde versies:

Hoge grafieken: 1 MB > 201 KB
jQuery: 270 KB > 90 KB
MooTools: 164 KB > 93 KB

Sommige van deze bibliotheken vertonen een aanzienlijke vermindering van de grootte wanneer ze worden gecomprimeerd ( ~80 procent ), terwijl andere niet zo goed zijn ( ~40 procent ). Dat gezegd hebbende, elke besparing zal uw website sneller maken voor uw gebruikers en de belasting van uw webserver verminderen.

Hoe minimaliseer je?

Nu je weet hoe het werkt en hoe het eruit ziet, laten we eens kijken hoe je het moet doen. Maak je geen zorgen, het is helemaal niet nodig om je code handmatig aan te passen! Er zijn verschillende tools vrij beschikbaar die het proces voor u afhandelen.

Deze werken op verschillende manieren. Met de meeste online tools kun je code kopiëren en plakken, die ze vervolgens verwerken en naar je terugsturen op de pagina. Met deze tools kun je vaak ook meerdere bestanden uploaden.

Hier is een korte samenvatting van de online tools. Ze werken meestal hetzelfde, dus u hoeft zich niet al te veel zorgen te maken over welke u moet kiezen.

JSCompress -- Persoonlijk gebruik ik deze website het meest als het een snelle klus is. Het is snel te gebruiken en ze laten je zelfs de tools zien die ze hebben gebruikt om het te bouwen.

JavaScript-minifier -- Deze tool werkt goed, maar schittert echt als een API. Hiermee kunt u uw eigen integratie of dienst bovenop hun bestaande website bouwen.

JavaScript Minifier -- Een andere website met dezelfde naam, deze tool is zo eenvoudig als ze komen. Geen opties of menu's, slechts één knop.

Kleineren -- Deze website ziet er geweldig uit en de ontwikkelaars hebben duidelijk aandacht besteed aan de details hier.

Deze lijst kan eeuwig doorgaan. Er zijn zoveel online tools om websites te verkleinen dat het moeilijk fout gaat.

Verkleiningshulpmiddelen bestaan ook als opdrachtregelhulpmiddelen of plug-ins voor uw JavaScript-editor . Deze tools zijn vaak veel sneller in gebruik en 'werken gewoon' met je bestaande code. Het is niet nodig om te kopiëren en plakken, en u hoeft uw JavaScript niet te extraheren uit HTML of CSS die zich in hetzelfde bestand kan bevinden.

Als u Microsoft Visual Studio gebruikt, is de: Bundler en Minifier extensie van de marktplaats heeft meer dan 600.000 installaties! Niet alleen dat, maar het wordt regelmatig bijgewerkt en beschikbaar op GitHub .

Als je een fan bent van Sublieme tekst zoals ik ben, dan is de Kleineren pakket is degene die je wilt. Met meer dan 61.000 installaties is het een erg populair pakket, en dat is het ook beschikbaar op GitHub , mocht je willen bijdragen aan een open source project .

Eindelijk, als je een PyCharm gebruiker, u kunt configureer het om te integreren rechtstreeks met veel gebruikelijke compressietools zoals: YUI-compressor . Veel van deze tools sturen rechtstreeks de hierboven genoemde online tools aan.

Waarschuwingen

Daar heeft een vangst zijn toch? Niets kan ooit perfect zijn. Nou ja, er is één probleem, maar het is vrij klein en gemakkelijk te omzeilen:

Verkleinde code kan niet in de oorspronkelijke staat worden hersteld.

Wanneer u een code verkleint, gaat de oorspronkelijke vorm verloren. Je moet er een kopie van bewaren als je enige hoop wilt hebben om gemakkelijk grote veranderingen aan te brengen -- het is niet genoeg om versiebeheer te gebruiken .

Hoewel het mogelijk is om ongedaan maken uw code, het is nooit meer hetzelfde. Al uw waardevolle opmerkingen gaan verloren, om te beginnen.

Dit is geen groot probleem, maar u moet er rekening mee houden bij het coderen. Als basisregel geldt ongecomprimeerd > ontwikkelen en gecomprimeerd > productie.

Nu weet je alles wat er te weten valt over het verkleinen van JavaScript! Het verkleinen van code is een van de manieren om de prestaties uit een server te persen, en alle grote websites doen het.

Welke tools gebruik je om je code te verkleinen? Heb je er ook last van? Laat het ons weten in de reacties hieronder!

hoe maak je een ps4-fan schoon?

Afbeelding tegoed: NavinTar via Shutterstock

Deel Deel Tweeten E-mail Verwijder deze Windows-bestanden en -mappen om schijfruimte vrij te maken

Wilt u schijfruimte op uw Windows-computer vrijmaken? Hier zijn de Windows-bestanden en -mappen die veilig kunnen worden verwijderd om schijfruimte vrij te maken.

Lees volgende Gerelateerde onderwerpen

Programmeren
JavaScript
Java
Webdesign

Over de auteur Joe Coburn(136 gepubliceerde artikelen)

Joe is afgestudeerd in computerwetenschappen aan de Universiteit van Lincoln, VK. Hij is een professionele softwareontwikkelaar en als hij niet met drones vliegt of muziek schrijft, is hij vaak te vinden om foto's te maken of video's te maken.

Meer van Joe Coburn

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren