JavaScript Kompressorer: Hur och Varför Minify JS

0
87

Vi har alla varit där, du lärde mig hur man bygger en grym hemsida

Hur man Gör en Webbplats: För Nybörjare

Hur man Gör en Webbplats: För Nybörjare
Idag kommer jag att guida dig genom processen att göra en komplett webbplats från grunden. Oroa dig inte om detta låter svårt. Jag kommer att vägleda dig genom varje steg på vägen.
Läs Mer

men när du publicerar det, det är olidligt långsam.

– Minifying din javascript är ett sätt att snabba upp webbplatsen svarstider (tillsammans med komprimera HTML –

Hur Komprimerade HTML Fungerar och Varför Du Kan Behöva Det

Hur Komprimerade HTML Fungerar och Varför Du Kan Behöva Det
I denna artikel kommer vi gå över de två huvudsakliga metoder för komprimerade HTML, varför HTML-filer ska vara krympt, och hur man ska gå tillväga.
Läs Mer

), och lyckligtvis för dig, det är en enkel process. Idag ska jag visa dig allt du behöver veta.

Vad Gör Minify Menar?

Processen för minification (eller – minifying) är ett enkelt koncept. När du skriver kod i JavaScript eller något annat språk, det finns många funktioner som endast krävs för att göra koden lättare för människor att förstå — datorer som inte bryr sig om vad du kallar dina variabler, eller hur mycket mellanrum det är runt parentes, till exempel.

minified code

Av-minifying kod, kan du drastiskt minska filstorleken. En mindre fil kommer därför att vara snabbare för användarna att ladda ner. Om du bara skriva en eller två rader JavaScript, kommer det förmodligen inte vara en märkbar förbättring. Dock, om du skriver en hel del av koden, eller att använda stora bibliotek som jQuery, märkbar prestanda ökar och drastiskt minskas filstorleken är lätt att uppnå!

Om du läser in kod från en extern CDN

Vad Cdn Är & Varför Lagring Är Inte Längre Ett Problem

Vad Cdn Är & Varför Lagring Är Inte Längre Ett Problem
Cdn göra på Internet snabbt och webbplatser överkomligt även när du skala och har miljontals användare. För det första, bandbredd kostar pengar, de av oss på begränsade kontrakt vet att alla alltför väl. Inte bara du…
Läs Mer

såsom Google är Värd för Bibliotek, som du har använt minified kod.

Vad Gör Minified Kod Se Ut?

Låt oss titta på några exempel. Det är svårt att se effekterna av minification på liten kod grunder, så jag ber om ursäkt i förväg för sin långa längd.

Här är några unminified JavaScript från vår guide till att använda JSON med Python och JavaScript:

// setup några JSON att använda
var bilar = [
{ “göra”:”Porsche”, “modell”:”911″ },
{ “göra”:”Mercedes-Benz”, “modell”:”220SE” },
{ “göra”:”Jaguar”,”modell”: “Mark VII” }
];

fönster.onload = function() {
// setup knappen klickar du på
dokumentet.getElementById(“theButton”).onclick = function() {
doWork()
};
}

funktion doWork() {
// ajax JSON till servern
sek.inlägg(“mottagaren”, bilar, function(){

});
// stoppa länk för att ladda om sidan
händelsen.preventDefault();
}

Här är minified kod:

funktion doWork(){$.inlägg(“mottagaren”,bilar,function(){}),event.preventDefault()}var bilar=[{göra:”Porsche”,modell:”911″},{göra:”Mercedes-Benz”,modell:”220SE”},{göra:”Jaguar”,modell:”Mark VII”}];fönster.onload=function(){document.getElementById(“theButton”).onclick=function(){doWork()}};

Detta minified version av koden är 39 procent mindre. I detta exempel, den rörliga namn vara detsamma, men alla blanktecken och kommentarer har tagits bort.

Här är ett annat exempel från vår guide till jQuery:

// dfd == uppskjutna
var dfd = sek.Uppskjuten();

funktion doThing() {
sek.få(‘någon/långsam/url’, function() {
dfd.lösa();
});
tillbaka dfd.lovar();
}

sek.när(doThing()).då(function(){
konsolen.log(‘YAY, det är fullbordat’);
});

Här är minified kod:

funktion doThing(){return $.få(“some/långsam/url”,function(){dfd.lösa()}),dfd.lovar()}var dfd=sek.Uppskjuten();$.när(doThing()).då(function(){konsolen.logga in(“YAY, den är klar”)});

Denna gång var det endast 26 procent minskning — det är fortfarande mycket bra för ett mindre block av kod.

Här är ett sista exempel från vår guide till Javascript och DOM:

//deklarera en ny variabel för att hålla ett nytt h1-elementet

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

//lägg till text nod till dokumentet

var h1Text = dokument.createTextNode(“Rubrik Nivå 1”);

//gör det till ett barn nod av den nya rubrik

newHeading.appendChild(h1Text);

//lägg till det här som ett barn av element som definieras som “bt”
dokumentet.getElementById(“bt”).appendChild(newHeading);

Lägg märke till hur det finns en hel del synpunkter och blanka. Minified version minskas filstorleken genom att 52 procent :

var newHeading=dokument.createElement(“h1”),h1Text=dokument.createTextNode(“Rubrik Nivå 1”);newHeading.appendChild(h1Text),dokument.getElementById(“bt”).appendChild(newHeading);

Här är storlekarna på några vanliga JavaScript-Bibliotek i förhållande till deras minified versioner:

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

Några av dessa bibliotek visar på en betydande minskning av storleken när komprimerad (~80 procent), medan andra är inte fullt så bra (~40 procent). Som sagt, eventuella besparingar kommer att göra din webbplats snabbare för användarna, och att minska belastningen på din webbserver.

Hur Gör Du Minify?

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

Dessa arbetar på flera sätt. De flesta online-verktyg kan du kopiera och klistra in koden, som de sedan kommer processen och återgå till er på sidan. Dessa verktyg kommer ofta att låta dig ladda upp flera filer.

Här är en kort runda upp av online-verktyg. De flesta fungerar på samma sätt så att du inte behöver oroa sig alltför mycket om vilka som ska välja.

JSCompress — jag personligen använder denna webbplats mest om det bara är ett snabbt jobb. Det går snabbt att köra och att de även visa dig de verktyg som de använde för att bygga det.

jscompress

JavaScript Minifier — Detta verktyg fungerar bra, men det lyser verkligen som ett API. Detta gör att du kan bygga din egen integration eller service på toppen av sin befintliga webbplats.

javascript minifier

JavaScript Minifier — en Annan webbplats med samma namn, detta verktyg är lika enkla som de kommer. Inget alternativ eller menyer, bara en knapp.

havascript minifier

Minify — Denna webbplats ser fantastisk ut, och utvecklarna har helt klart uppmärksamhet på detaljer här.

minify

Den här listan skulle kunna fortsätta i evighet. Det finns så många online-verktyg för att minify webbplatser att det är svårt att gå fel.

– Minifying verktyg det finns också som verktyg kommandoraden eller plugins för din JavaScript-editor

Topp 5 Javascript Redaktörer Som Kan Göra Kodning Mycket Lättare

Topp 5 Javascript Redaktörer Som Kan Göra Kodning Mycket Lättare
Dessa dagar, det finns bara fem redaktörer värt beaktande när man skriver JavaScript. Du kan hitta massor av alternativ, men ingen av dem hålla ett ljus till dessa, så slösa inte bort din tid.
Läs Mer

. Dessa verktyg är ofta mycket snabbare att använda, och det “bara ” arbeta” med dina befintliga koden. Det finns ingen anledning att kopiera och klistra in, och du behöver inte packa upp din JavaScript från någon HTML eller CSS som kan vara i samma fil.

Om du använder Microsoft Visual Studio, Bundler och Minifier förlängning från marknaden har över 600.000 installeras! Inte bara det, men det är regelbundet uppdaterad och finns på GitHub.

Om du är ett fan av Sublime Text som den jag är, då Minify paket är det du vill ha. Med över 61 000 installerar, det är ett mycket populärt paket, och ett som även finns på GitHub, om du vill bidra till ett open source-projekt.

sublime minify

Slutligen, om du är en PyCharm användare, kan du konfigurera den för att integrera direkt med många gemensamma komprimering verktyg som YUI compressor. Många av dessa verktyg direkt makt online-verktyg som anges ovan.

Varningar

Det måste finnas en hake rätt? Ingenting kan någonsin vara perfekt. Ja, ja, det är ett problem, men det är ganska liten och lätt arbetat runt:

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

När du minify någon kod, den ursprungliga formen förloras. Du måste behålla en kopia av den om du vill ha något hopp om att enkelt göra stora förändringar — det är inte tillräckligt att använda versionshantering

Vad Är Git & Varför Du Bör Använda Version Control Om Du är en Utvecklare

Vad Är Git & Varför Du Bör Använda Version Control Om Du är en Utvecklare
Som webbutvecklare, en stor del av tiden vi tenderar att arbeta med lokal utveckling platser sedan är det bara att ladda upp allt när vi är klar. Detta är bra när det är bara du och förändringarna är små,…
Läs Mer

.

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

Detta är inte ett stort problem, men du måste ha det i åtanke när man kodar. Som en grundläggande regel, okomprimerad > utveckla och komprimerade > produktion.

Nu vet du allt som finns att veta om-minifying JavaScript! – Minifying kod är ett sätt att pressa prestandan på en server, och alla de stora webbplatser gör det.

Vilka verktyg använder du för att minify din kod? Har du ens bry sig? Låt oss veta i kommentarerna nedan!

Image Credit: NavinTar via Shutterstock