JavaScript -kompressorer: Hur och varför minskar din JS

Vi har alla varit där, har du lärt dig hur man bygger en fantastisk webbplats , men när du publicerar det går det outhärdligt långsamt.

Att förminska ditt javascript är ett sätt att påskynda webbplatsens svarstider (tillsammans med komprimera HTML ), och lyckligtvis för dig är det en enkel process. Idag ska jag visa dig allt du behöver veta.

Vad betyder Minify?

Processen minifiering (eller förminska ) är ett enkelt koncept. När du skriver kod i JavaScript eller något annat språk finns det många funktioner som bara krävs för att göra koden lättare för människor att förstå - datorer bryr sig inte om vad du kallar dina variabler, eller hur mycket avstånd det finns runt parenteser, till exempel.

Genom att minifiera koden kan du drastiskt minska filstorleken. En mindre fil blir därför snabbare för dina användare att ladda ner. Om du bara skriver en eller två rader med JavaScript kommer det förmodligen inte att märkas någon förbättring. Men om du skriver mycket kod eller använder stora bibliotek som jQuery är det lätt att uppnå märkbara prestanda och drastiskt minskade filstorlekar!

Om du laddar kod från ett externt CDN, t.ex. Googles värdbibliotek , du har använt minifierad kod.

hur man ansluter wii till hdtv

Hur ser förkortad kod ut?

Låt oss titta på några exempel. Det är svårt att se effekterna av minifiering på små kodbaser, så jag ber om ursäkt på förhand för deras långa längd.

Här är några oförminskad JavaScript från vår guide för att använda JSON med Python och 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();  
}

Här är den minifierade koden:

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()}};

Denna minifierade version av koden är 39 procent mindre. I det här exemplet förblir variabelnamnen desamma, men alla blanksteg och kommentarer har tagits bort.

Här är ett annat exempel från vår guide till 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');  
});

Här är den minifierade koden:

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')});

Den här gången fanns det bara en 26 procent minskning - det är fortfarande mycket bra för ett så litet kodblock.

Här är ett sista exempel från vår guide till Javascript och 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);

Lägg märke till hur det finns mycket av kommentarer och blanksteg. Den minifierade versionen minskade filstorleken med 52 procent :

bli av med sidbrytning i word

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

Här är storlekarna på några vanliga JavaScript -bibliotek jämfört med deras minifierade versioner:

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

Några av dessa bibliotek visar en betydande storleksminskning när de komprimeras ( ~ 80 procent ), medan andra inte är så bra ( ~ 40 procent ). Som sagt, varje besparing kommer att göra din webbplats snabbare för dina användare och minska belastningen på din webbserver.

Hur förminskar du?

Nu vet du hur det fungerar och hur det ser ut, låt oss dyka in i hur du gör det. Oroa dig inte, du behöver inte ändra din kod manuellt alls! Det finns en mängd olika verktyg fritt tillgängliga som hanterar processen åt dig.

Dessa fungerar på flera sätt. De flesta onlineverktyg låter dig kopiera och klistra in kod, som de sedan kommer att bearbeta och återvända till dig på sidan. Dessa verktyg låter dig ofta ladda upp flera filer också.

Här är en kort sammanfattning av onlineverktygen. De fungerar mestadels på samma sätt så du behöver inte oroa dig för mycket om vilken du ska välja.

JSKomprimera - Jag använder personligen den här webbplatsen mest om det bara är ett snabbt jobb. Det är snabbt att köra och de visar dig till och med verktygen de använde för att bygga det.

JavaScript Minifier - Det här verktyget fungerar bra, men det lyser verkligen som ett API. Detta låter dig bygga din egen integration eller tjänst ovanpå deras befintliga webbplats.

JavaScript Minifier - En annan webbplats med samma namn, det här verktyget är så enkelt som det kommer. Inga alternativ eller menyer, bara en knapp.

Förminska - Den här webbplatsen ser fantastisk ut, och utvecklarna har tydligt uppmärksammat detaljerna här.

Den här listan kan pågå för alltid. Det finns så många onlineverktyg för att förminska webbplatser att det är svårt att gå fel.

Förminskningsverktyg finns också som kommandoradsverktyg eller plugins för din JavaScript -redigerare . Dessa verktyg är ofta mycket snabbare att använda och 'fungerar bara' med din befintliga kod. Det finns ingen anledning att kopiera och klistra in, och du behöver inte extrahera ditt JavaScript från HTML eller CSS som kan finnas i samma fil.

Om du använder Microsoft Visual Studio, Bundler och Minifier förlängning från marknaden har över 600 000 installationer! Inte bara det, men det uppdateras regelbundet och tillgänglig på GitHub .

Om du är ett fan av Sublim text som jag är, då Förminska paketet är det du vill ha. Med över 61 000 installationer är det ett mycket populärt paket, och det är det också tillgänglig på GitHub , om du vill bidra till ett projekt med öppen källkod.

Slutligen, om du är en PyCharm användare, du kan konfigurera den för att integrera direkt med många vanliga komprimeringsverktyg som t.ex. YUI -kompressor . Många av dessa verktyg driver direkt onlineverktygen ovan.

Varningar

där har att vara en fångst eller hur? Ingenting kan någonsin vara perfekt. Jo, ja, det finns ett problem, men det är ganska mindre och lätt att lösa:

Minifierad kod kan inte återställas till sitt ursprungliga tillstånd.

När du minifierar någon kod går den ursprungliga formen förlorad. Du måste behålla en kopia av den om du vill ha hopp om att enkelt kunna göra stora förändringar - det räcker inte med att använda versionskontroll.

Medan det är möjligt att avbryta din kod, det är aldrig riktigt samma igen. Alla dina värdefulla kommentarer går förlorade, för en sak.

Detta är inte ett stort problem, men du måste ha det i åtanke när du kodar. Som en grundregel, okomprimerad > utveckla och komprimerad > produktion.

Nu vet du allt du behöver veta om att förminska JavaScript! Minifiering av kod är ett av sätten att pressa ut prestanda från en server, och alla stora webbplatser gör det.

Vilka verktyg använder du för att minimera din kod? Bryr du dig ens? Låt oss veta i kommentarerna nedan!

bästa Android -appar som inte finns i Play Store 2016

Bildkredit: NavinTar via Shutterstock

Dela med sig Dela med sig Tweet E-post Ta bort dessa Windows -filer och mappar för att frigöra diskutrymme

Behöver du rensa diskutrymme på din Windows -dator? Här är Windows -filer och mappar som säkert kan raderas för att frigöra diskutrymme.

Läs Nästa Relaterade ämnen

Programmering
JavaScript
Java
Webbdesign

Om författaren Joe Coburn(136 artiklar publicerade)

Joe är utbildad i datavetenskap från University of Lincoln, Storbritannien. Han är en professionell mjukvaruutvecklare, och när han inte flyger drönare eller skriver musik, kan han ofta hittas ta foton eller producera videor.

Mer från Joe Coburn

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera