JavaScript-kompressorer Hvordan og hvorfor å redusere JS

Vi har alle vært der, du lærte å bygge et fantastisk nettsted Hvordan lage et nettsted: For nybegynnere Hvordan lage et nettsted: For nybegynnere I dag vil jeg veilede deg gjennom prosessen med å lage et komplett nettsted fra bunnen av. Ikke vær redd hvis dette høres vanskelig ut. Jeg vil lede deg gjennom det hvert skritt av veien. Les mer, men når du publiserer det, er det uutholdelig sakte.

Minifisering av javascript er en måte å øke hastigheten på nettsidenes responstider (sammen med komprimere HTML. Hvordan komprimeres HTML-verk og hvorfor du trenger det. Hvordan komprimert HTML-verk og hvorfor du trenger det. I denne artikkelen vil vi gå over de to hovedmetodene for komprimert HTML, hvorfor HTML-filer skal krympes, og hvordan du går om det. Les mer), og heldigvis for deg er det en enkel prosess. I dag skal jeg vise deg alt du trenger å vite.

Hva betyr redusere?

Prosessen av forminskning (eller Minimalisering) 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 enklere for mennesker å forstå - datamaskiner bryr seg ikke hva du kaller variablene dine, eller hvor mye avstand er det rundt parentes for eksempel.

Ved å redusere koden, kan du drastisk redusere filstørrelsen. En mindre fil vil derfor bli raskere for brukerne å laste ned. Hvis du bare skriver en eller to linjer med JavaScript, vil det nok ikke være en merkbar forbedring. Men hvis du skriver mye kode, eller bruker store biblioteker som jQuery, øker merkbar ytelse og drastisk reduserte filstørrelser lett oppnås.!

Hvis du laster inn kode fra en ekstern CDN Hva CDN er og hvorfor lagring ikke lenger er et problem Hvilke CDN er og hvorfor lagring ikke lenger er Et problem CDNer gjør Internett raskt og nettsteder rimelig når du skaler til millioner av brukere. For det første koster båndbredde penger; de av oss med begrensede kontrakter vet det altfor godt. Ikke bare gjør du ... Les mer, for eksempel Google Hosted Libraries, du har brukt minifisert kode.

Hva ser det ut som en kodet kode?

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

Her er noen unminified JavaScript fra vår guide til bruk av JSON med Python og JavaScript:

// sett inn noen JSON for å bruke varbiler = [«« make »:« Porsche »,« modell »:« 911S »,« merke »:« Mercedes-Benz »,« modell »:« 220SE » "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // oppsett knappen klikker document.getElementById ("theButton"). onclick = function () doWork ();  funksjon doWork () // ajax JSON til serveren $ .post ("mottaker", biler, funksjon () ); // stopp lenke som laster opp siden event.preventDefault (); 

Her er den minifiserte koden:

funksjon doWork () $. post ("mottaker", biler, funksjon () ), event.preventDefault () var biler = [make: "Porsche", modell: "911S", make: " Mercedes-Benz ", modell:" 220SE ", merke:" Jaguar ", modell:" Mark VII "; window.onload = function () document.getElementById (" theButton "). doWork ();

Denne minifiserte versjonen av koden er 39 prosent mindre. I dette eksemplet forblir de variable navnene det samme, men alle hvite plasser og kommentarer er fjernet.

Her er et annet eksempel fra vår guide til jQuery:

// dfd == utsatt var dfd = $ .Deferred (); funksjon doThing () $ .get ('litt / sakte / url', funksjon () dfd.resolve ();); returnere dfd.promise ();  $ .when (doThing ()). deretter (funksjon () console.log ('YAY, det er ferdig'););

Her er den minifiserte koden:

funksjonen doThing () return $ .get ("noen / slow / url", funksjon () dfd.resolve ()), dfd.promise () var dfd = $. Utsatt (); $. når ()). da (funksjon () console.log ("YAY, den er ferdig"));

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

Her er et siste eksempel fra vår guide til Javascript og DOM:

// erklære en ny variabel for å holde et nytt h1 element var newHeading = document.createElement ("h1"); // legg til tekstnoden til dokumentet var h1Text = document.createTextNode ("Overskrift Nivå 1"); // gjør det til en barnekode av den nye overskriften newHeading.appendChild (h1Text); // legg til dette som et barn av element definert som "bt" document.getElementById ("bt"). appendChild (newHeading);

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

var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Overskrift Nivå 1"); newHeading.appendChild (h1Text); document.getElementById ("bt"). appendChild (newHeading);

Her er størrelsene på noen vanlige JavaScript-biblioteker i forhold til 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å bra (~ 40 prosent). Når det er sagt, vil noen lagring gjøre nettstedet ditt raskere for brukerne, og redusere belastningen på webserveren din.

Hvordan reduserer du?

Nå vet du hvordan det fungerer og hvordan det ser ut, la oss dykke inn i hvordan du gjør det. Ikke bekymre deg, det er ikke nødvendig å manuelt endre koden din 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 laste opp flere filer også.

Her er en kort runde av elektroniske verktøy. De jobber for det meste like, så du trenger ikke å bekymre deg for mye om hvilken du skal velge.

JSCompress - Personlig bruker jeg dette nettstedet mest hvis det bare er en rask jobb. Det er raskt å løpe, og de viser deg selv verktøyene de pleide å bygge den.

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

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

Minify - Denne nettsiden ser utrolig ut, og utviklerne har klart tatt hensyn til detaljene her.

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

Minifiseringsverktøy finnes også som kommandolinjeverktøy eller plugin for JavaScript-editoren. De 5 beste Javascript-redaktørene for produktive kodere og programmerere. De 5 beste Javascript-redaktørene for produktive kodere og programmerere. I disse dager er det bare fem redaktører verdt å vurdere når du skriver JavaScript. Du kan finne dusinvis av alternativer, men ingen av dem holder et lys til disse, så ikke kast bort tiden din. Les mer . Disse verktøyene er ofte mye raskere å bruke, og “bare arbeid” 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 samme fil.

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

Hvis du er en fan av Sublime Text som jeg er, er Minify-pakken den du vil ha. Med over 61 000 installasjoner er det en veldig populær pakke, og en som også er tilgjengelig på GitHub, bør du ønske å bidra til et åpen kildekodeprosjekt.

Endelig, hvis du er en PyCharm-bruker, kan du konfigurere den for å integrere direkte med mange vanlige komprimeringsverktøy som YUI-kompressor. Mange av disse verktøyene styrer direkte de elektroniske verktøyene som er oppført ovenfor.

Advarsler

Der har å være en fangst rett? Ingenting kan noensinne være perfekt. Vel, ja, det er ett problem, men det er ganske lite og jobbet lett rundt:

Minifisert kode kan ikke gjenopprettes til sin opprinnelige tilstand.

Når du minifiserer en kode, er den opprinnelige formen tapt. Du må beholde en kopi av det hvis du vil ha noe håp om å gjøre store endringer - det er ikke nok å bruke versjonskontroll Hva er Git og hvorfor du bør bruke Versjonskontroll Hvis du er utvikler Hva er Git og hvorfor du Skal bruke versjonskontroll Hvis du er utvikler Som webutviklere, legger vi mye tid på å jobbe på lokale utviklingssteder, og laster så opp alt når vi er ferdige. Dette er greit når det bare er deg og endringene er små, ... Les mer .

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

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

Nå vet du alt som er å vite om å minske JavaScript! Minifiseringskode er en av måtene for å presse ytelsen ut av en server, og alle de store nettstedene gjør det.

Hvilke verktøy bruker du for å redusere koden din? Bryter du selv? Gi oss beskjed i kommentarene nedenfor!

Image Credit: NavinTar via Shutterstock

Utforsk mer om: Java, JavaScript, Webdesign.