14 Verktyg för att minska Javascript

Javascript Minifiering är en teknik som kondenserar ditt skript till ett mycket mindre fotavtryck. Du förlorar mänsklighetens läsbarhet men du sparar avsevärd bandbredd - i slutändan, Javascript är avsett för din webbläsare inte för dina användare.

De flesta produktionswebbplatser använder Javascript-minifiering, men det sätt som uppnås varierar kraftigt. Från enkla online-omvandlare till mer omfattande GUI-verktyg till kommandoradsgränssnitt är våra alternativ ganska varierade. I den här artikeln tar vi en titt på hur Javascript minifiering fungerar, hur vi kan bygga upp det i vårt arbetsflöde och vad för och nackdelarna med minifiering är.

Hur Minifiering fungerar

Det bästa sättet att lära dig vad som händer när du minskar din kod är att titta på UglifyJS Github Repository. Detta skript används i många online-omvandlare samt GUI-verktyg och kommandoradsverktyg som Grunt. Här är några av de omvandlingar som gäller för att göra din kod kortare:

Tar bort onödigt utrymme
Förkortar variabla namn, vanligtvis till enstaka tecken
Sammanfogar i följd vardeklarationer
Konverterar arrays till objekt där det är möjligt
Optimerar om uttalanden
Beräknar enkla konstanta uttryck
etc.

Som ett snabbt exempel är här en funktion som i huvudsak skriver en viss text ut.

 funktion hej (text) document.write (text);

hej ("Välkommen till artikeln");

Låt oss se vad som händer när vi minifiera detta. Observera avlägsnandet av mellanslag och inryckning och förkortning av textvariabeln.

funktion hej (e) document.write (e) hej ("Välkommen till artikeln")

Javascript Miniveringsverktyg

Verktygen som används för att begränsa Javascript kan i stor utsträckning kategoriseras i tre grupper: onlineverktyg, GUI-verktyg och kommandoradsverktyg.

Med onlineverktyg handlar det vanligtvis om att klistra in din kod och kopiera resultatet direkt.
GUI-verktyg innehåller ofta mycket mer funktionalitet; JS-minifiering är bara en liten del av vad de gör.
Kommandoradsverktyg är också vanligtvis mer omfattande och erbjuder minifiering som en modul.

Online-verktyg

javascript-minifier.com är snyggt verktyg med ett API
Online YUI Compressor är ett kraftfullare verktyg som använder YUI-kompressorn, med många alternativ och CSS-minifunktioner
jscompress.com är en no-frills minifier men det blir jobbet gjort
jsmini.com är ett annat enkelt men helt användbart alternativ

Det fantastiska med onlineverktyg är hur snabbt du kan arbeta med dem. Komplexa GUI- och kommandoradsverktyg minifiera snabbare men du måste ha ett projekt för att det ska fungera korrekt. Nackdelen med dessa verktyg är det de mest ger liten eller ingen anpassning, åtminstone i jämförelse med kommandoradsverktyg.

GUI-verktyg

Koala är ett gratis verktyg för mindre, SASS-kompilering, JS-minifiering och mycket mer
Prepros är en plattformsbetald app som ger dig ännu fler alternativ
Codekit är min app valfri. Det är en betalad Mac-only app som erbjuder kodkompilering, minifiering, en förhandsgranskningsserver, bower pakethantering och mycket mer
AjaxminGui är ett gratis, enstaka Windows-verktyg för att minimera din JS
UltraMinifier är en gratis app för OS X som minskar CSS och JS med dra och släpp
Mindre är ett OS X-verktyg som minifierar och sammanfogar filer för dig

Jag har nämnt två typer av GUI-appar här. De enkla enkelsidiga miniförsättningsapparna är ungefär som deras elektroniska motsvarigheter. De är extremt snabba att använda eftersom du bara kan dra och släppa filer i dem, ingen installation krävs. Som sagt, de ger praktiskt taget ingen anpassning.

Större GUI-verktyg (Prepros, Koala, Codekit) är bra att hantera projekt och ger dig lite fler alternativ för komprimering men de gör behöver lite setup. En snabb JS-minifiering skulle ta ungefär 20 sekunder med inställningen vilket är mycket jämfört med 2 sekunders process av online eller enkelt GUI-verktyg.

Å andra sidan erbjuder de dig fler funktioner i allmänhet och ger dig automatisering. Dina JS-filer kommer att minimeras varje gång du sparar dem, du behöver inte manuellt minska dem. Om du utvecklar något i Javascript är det definitivt vägen att gå.

Kommandoradsverktyg

Minify är för dem som vill begränsa JS från kommandoraden men vill inte skapa något som är fint i Grunt eller Gulp
Uglify.js som vi nämnde tidigare finns också som ett fristående kommandoradsverktyg
Grunt har en förlängning för Javascript-minifiering som heter grunt-contrib-uglify
Gulp har också JS-minifiering med Uglify.js genom gulp-uglify

Kommandoradsverktyg är inte bara för Linux-geeks! Jag är inte bra på terminalen, men det är enkelt att sätta upp saker som Grunt och Gulp genom sin stora dokumentation. Uppåtriktningen av kommandoradsverktygen är den fantastiska flexibiliteten du har från alternativ till utmatning.

Å andra sidan finns det en bit av en inlärningskurva. Kommit till kommandoraden tar lite (inte mycket) övning som du hittar restriktiva innan du börjar njuta av fördelarna.

Översikt

Om du är ny för webbutveckling rekommenderar jag ett av de tre första GUI-verktygen. De hjälper dig att hantera dina projekt i allmänhet och erbjuder mycket mer än bara JS-minifiering.

Om du är en erfaren pro du borde noga titta på Grunt eller Gulp eftersom dessa erbjuder mest kontroll över automatiseringsuppgifter. Om du behöver minska ett skript snabbt utan att skapa ett projekt, Kommandoradsverktygen kan spara dig mycket tid.

Varje grupp verktyg har sina fördelar och nackdelar, och i sannolikt kommer du förmodligen att sluta använda någon av dem vid någon tidpunkt eller en annan. Tänk på att när du är i en produktionsmiljö, bör du alltid minska din Javascript och CSS!