JavaScript Kompressorer: Hvordan og Hvorfor at Minify Dine JS

0
177

Vi har alle været der, du har lært hvordan til at bygge en fantastisk hjemmeside

Hvordan man Laver en Hjemmeside: For Begyndere

Hvordan man Laver en Hjemmeside: For Begyndere
I dag vil jeg være guide dig gennem processen for at lave en komplet hjemmeside fra bunden. Fortvivl ikke, hvis det lyder svært. Jeg vil guide dig igennem hvert trin af måde.
Læs Mere

men når du offentliggør det, det er alt for langsom.

Minifying din javascript er en måde til at fremskynde website response times (sammen med at komprimere HTML –

Hvordan Komprimeret HTML Virker, og Hvorfor Du Måske har Brug for Det

Hvordan Komprimeret HTML Virker, og Hvorfor Du Måske har Brug for Det
I denne artikel, vil vi gå over de to vigtigste metoder til komprimeret HTML, hvorfor HTML-filer skal være skrumpet, og hvordan at gå om det.
Læs Mere

), og heldigvis for dig, er det en nem proces. I dag vil jeg vise dig alt, hvad du behøver at vide.

Hvad Betyder Minify Betyde?

Processen af minification (eller minifying) er et simpelt koncept. Når du skriver kode i JavaScript eller andre sprog, der er mange funktioner, der er nødvendige for at gøre koden lettere for mennesker at forstå — computere er ligeglad, hvad du kalder dine variabler, eller hvor meget afstand der er omkring parenteser, for eksempel.

minified code

Ved minifying kode, kan du drastisk at reducere filstørrelsen. En mindre fil, vil derfor være hurtigere for dine brugere til at downloade. Hvis du kun skriver én eller to linjer med JavaScript, der sandsynligvis ikke vil være en mærkbar forbedring. Men hvis du skriver en masse kode, eller ved hjælp af store biblioteker som jQuery, mærkbare resultater stiger og drastisk reducerede filstørrelser er let opnåelige!

Hvis du indlæse kode fra en ekstern CDN

Hvad Cdn ‘ Er & Hvorfor Opbevaring Er Ikke Længere Et Problem

Hvad Cdn ‘ Er & Hvorfor Opbevaring Er Ikke Længere Et Problem
CDNs gøre Internettet hurtigt og hjemmesider overkommelige, selv når du skala til millioner af brugere. For det første, båndbredde koster penge; de af os, på begrænset kontrakter ved, at alt for godt. Ikke nok med at du…
Læs Mere

, såsom Google Hosted Biblioteker, du har brugt minified kode.

Hvad Betyder Minified Kode Se Ud?

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

Her er nogle unminified JavaScript fra vores guide til at bruge JSON med Python og JavaScript:

// setup nogle JSON til at bruge
var biler = [
{ “gøre”:”Porsche”, “model”:”911S” },
{ “gøre”:”Mercedes-Benz”, “model”:”220SE” },
{ “gøre”:”Jaguar”,”model”: “Mark VII” }
];

vindue.onload = function() {
// setup knappen klik
dokumentet.getElementById(“theButton”).onclick = function() {
doWork()
};
}

funktion doWork() {
// ajax JSON til serveren
$.indlæg(“modtageren”, biler, function(){

});
// stop link genindlæse siden
begivenhed.preventDefault();
}

Her er minified kode:

funktion doWork(){$.indlæg(“modtageren”,biler,function(){}),begivenhed.preventDefault()}var biler=[{gøre:”Porsche”,model:”911S”},{gøre:”Mercedes-Benz”,model:”220SE”},{gøre:”Jaguar”,der er modeller:”Mark VII”}];vindue.onload=function(){document.getElementById(“theButton”).onclick=function(){doWork()}};

Dette minified udgave af koden er 39 procent mindre. I dette eksempel variabel navne forbliver den samme, men alle de blanke og kommentarer er blevet fjernet.

Her er et andet eksempel fra vores guide til jQuery:

// dfd == udskudt
var dfd = $.Udskudt();

funktion doThing() {
$.få(‘nogle/langsom/url’, function() {
dfd.løse();
});
vende tilbage dfd.lover();
}

$.når(doThing()).derefter(function(){
konsol.log(‘YAY, det er fuldbragt’);
});

Her er minified kode:

funktion doThing(){return $.få(“nogle/langsom/url”,function(){dfd.løse()}),dfd.lover()}var dfd=$.Udskudt();$.når(doThing()).derefter(function(){konsol.log(“YAY, det er fuldbragt”)});

Denne gang var der kun 26 procent reduktion — det er stadig meget godt til sådan en mindre blok af kode.

Her er et sidste eksempel fra vores guide til at Javascript og DOM:

//erklær en ny variabel til at holde en ny h1 element

var newHeading = dokument.createElement(“h1”);

//tilføj tekst-node til dokumentet

var h1Text = dokument.createTextNode(“Overskrift Niveau 1”);

//gør det til et barn knude i den nye tekst

newHeading.appendChild(h1Text);

//tilføj dette som et barn af element, der er defineret som “bt”
dokumentet.getElementById(“bt”).appendChild(newHeading);

Bemærk, hvordan der er en masse kommentarer og blanke. Den minified udgave reduceres filstørrelsen ved at 52 procent :

var newHeading=dokument.createElement(“h1”),h1Text=dokument.createTextNode(“Overskrift Niveau 1”);newHeading.appendChild(h1Text),dokument.getElementById(“bt”).appendChild(newHeading);

Her er de størrelser af nogle fælles JavaScript Biblioteker i forhold til deres minified versioner:

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

Nogle af disse biblioteker viser en betydelig størrelse reduktion, når komprimeret (~80 procent), mens andre ikke er helt så godt (~40%). Som sagt, enhver besparelse vil gøre din hjemmeside hurtigere for dine brugere, og reducere presset på dine web-server.

Hvordan Kan Du Minify?

Nu ved du, hvordan det virker og hvad det ligner, så lad os dykke ned i, hvordan man gør det. Må ikke bekymre dig, er der ingen grund til manuelt at ændre din kode på alle! Der er en række af værktøjer der er frit tilgængelige, som 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 vil så behandle, og vende tilbage til dig på den side. Disse værktøjer vil ofte lade dig overføre flere filer.

Her er en kort runde op på online-værktøjer. De arbejder for det meste det samme, så du behøver ikke at bekymre dig for meget om, hvilken en til at vælge.

JSCompress — jeg personligt bruge denne hjemmeside mest, hvis det er bare et hurtigt job. Det er hurtigt at køre og de har endda vise dig de værktøjer, de brugte til at bygge det.

jscompress

JavaScript Minifier — Dette værktøj fungerer godt, men det virkelig skinner som en API. Dette lader dig bygge din egen integration eller service på toppen af deres eksisterende hjemmeside.

javascript minifier

JavaScript Minifier — en Anden hjemmeside med samme navn, dette værktøj er så enkle, som de kommer. Ingen indstillinger, eller menuer, bare én knap.

havascript minifier

Minify — Denne hjemmeside ser fantastisk ud, og udviklerne har klart betalt opmærksomhed til detaljerne her.

minify

Denne liste kunne blive ved for evigt. Der er så mange online-værktøjer til at minify hjemmesider, som det er svært at gå galt.

Minifying værktøjer findes også som command line tools eller plugins til dine JavaScript-editor

Top 5 Javascript Redaktører, Der Kan Gøre Kodning Meget Lettere

Top 5 Javascript Redaktører, Der Kan Gøre Kodning Meget Lettere
Disse dage, er der kun fem redaktører værd at dine overvejelser, når du skriver JavaScript. Du kan finde masser af alternativer, men ingen af dem at holde et lys til disse, så du ikke spilder din tid.
Læs Mere

. Disse værktøjer er ofte meget hurtigere at bruge, og “lige arbejde” med din eksisterende kode. Der er ingen grund til at kopiere og indsætte, og du behøver ikke at udtrække dine JavaScript fra HTML eller CSS, som kan være i den samme fil.

Hvis du bruger Microsoft Visual Studio, Bundler og Minifier udvidelse fra markedet, har over 600.000 installerer! Ikke kun det, men det er løbende opdateret og tilgængelig på GitHub.

Hvis du er en fan af Sublime Tekst som jeg er, så Minify pakken er den ene, du ønsker. Med mere end 61.000 installerer, er det en meget populær pakke, og én, der er også tilgængelig på GitHub, hvis du ønsker at bidrage til et open source projekt.

sublime minify

Endelig, hvis du er en PyCharm bruger, kan du konfigurere den til at integrere direkte med mange fælles-komprimering-værktøjer såsom YUI kompressor. Mange af disse værktøjer direkte effekt af de online-værktøjer, der er anført ovenfor.

Forbehold

Der skal være en fangst? Intet kan nogensinde blive perfekt. Nå, ja, der er et problem, men det er mindre og let arbejdede omkring:

Minified kode kan ikke blive gendannet til sin oprindelige tilstand.

Når du minify nogen kode, sin oprindelige form er tabt. Du er nødt til at holde en kopi af det, hvis du ønsker at have noget håb for nemt at foretage større ændringer, det er ikke nok at bruge version kontrol

Hvad Er Git & Hvorfor Du Bør Bruge Version Control, Hvis Du er en Udvikler

Hvad Er Git & Hvorfor Du Bør Bruge Version Control, Hvis Du er en Udvikler
Som web-udviklere, en masse af den tid, vi har tendens til at arbejde på den lokale udvikling steder, så skal du bare uploade alt, når vi er færdige. Det er fint, når det bare er dig og ændringerne er små,…
Læs Mere

.

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

Dette er ikke et stort problem, men du er nødt til at holde det i tankerne, når kodning. Som en grundlæggende regel, ukomprimeret > at udvikle og komprimeret > produktion.

Nu ved du alt hvad der er at vide om minifying JavaScript! Minifying kode er en af de måder til at presse ud af en server, og alle de store hjemmesider gør det.

Hvilke værktøjer bruger du til at minify din kode? Har du selv gider? Lad os vide i kommentarerne nedenfor!

Image Credit: NavinTar via Shutterstock