WORDS

Navigera i webbdjungeln: Minifiering

När man skickar data över nätverket, så går det snabbare att skicka så lite som möjligt. Det här gäller förstås också den kod som skickas till webbläsaren. Därför brukar man använda verktyg för att minifiera sin kod: ta bort whitespace och kommentarer, förkorta variabelnamn och andra trick för att komprimera skriptet. Här följer ett exempel på vad en minifierare gör.

Före:

Vanlig Javascriptkod.

function greeting(name) {
  return "Hello, " + name;
}

// Show a greeting
alert(greeting("friend"));

Efter minifiering: 1

Kommentarer och whitespace har tagits bort, funktions- och variabelnamn har kortats, semikolon tagits bort.

function g(n){return"Hello, "+n}alert(g("friend"))

Efter minifiering och optimering: 1

I vissa fall kan minifieraren också optimera bort en hel funktion.

alert("Hello, friend")

Man brukar ha med minifiering som ett byggsteg i sitt byggverktyg, men bara aktivera i release-läge, för att lokal utveckling ska gå lite snabbare. Det är automatiskt aktiverat i Parcel, men kräver särskild inställning i alla andra verktyg. För att hantera språk som kompilerar till Javascript, brukar man minifiera den resulterande Javascriptkoden.

För några år sedan fanns det ett klart svar på vilket verktyg som var bäst, men år 2019 finns flera bra konkurrerande alternativ.

Verktyg Kommentar
UglifyJS Hanterar "gammal" Javascript, ES5
Terser Fork av UglifyJS som hanterar modern Javascript
Babel Minify Plugin till Javascriptkompilatorn Babel, som hanterar modern Javascript och Typescript

Ett vanligt förfarande är att kompilera till gammal Javascript (med Babel eller Typescriptkompilatorn), och därefter använda UglifyJS på den resulterande koden.

Om man bara vill experimentera, och se hur det kommer att bli, så kan man använda UglifyJS Online, ett verktyg som jag har skapat.

  1. Med sina standardinställningar kommer ingen minifierare göra dessa transformationer, för dom tre varianterna gör aningen skilda saker. Alla anropar alert("Hello, friend"), men den första definierar dessutom en global funktion greeting, den andra g, och den sista ingen funktion alls. För att minifiera detta bättre med standardinställningar får man använda en IIFE, en omslutande funktion som anropas omedelbart:

    (function () {
  function greeting(name) {
    return "Hello, " + name;
  }

  // Show a greeting
  alert(greeting("friend"));
}());

    I praktiken är detta sällan ett problem, eftersom varje importerad fil i modern Javascript automatiskt blir sitt eget scope.

    ↩