Minimering og optimering af JavaScript

Javascript er gået hen og blevet rigtig populært de seneste år. Som blandt andet bliver brugt til analytics, validering af kontakt form, smarte reklamer der slider billeder samt meget mere.

Men nu er det de færreste, der selv skriver deres javascript fra bunden. Enden henter de et færdig lavet script fra nettet, ellers bruger de et framework.

En stor del af disse javascript filer er hvilken minimeret eller optimeret. Så de fylder langt mere end de behøver for at kunne køre. Det er kun det ene af problemerne, ved at hente færdige javascript filer. For det er også de færreste der samler alle filerne i et enkelt dokument. Som jeg skrev i mit forrige indlæg om ”Optimer rækkefølgen af CSS og Javascript”, så blokere hentning af javascript filer, for hentningen af andre filer (Som billeder, CSS og m.m.). Der for er det en god idé, at samle så meget javascript i en fil som muligt.

Hvad kan du så gøre for at minimere eller optimere javascript. Personligt går jeg selv en del at scriptet igennem, og bygger dem op så de både er optimeret samt minimeret bedst muligt. 
Men nu er det ikke alle der ved, hvordan man optimere javascript. Dette problem har google lavet en løsning på. Det hedder Google Closure Compiler. Som er en web app der helt automatisk læser og forstår din javascript. Så det på den måde både optimere og minimere scriptet.

Den har 3 måder at gøre det på.

1. ”Whitespace only”, som navnet siger fjerner den alt mellemrum i scriptet.

2. ”Simple optimering”, som kan bruges på 98% af alle javascript filer. Den ændre blandt andet på funktion variabler navne og lidt andet, for at gøre javascript filen så lille som muligt.

3. ”Advanced optimering”, som læser, forstår og ændre javascript filen fuldstændig. Så den både er optimeret og minimere bedst muligt. Der er bare et par ting man skal være opmærksom på. Den kan kun bruges, hvis alle javascript filer der bliver brugt, bliver optimere på en gang. Og det er langt fra alt javascript den optimere, så den også virker efterfølgende.

Her er eksempel på hvad Google Closure Compiler kan gøre:

Javascriptet før

function hello(name) { alert('Hello, ' + name); } hello('New user');

Whitespace only

function hello(name){alert("Hello, "+name)}hello("New user");

Simple optimering

function hello(a){alert("Hello, "+a)}hello("New user");

Advanced optimering

alert("Hello, New user");

Disse 4 scripts gør nøjagtigt det samme. Som man kan se er der der kun fjernet mellemrum i Whitespace only. 
I Simple optimering er det ændret på et variable navn, så det ikke fylder så meget. 
Men i Advanced optimering har Closure Compiler fundet ud af, at funktionen ”hello” kun bliver kaldt en gang. Samt at det bare bliver tilføjet ”New user” til en alert. Så den har fjernet funktionen og lavet en alert med hele teksten.