JavaScript -kompressorer: Hvordan og hvorfor minimere din JS

Vi har alle været der, har du lært hvordan man bygger et fantastisk websted , men når du først har udgivet det, er det ulideligt langsomt.

At formindske dit javascript er en måde at fremskynde webstedets svartider (sammen med komprimering af HTML ), og heldigvis for dig er det en let proces. I dag viser jeg dig alt hvad du behøver at vide.

Hvad betyder Minify?

Processen med minificering (eller formindskelse ) er et simpelt koncept. Når du skriver kode i JavaScript eller et andet sprog, er der mange funktioner, der kun kræves for at gøre koden lettere for mennesker at forstå - computere er ligeglade med, hvad du kalder dine variabler, eller hvor meget afstand der er omkring parenteser, for eksempel.

Ved at formindske kode kan du reducere dens filstørrelse drastisk. En mindre fil vil derfor være hurtigere for dine brugere at downloade. Hvis du kun skriver en eller to linjer med JavaScript, er der sandsynligvis ikke en mærkbar forbedring. Men hvis du skriver en masse kode eller bruger store biblioteker som jQuery, er det let at opnå mærkbare ydelser og drastisk reducerede filstørrelser!

Hvis du indlæser kode fra et eksternt CDN, f.eks Google hostede biblioteker , du har brugt reduceret kode.

windows 10 meddelelsescenter åbner ikke

Hvordan ser forkortet kode ud?

Lad os se på nogle eksempler. Det er svært at se virkningen af minifikation på små kodebaser, så jeg undskylder på forhånd for deres lange længde.

Her er nogle umineret JavaScript fra vores guide til brug af JSON med Python og 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();  
}

Her er den minimerede kode:

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

Denne minimerede version af koden er 39 procent mindre. I dette eksempel forbliver variabelnavnene de samme, men alt mellemrum og kommentarer er blevet fjernet.

Her er et andet eksempel fra vores guide til 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');  
});

Her er den minimerede kode:

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

Denne gang var der kun en 26 procent reduktion - det er stadig meget godt for sådan en lille blok kode.

Her er et sidste eksempel fra vores guide til Javascript og 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æg mærke til hvordan der er en masse af kommentarer og mellemrum. Den minificerede version reducerede filstørrelsen med 52 procent :

Windows 10 ekstern harddisk vises ikke

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

Her er størrelserne på nogle almindelige JavaScript -biblioteker sammenlignet med deres minimerede versioner:

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

Nogle af disse biblioteker viser en betydelig størrelsesreduktion, når de komprimeres ( ~ 80 procent ), mens andre ikke er så gode ( ~ 40 procent ). Når det er sagt, vil enhver besparelse gøre dit websted hurtigere for dine brugere og reducere belastningen på din webserver.

Hvordan formindsker du?

Nu ved du, hvordan det fungerer, og hvordan det ser ud, lad os dykke ned i, hvordan du gør det. Bare rolig, du behøver slet ikke at ændre din kode manuelt! Der er en række forskellige værktøjer frit tilgængelige, der håndterer processen for dig.

Disse virker på flere måder. De fleste online værktøjer giver dig mulighed for at kopiere og indsætte kode, som de derefter vil behandle og vende tilbage til dig på siden. Disse værktøjer lader dig ofte også uploade flere filer.

Her er en kort runde af onlineværktøjerne. De fungerer for det meste det samme, så du behøver ikke bekymre dig for meget om, hvilken du skal vælge.

JSKomprimere - Jeg bruger personligt dette websted mest, hvis det bare er et hurtigt job. Det er hurtigt at køre, og de viser dig endda de værktøjer, de brugte til at bygge det.

JavaScript Minifier - Dette værktøj fungerer godt, men det skinner virkelig som et API. Dette lader dig opbygge din egen integration eller service oven på deres eksisterende websted.

JavaScript Minifier - Et andet websted med samme navn, dette værktøj er så enkelt som de kommer. Ingen muligheder eller menuer, kun en knap.

Formindsk - Dette websted ser fantastisk ud, og udviklerne har tydeligvis lagt vægt på detaljerne her.

Denne liste kan fortsætte for evigt. Der er så mange online værktøjer til at formindske websteder, at det er svært at gå galt.

Formindskelsesværktøjer findes også som kommandolinjeværktøjer eller plugins til din JavaScript editor . Disse værktøjer er ofte meget hurtigere at bruge og 'arbejder bare' med din eksisterende kode. Det er ikke nødvendigt at kopiere og indsætte, og du behøver ikke at udtrække dit JavaScript fra HTML eller CSS, der kan være i den samme fil.

Hvis du bruger Microsoft Visual Studio, skal Bundler og Minifier udvidelse fra markedet har over 600.000 installationer! Ikke kun det, men det opdateres regelmæssigt og tilgængelig på GitHub .

Hvis du er fan af Sublim tekst som jeg er, så er Formindsk pakken er den, du ønsker. Med over 61.000 installationer er det en meget populær pakke, og det er den også tilgængelig på GitHub , hvis du ønsker at bidrage til et open source -projekt.

Endelig, hvis du er en PyCharm bruger, kan du konfigurer den til at integrere direkte med mange almindelige komprimeringsværktøjer som f.eks YUI kompressor . Mange af disse værktøjer driver direkte onlineværktøjerne ovenfor.

Advarsler

Der har at være en fangst, ikke? Intet kan nogensinde være perfekt. Nå, ja, der er et problem, men det er temmelig mindre og let arbejdet rundt:

Forkortet kode kan ikke gendannes til sin oprindelige tilstand.

Når du formindsker en kode, går den originale form tabt. Du skal beholde en kopi af den, hvis du vil have håb om let at kunne foretage større ændringer - det er ikke nok at bruge versionskontrol.

Mens det er muligt at afbryde din kode, er det aldrig helt det samme igen. Alle dine værdifulde kommentarer er tabt, for en ting.

Dette er ikke et stort problem, men du skal huske det, når du koder. Som en grundregel, ukomprimeret > udvikle og komprimeret > produktion.

Nu ved du alt, hvad der er at vide om at formindske JavaScript! Formindskelse af kode er en af måderne at presse ydelsen ud af en server, og alle de store websteder gør det.

Hvilke værktøjer bruger du til at formindske din kode? Gider du overhovedet? Lad os vide det i kommentarerne herunder!

bedste kompas -app til Android 2015

Billedkredit: NavinTar via Shutterstock

Del Del Tweet E -mail Slet disse Windows -filer og mapper for at frigøre diskplads

Har du brug for at rydde diskplads på din Windows -computer? Her er Windows -filer og mapper, der sikkert kan slettes for at frigøre diskplads.

Læs Næste Relaterede emner

Programmering
JavaScript
Java
Webdesign

Om forfatteren Joe Coburn(136 artikler udgivet)

Joe er uddannet i datalogi fra University of Lincoln, UK. Han er en professionel softwareudvikler, og når han ikke flyver med droner eller skriver musik, kan han ofte findes tage fotos eller producere videoer.

Mere fra Joe Coburn

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere