JavaScript -kompressorer: Hvordan og hvorfor du skal minimere JS

JavaScript -kompressorer: Hvordan og hvorfor du skal minimere JS

Vi har alle vært der, har du lært hvordan bygge et fantastisk nettsted , men når du først publiserer det, går det ulidelig sakte.





Minifisering av javascriptet ditt er en måte å få raskere responstid på nettstedet (sammen med komprimering av HTML ), og heldigvis for deg er det en enkel prosess. I dag skal jeg vise deg alt du trenger å vite.



Hva betyr Minify?

Prosessen av minifisering (eller minifisering ) er et enkelt konsept. Når du skriver kode i JavaScript eller et annet språk, er det mange funksjoner som bare kreves for å gjøre koden lettere for mennesker å forstå - datamaskiner bryr seg ikke om hva du kaller variablene dine, eller hvor stor avstand det er rundt parenteser, for eksempel.





Ved å minifisere koden kan du drastisk redusere filstørrelsen. En mindre fil vil derfor være raskere for brukerne å laste ned. Hvis du bare skriver en eller to linjer med JavaScript, er det sannsynligvis ingen merkbar forbedring. Men hvis du skriver mye kode, eller bruker store biblioteker som jQuery, er det lett å merke merkbare ytelser og drastisk reduserte filstørrelser!

Hvis du laster inn kode fra en ekstern CDN, for eksempel Google Hosted Libraries , du har brukt minifisert kode.



hvordan får jeg portrettmodus på iphone 7

Hvordan ser forkortet kode ut?

La oss se på noen eksempler. Det er vanskelig å se effekten av minifisering på små kodebaser, så jeg beklager på forhånd for deres lange lengde.

Her er noen uminert JavaScript fra vår guide til bruk av 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 minifiserte 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()}};

Denne minifiserte versjonen av koden er 39 prosent mindre. I dette eksemplet forblir variabelnavnene de samme, men alt mellomrom og kommentarer er fjernet.



Her er et annet eksempel fra vår 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 minifiserte 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')});

Denne gangen var det bare en 26 prosent reduksjon - det er fortsatt veldig bra for en så liten kodeblokk.

Her er et siste eksempel fra vår 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);

Legg merke til hvordan det er mye av kommentarer og mellomrom. Den minifiserte versjonen reduserte filstørrelsen med 52 prosent :

bringebær pi 3 b+ vs b
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Her er størrelsene på noen vanlige JavaScript -biblioteker sammenlignet med deres minifiserte versjoner:

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

Noen av disse bibliotekene viser en betydelig størrelsesreduksjon når de komprimeres ( ~ 80 prosent ), mens andre ikke er så gode ( ~ 40 prosent ). Når det er sagt, vil enhver lagring gjøre nettstedet ditt raskere for brukerne dine, og redusere belastningen på webserveren din.

Hvordan reduserer du?

Nå vet du hvordan det fungerer og hvordan det ser ut, la oss dykke ned i hvordan du gjør det. Ikke bekymre deg, du trenger ikke å endre koden manuelt i det hele tatt! Det finnes en rekke verktøy fritt tilgjengelig som håndterer prosessen for deg.

Disse fungerer på flere måter. De fleste elektroniske verktøy lar deg kopiere og lime inn kode, som de deretter vil behandle og returnere til deg på siden. Disse verktøyene lar deg ofte også laste opp flere filer.

Her er en kort oppsummering av de elektroniske verktøyene. De fungerer stort sett det samme, slik at du ikke trenger å bekymre deg for mye om hvilken du skal velge.

JSKomprimere - Jeg personlig bruker dette nettstedet mest hvis det bare er en rask jobb. Den er rask å kjøre, og de viser deg til og med verktøyene de brukte for å bygge den.

JavaScript Minifier - Dette verktøyet fungerer bra, men det skinner virkelig som et API. Dette lar deg bygge din egen integrasjon eller tjeneste på toppen av deres eksisterende nettsted.

JavaScript Minifier - Et annet nettsted med samme navn, dette verktøyet er så enkelt som det kommer. Ingen alternativer eller menyer, bare en knapp.

Minify - Dette nettstedet ser fantastisk ut, og utviklerne har tydeligvis tatt hensyn til detaljene her.

Denne listen kan fortsette for alltid. Det er så mange elektroniske verktøy for å minifisere nettsteder at det er vanskelig å gå galt.

Minifiseringsverktøy finnes også som kommandolinjeverktøy eller plugins for din JavaScript -editor . Disse verktøyene er ofte mye raskere å bruke, og 'fungerer bare' med din eksisterende kode. Det er ikke nødvendig å kopiere og lime inn, og du trenger ikke å pakke ut JavaScript fra HTML eller CSS som kan være i den samme filen.

Hvis du bruker Microsoft Visual Studio, vil Bundler og Minifier utvidelse fra markedet har over 600 000 installasjoner! Ikke bare det, men det oppdateres jevnlig og tilgjengelig på GitHub .

Hvis du er fan av Sublim tekst slik jeg er, da Minify pakken er den du vil ha. Med over 61 000 installasjoner er det en veldig populær pakke, og det er den også tilgjengelig på GitHub , hvis du ønsker å bidra til et åpen kildekode -prosjekt.

Til slutt, hvis du er en PyCharm bruker, du kan konfigurere den til å integrere direkte med mange vanlige komprimeringsverktøy som f.eks YUI kompressor . Mange av disse verktøyene driver nettverktøyene som er oppført direkte.

Advarsler

Der har å være en fangst, ikke sant? Ingenting kan noen gang være perfekt. Vel, ja, det er ett problem, men det er ganske lite og lett å løse:

Minifisert kode kan ikke gjenopprettes til opprinnelig tilstand.

Når du minifiserer en kode, går den opprinnelige formen tapt. Du må beholde en kopi av den hvis du vil ha håp om å enkelt kunne gjøre store endringer - det er ikke nok å bruke versjonskontroll.

Mens det er mulig å avbryte koden din, er den aldri helt den samme igjen. Alle dine verdifulle kommentarer er tapt, for en ting.

Dette er ikke et stort problem, men du må huske på det når du koder. Som en grunnregel, ukomprimert > utvikle og komprimert > produksjon.

Nå vet du alt du trenger å vite om minifisering av JavaScript! Minifisering av kode er en av måtene å presse ytelsen ut av en server, og alle de store nettstedene gjør det.

Hvilke verktøy bruker du for å minifisere koden din? Gidder du engang? Gi oss beskjed i kommentarene nedenfor!

windows media player åpner ikke windows 10

Bildekreditt: NavinTar via Shutterstock

Dele Dele kvitring E -post Slett disse Windows -filene og mappene for å frigjøre diskplass

Trenger du å tømme diskplass på Windows -datamaskinen? Her er Windows -filer og mapper som trygt kan slettes for å frigjøre diskplass.

Les neste Relaterte temaer
  • Programmering
  • JavaScript
  • Java
  • Webdesign
Om forfatteren Joe Coburn(136 artikler publisert)

Joe er utdannet i informatikk fra University of Lincoln, Storbritannia. Han er en profesjonell programvareutvikler, og når han ikke flyr droner eller skriver musikk, kan han ofte bli funnet å ta bilder eller produsere videoer.

Mer fra Joe Coburn

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere