Slå ihop och förminska Javascript-filer

En av de saker som kan förbättra prestandan mest är att ladda ner färre filer. Men det blir ohållbart att jobba om all javascript ska ligga i en enda fil. Så hur kan du både ha en vettig arbetsmiljö och ändå minska antalet filer att ladda ned?

Lösning är att ha ett verktyg som hjälper dig att slå ihop flera filer till en enda. Det finns flera sätt att lösa detta på. Som nybörjare är det enklast förmodligen att använda ett fristående program som gör det åt dig.

För mer avancerade användare är Grunt och Gulp fantastiskt smidigt att jobba med, men det kan kännas krångligt att få på plats innan man är van.

Är man duktig på php eller .net kan man också låta servern göra jobbet, vilket har fördelen att en ny utvecklare inte är beroende av att ha exakt rätt verktyg på sin dator för att kunna jobba med webbplatsen.

I den här artikeln visas det första sättet – att använda ett fristående program. Det finns många program som fungerar på ungefär samma sätt. Till OSX är CodeKit ett av de mest populära, det kostar dock pengar. En liknande variant som finns till både OSX och Windows heter Prepros och är gratis om man kan stå ut med en popup som uppmanar dig att betala för appen.

One File To Rule Them All

När du installerat Prepros behöver du importera ditt projekt. Längst ned till vänster finns en knapp för ”+ Add Project”. Välj den mapp där ditt webbprojekt ligger.

Om du nu tryck på Preview-knappen kan Prepros starta en egen webbserver och öppna din sajt i webbläsaren. När du ändrar i filer kommer Prepros märka det också automatiskt ladda om sajten åt dig. Prepros kan också hjälpa dig att testa på flera enheter samtidigt, vilket kan vara användbart om du bygger för både dator och mobil.

Nästa steg är att skapa en javascript-fil som importerar dina andra javascript-filer. En god idé kan vara att ha en javascript-fil som samlar all din egen javascript-kod och en annan javascript-fil som samlar alla tredjepart-filer, som jquery-plugins, med mera.

Skapa en javascript-fil och döp den till main.js (eller något du passar bra). I main.js lägger du till följande kod:

//@prepros-append fil-1.js
//@prepros-append fil-2.js

Namnen fil-1.js och fil-2.js byter du ut till namnen på dina egna filer. Du kan lägga till hur många rader du vill. Spara filen och växla tillbaka till Prepros.

prepros

Markera main.js. I högerspalten visas ett antal val för filen. Den viktigaste kryssrutan är ”Auto Compile”. Det är den som gör att de javascript-filer du la till automatiskt slås ihop till en ny fil som kommer att få namnet main-dist.js. Tryck slutligen på knappen Process File längst till till höger.

Växla tillbaka till din kod-editor och öppna den html-fil som ska använda javascriptet, t ex index.html. Istället för att ha ett <script>-element för varje enskild fil, kan du nu byta ut alla dom och istället inkludera main-dist.js.

Före:

<script src="js/fil-1.js"></script>
<script src="js/fil-2.js"></script>

Efter:

<script src="js/main-dist.js"></script>

Varje gång du gör en ändring i någon av dina javascript-filer kommer Prepros att uppdatera main-dist.js åt dig.

Övriga kryssrutor

Source-maps gör en speciell fil som förenklar felsökning. Trots att main-dist.js en enda komprimerad röra, så kommer webbläsaren ändå förstå i vilken original-fil ett fel har uppstått.

Uglify JS gör att den sammanslagna javascript-koden blir mer komprimerad och svårare att läsa, vilket kan vara användbart om man vill göra det lite svårare för andra att sno din kod. För webbläsaren är den precis lika läsbar som ditt original.