Dela med sig:
JavaScript-kompressorer Hur och varför att minska din JS
Vi har alla varit där, du lärde dig hur man bygger en fantastisk webbplats Hur man gör en hemsida: För nybörjare Hur man gör en hemsida: För nybörjare Idag ska jag styra dig genom processen att göra en komplett webbplats från början. Oroa dig inte om det här låter svårt. Jag leder dig igenom det hela steget. Läs mer, men när du publicerar det, är det oacceptabelt långsamt.
Minifiera ditt javascript är ett sätt att påskynda webbplatsens svarstider (tillsammans med komprimering av HTML Hur komprimerade HTML-verk och varför du kan behöva det Hur komprimerade HTML-verk och varför du behöver det I den här artikeln går vi över de två huvudmetoderna för komprimerad HTML, varför HTML-filer ska krympas och hur man går vidare. Läs mer) och lyckligtvis för dig är det en enkel process. Idag visar jag allt du behöver veta.
Vad betyder Minifiera?
Processen minification (eller Att minimera) är ett enkelt koncept. När du skriver kod i JavaScript eller något annat språk finns det många funktioner som bara krävs för att koden ska bli lättare för människor att förstå - datorer bryr sig inte om vad du kallar dina variabler, eller hur mycket avstånd finns i parentes för exempel.
Genom att minska koden kan du drastiskt minska dess filstorlek. En mindre fil kommer därför att bli snabbare för dina användare att ladda ner. Om du bara skriver en eller två rader med JavaScript, kommer det förmodligen inte att bli en märkbar förbättring. Men om du skriver mycket kod eller använder stora bibliotek som jQuery, kan märkbara prestandaökningar och drastiskt reducerade filstorlekar lätt uppnås!
Om du laddar upp kod från en extern CDN Vilka CDN är och varför lagring inte längre är en utgåva Vilka CDN är och varför lagring är inte längre Ett problem med CDN-skivor gör Internet snabbt och webbplatser överkomliga även när du ska skala till miljontals användare. För det första kostar bandbredd pengar; de av oss på begränsade kontrakt vet alltför bra. Inte bara gör du ... Läs mer, till exempel Google Hosted Libraries, du har använt en kodad kod.
Vad ser den minifierade koden ut?
Låt oss titta på några exempel. Det är svårt att se effekterna av minifiering på små kodbaser, så jag ber om ursäkt 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:
// ställa in några JSON att använda varbilar = ["make": "Porsche", "model": "911S", "make": "Mercedes-Benz", "model": "220SE", "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // ställ in knappen klicka på document.getElementById ("theButton"). onclick = function () doWork (); funktion doWork () // ajax JSON till servern $ .post ("mottagare", bilar, funktion () ); // stoppa länken om att ladda sidan event.preventDefault (); Här är den kodade koden:
Funktion doWork () $. post ("mottagare", bilar, funktion () ), event.preventDefault () varbilar = [make: "Porsche", modell: "911S", make: " Mercedes-Benz ", modell:" 220SE ", gör:" Jaguar ", modell:" Mark VII "; window.onload = function () document.getElementById (" theButton " doWork ();Den här minifierade versionen av koden är 39 procent mindre. I det här exemplet förblir de variabla namnen desamma, men alla blanketter och kommentarer har tagits bort.
Här är ett annat exempel från vår guide till jQuery:
// dfd == uppskjuten var dfd = $ .Deferred (); funktion doThing () $ .get ('some / slow / url', funktion () dfd.resolve ();); returnera dfd.promise (); $ .when (doThing ()). sedan (funktion () console.log ('YAY, det är klart'););Här är den kodade koden:
funktionen () dfd.resolve ()), dfd.promise () var dfd = $. Uppskjuten (); $. när (doThing ()). Sedan (funktion () console.log ("YAY, det är klart"));Den här gången var det bara en 26 procent minskning - det är fortfarande mycket bra för ett sådant mindre block av kod.
Här är ett sista exempel från vår guide till Javascript och DOM:
// förklara en ny variabel för att hålla ett nytt h1-element var newHeading = document.createElement ("h1"); // lägg till textnodet i dokumentet var h1Text = document.createTextNode ("Heading Level 1"); // gör det till en barnnod i det nya rubriken newHeading.appendChild (h1Text); // lägg till detta som ett barn av element definierat som "bt" document.getElementById ("bt"). appendChild (newHeading);Lägg märke till hur det finns mycket av kommentarer och whitespace. Den minifierade versionen minskade filstorleken av 52 procent :
var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Rubrik Nivå 1"), newHeading.appendChild (h1Text), document.getElementById ("bt"). appendChild (newHeading);Här är storleken på några vanliga JavaScript-biblioteken jämfört med deras minifierade versioner:
- Highcharts: 1 MB> 201 KB
- jQuery: 270 KB> 90 KB
- MooTools: 164 KB> 93 KB
Några av dessa bibliotek visar en betydande storleksminskning vid komprimering (~ 80 procent), medan andra inte är så bra (~ 40 procent). Med det sagt kommer eventuella besparingar att göra din webbplats snabbare för dina användare och minska belastningen på din webbserver.
Hur minskar du?
Nu vet du hur det fungerar och hur det ser ut, låt oss dyka in hur man gör det. Oroa dig inte, det är inte nödvändigt att manuellt ändra din kod alls! Det finns en mängd olika verktyg fritt tillgängliga som hanterar processen för dig.
Dessa fungerar på flera sätt. De flesta onlineverktyg gör att du kan kopiera och klistra in kod, som de sedan kommer att behandla och återvända till dig på sidan. Dessa verktyg låter dig ofta ladda upp flera filer också.
Här är en kort runda av onlineverktygen. De arbetar mestadels, så du behöver inte oroa dig för mycket om vilken du ska välja.
JSCompress - Jag använder personligen den här webbplatsen mest om det bara är ett snabbt jobb. Det är snabbt att springa och de visar till och med de verktyg de använde för att bygga den.
JavaScript Minifier - Det här verktyget fungerar bra, men det skiner verkligen som ett API. Detta gör att du kan bygga din egen integration eller tjänst ovanpå sin befintliga webbplats.
JavaScript Minifier - En annan webbplats med samma namn, det här verktyget är så enkelt som de kommer. Inga alternativ eller menyer, bara en knapp.
Minifiera - Denna webbplats ser fantastiskt ut, och utvecklarna har tydligt uppmärksammat detaljerna här.
Denna lista kan fortsätta för alltid. Det finns så många onlineverktyg för att minimera webbplatser som det är svårt att gå fel.
Minifieringsverktyg finns också som kommandoradsverktyg eller plugins för din JavaScript-redaktör De 5 bästa Javascript-redaktörerna för produktiva kodare och programmerare De 5 bästa Javascript-redaktörerna för produktiva kodare och programmerare Idag finns det bara fem redaktörer som är värda att överväga när du skriver JavaScript. Du kan hitta dussintals alternativ, men ingen av dem håller ett ljus till dessa, så slösa inte bort din tid. Läs mer . Dessa verktyg är ofta mycket snabbare att använda, och “bara arbeta” med din befintliga kod. Det finns ingen anledning att kopiera och klistra in, och du behöver inte extrahera JavaScript från någon HTML eller CSS som kan vara i samma fil.
Om du använder Microsoft Visual Studio har Bundler och Minifier-utvidgningen från marknaden över 600 000 installationer! Inte bara det, men det uppdateras regelbundet och tillgängligt på GitHub.
Om du är ett fan av Sublime Text som jag är, är Minify-paketet det du vill ha. Med över 61 000 installationer är det ett mycket populärt paket, och ett som också finns tillgängligt på GitHub, om du vill bidra till ett open source-projekt.
Slutligen, om du är en PyCharm-användare kan du konfigurera den för att integrera direkt med många vanliga komprimeringsverktyg som YUI-kompressorn. Många av dessa verktyg driver direkt de onlineverktyg som anges ovan.
förbehåll
där har att vara en fångst rätt? Ingenting kan någonsin vara perfekt. Jo, det finns ett problem, men det är ganska litet och enkelt arbetat runt:
Minifierad kod kan inte återställas till sitt ursprungliga tillstånd.
När du minskar någon kod, förloras dess ursprungliga form. Du måste behålla en kopia av det om du vill ha något hopp om att enkelt göra stora förändringar - det räcker inte med att använda versionskontroll Vad är Git och varför du bör använda Versionskontroll Om du är utvecklare Vad är Git & varför du Bör använda versionskontroll Om du är utvecklare Som webbutvecklare, lägger vi mycket tid på att arbeta på lokala utvecklingsplatser, så ladda bara upp allt när vi är färdiga. Det här är bra när det bara är du och förändringarna är små, ... Läs mer .
Medan det är möjligt att unminify din kod, är det aldrig riktigt detsamma igen. Alla dina värdefulla kommentarer är förlorade, för en sak.
Detta är inte ett stort problem, men du måste komma ihåg det när du kodar. Som en grundläggande regel, okomprimerad > utveckla och komprimerad > produktion.
Nu vet du allt som finns att veta om att minimera JavaScript! Minifieringskod är ett sätt att klämma ut prestanda ur en server, och alla stora webbplatser gör det.
Vilka verktyg använder du för att minska din kod? Stör du ens? Låt oss veta i kommentarerna nedan!
Bildkredit: NavinTar via Shutterstock
Utforska mer om: Java, JavaScript, webbdesign.