JavaScript-compressoren Hoe en waarom uw JS verkleinen

We zijn er allemaal geweest, je hebt geleerd hoe je een geweldige website kunt bouwen. Hoe maak je een website: voor beginners Hoe maak ik een website: voor beginners Vandaag zal ik je begeleiden bij het maken van een complete website. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen leiden. Lees meer, maar zodra je het publiceert, is het ondraaglijk traag.

Het verkleinen van uw JavaScript is een manier om de reactietijden van websites te versnellen (samen met het comprimeren van HTML Hoe gecomprimeerde HTML werkt en waarom u dit nodig hebt Hoe gecomprimeerde HTML werkt en waarom u het misschien nodig hebt In dit artikel bespreken we de twee belangrijkste methoden voor gecomprimeerde HTML, waarom HTML-bestanden moeten worden gekrompen, en hoe u dat moet doen. Lees meer), en gelukkig voor u is het een eenvoudig proces. Vandaag laat ik je alles zien wat je moet weten.

Wat verkleint gemiddeld?

Het proces van minification (of Minificatie) is een eenvoudig concept. Wanneer u code in JavaScript of in een andere taal schrijft, zijn er veel functies die alleen nodig zijn om de code voor de mens gemakkelijker te begrijpen: computers maken zich er niet druk over hoe u uw variabelen noemt, of hoeveel ruimte er tussen haakjes is, voor voorbeeld.

Door code te verkleinen, kunt u de bestandsgrootte drastisch verminderen. Een kleiner bestand zal daarom sneller door uw gebruikers worden gedownload. Als u slechts één of twee regels JavaScript schrijft, is er waarschijnlijk geen merkbare verbetering. Als u echter veel code schrijft of grote bibliotheken zoals jQuery gebruikt, neemt de prestatieverbetering aanzienlijk toe en zijn de bestandsgroottes drastisch te verkleinen.!

Als u code van een externe CDN laadt Wat CDN's zijn & Waarom opslag niet langer een probleem is Wat CDN's zijn en waarom opslag niet langer is Een probleem CDN's maken internet snel en websites betaalbaar, zelfs wanneer u opschaalt naar miljoenen gebruikers. Ten eerste kost bandbreedte geld; die van ons met beperkte contracten weten dat maar al te goed. Niet alleen ... Lees Meer, zoals Google Hosted Libraries, je hebt verkleinde code gebruikt.

Hoe ziet geminipuleerde code eruit??

Laten we enkele voorbeelden bekijken. Het is moeilijk om de impact van minificatie op kleine codebases te zien, daarom bied ik bij voorbaat mijn excuses aan voor hun lange lengte.

Hier zijn er een paar unminified JavaScript in onze handleiding voor het gebruik van JSON met Python en JavaScript:

// stel een aantal JSON in om var cars te gebruiken = ["make": "Porsche", "model": "911S", "make": "Mercedes-Benz", "model": "220SE",  "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // stel de knop in klik document.getElementById ("theButton"). onclick = function () doWork ();  function doWork () // ajax the JSON to the server $ .post ("receiver", cars, function () ); // stop link herlaad de pagina 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 () werken();

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

Hier is nog een voorbeeld uit onze gids naar jQuery:

// dfd == uitgesteld var dfd = $ .Deferred (); functie doThing () $ .get ('some / slow / url', function () dfd.resolve ();); return dfd.promise ();  $ .when (doThing ()). then (function () console.log ('YAY, het is afgelopen'););

Hier is de verkleinde code:

functie doThing () return $ .get ("some / slow / url", function () dfd.resolve ()), dfd.promise () var dfd = $. Deferred (); $. when (doThing ()). then (function () console.log ("YAY, het is afgelopen"));

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

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

// declareer een nieuwe variabele om een ​​nieuw h1-element te behouden var newHeading = document.createElement ("h1"); // voeg het tekstknooppunt toe aan het document var h1Text = document.createTextNode ("Koersniveau 1"); // maak er een kinderknooppunt van de nieuwe rubriek newHeading.appendChild (h1Text); // voeg dit toe als een subelement gedefinieerd als "bt" document.getElementById ("bt"). appendChild (newHeading);

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

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

Hier zijn de maten van een aantal veelgebruikte JavaScript-bibliotheken in vergelijking met hun verkleinde versies:

1. Highcharts: 1 MB> 201 KB
2. jQuery: 270 kB> 90 kB
3. MooTools: 164 kB> 93 kB

Sommige van deze bibliotheken vertonen een aanzienlijke verkleining als 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 druk op uw webserver verminderen.

Hoe verkleint u?

Nu weet je hoe het werkt en hoe het eruit ziet, laten we eens kijken hoe het werkt. Geen zorgen, u hoeft uw code helemaal niet 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 hulpmiddelen kunt u vaak ook meerdere bestanden uploaden.

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

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

JavaScript Minifier - Deze tool werkt goed, maar het schijnt echt als een API. Hiermee kunt u uw eigen integratie of service 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.

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

Deze lijst zou voor altijd kunnen doorgaan. Er zijn zoveel online tools om websites te verkleinen dat het moeilijk is om fout te gaan.

Verkleinende tools bestaan ​​ook als commandoregelhulpmiddelen of plug-ins voor uw JavaScript-editor. De 5 beste Javascript-editors voor productieve codeerders en programmeurs. De 5 beste Javascript-editors voor productieve codeerders en programmeurs. Tegenwoordig zijn er slechts vijf editors die uw aandacht waard zijn bij het schrijven van JavaScript. Je kunt tientallen alternatieven vinden, maar geen enkele houdt hier een kaars voor, dus verspil je tijd niet. Lees verder . Deze hulpmiddelen zijn vaak veel sneller te gebruiken, en “gewoon werk” met uw bestaande code. U hoeft niet te kopiëren en te plakken en u hoeft uw JavaScript niet te extraheren met HTML of CSS die zich mogelijk in hetzelfde bestand bevinden.

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

Als je een fan bent van Sublime Text zoals ik ben, dan is het Minify-pakket dat je wilt. Met meer dan 61.000 installaties is dit een erg populair pakket, en een pakket dat ook beschikbaar is op GitHub, mocht je willen bijdragen aan een open source project.

Ten slotte, als u een PyCharm-gebruiker bent, kunt u deze configureren om rechtstreeks te integreren met veel algemene compressietools, zoals de YUI-compressor. Veel van deze tools geven rechtstreeks toegang tot de online hulpprogramma's die hierboven worden vermeld.

Voorbehoud

Er heeft als een vangst toch? Niets kan ooit perfect zijn. Nou ja, er is één probleem, maar het is vrij onbeduidend en gemakkelijk rond te werken:

Geminimaliseerde 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 hoop wilt hebben dat je gemakkelijk grote wijzigingen kunt aanbrengen - het is niet genoeg om versiebeheer te gebruiken Wat is Git en waarom zou je versiebeheer moeten gebruiken als je een ontwikkelaar bent Wat is Git en waarom jij Zou Versiebeheer moeten gebruiken als je een ontwikkelaar bent Als webontwikkelaars, werken we vaak vaak op lokale ontwikkelsites en uploaden we gewoon alles wanneer we klaar zijn. Dit is prima als je alleen bent en de veranderingen klein zijn, ... Lees meer .

Hoewel het mogelijk is om uw code te ontcijferen, is deze nooit meer hetzelfde. Al uw waardevolle opmerkingen zijn verloren, bijvoorbeeld.

Dit is geen enorm probleem, maar u moet het in gedachten houden bij het coderen. Als een basisregel, ongecomprimeerde > ontwikkelen en gecomprimeerde > productie.

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

Welke hulpmiddelen gebruik je om je code te verkleinen? Vind je het zelfs lastig? Laat het ons weten in de comments hieronder!

Beeldcredits: NavinTar via Shutterstock

Ontdek meer over: Java, JavaScript, Web Design.