mGz developer blog

Optymalizowanie ilości Http requestów

Jednym ze sposobów na optymalizacje ilości requestów do strony, oraz zmniejszenie ilości przesyłanych danych z serwera jest łączenie i kompresowanie plików ze skryptami java script. Jest to możliwe gdy przeglądarka obsługuje taki format skompresowanych plików js.

Musimy postępować w trzech krokach. Pierwszy z nich polega na utworzeniu reguł w pliku .htaccess by przekierowywać js na pliki js.gz, gdy przeglądarka obsługuje kompresje gzip. Natomiast kolejny krok polega na utworzeniu zbioru archiwów naszych skryptów by obniżyć wielkość transferu. Na dokładkę możemy połączyć wszystkie główne skrypty, które ładują się na każdej stronie w jedno duże archiwum.

By wyszukać wszystkie pliki js i skompresować je wystarczy że użyjemy prostej pętli for

for file in `find js -type f \( -name \*.js \)`;
  do
  echo -ne "Generating $file.gz\n\r"
  gzip -c -f $file > $file.gz
done

W zbiorze na którym działa pętla wywołujemy polecenie find i wyszukujemy wszystki plików katalogu zdefiniowanym na sztywno ( w naszym przypadku js/ )

By połączyć główne skrypty w jedno duże archiwum posłużymy się listą plików zapisaną w pliku tekstowym, z której będziemy odczytywać linia po linii kolejne pliki do połączenia.

#!/bin/bash
if [ "$1" = "--help" ]; then
  echo -ne " "
else
  if [ -n "$2" ]; then
    outputfile="js/merged/$2"
    echo -ne  "--merging files -- \n\r"
    jslist="$1.txt"
    if [ -f "$jslist" ]; then
      index=0
      if [ -f "$outputfile" ]; then
        echo -ne "Deleting existing merged file\n\r"
        unlink $outputfile
      else
        touch $outputfile
      fi
 
      while read line ; do
        #MYARRAY[$index]="$line"
        echo -ne "Merging: $line \n\r"
        if [ -f "$line" ]; then
          cat $line >> $outputfile
        else
          echo -ne "ERROR: File $line does not exists\n\r"
        fi
        index=$(($index+1))
      done < $jslist       gzip -fc $outputfile > $outputfile.gz
      echo -ne "SUCCESS: Generated: $outputfile.gz \n\r"
    else
      echo  -ne "ERROR"
      exit
    fi
  else
    echo -ne "ERROR: Parameter expected  try --help to get help"
  fi
fi

Kroki algorytmu:

1. Sprawdzamy czy user wpisał –help. Jeżeli tak to wyświetlamy pomoc. W przeciwnym wypadku idź do kroku 2.
2. Definiujemy plik wyjściowy oraz listę plików do połączenia
3. Jeżeli istnieje plik z listą przejdź do kroku 4. W przeciwnym wypadku wyświetl błąd.
4. Jeżeli istnieje plik wyjściowy to usuń plik w przeciwnym wypadku utwórz pusty plik wyjściowy.
5. Dopóki read line z pliku $jslist, to  jeżeli plik źródłowy istnieje, to jego zawartość przekaż do pliku wyjściowego.  W przeciwnym wypadku wyświetl błąd
6. Spakuj plik wyjściowy

Konfiguracja .htaccess
By zmniejszyć transfer możemy wymusić na apache’u aby wysyłał pliki js skompresowane, jeżeli przeglądarka akceptuje skompresowane javascripty.

<IfModule mod_headers.c>
<FilesMatch "\.js.gz$">
ForceType text/javascript
Header set Content-Encoding: gzip
</FilesMatch>
</IfModule>
<IfModule mod_rewrite.c>
  RewriteCond %{HTTP:Accept-Encoding} gzip
  RewriteCond %{REQUEST_URI} \.js$
  RewriteCond %{REQUEST_FILENAME}.gz -f
  RewriteRule (.*)$ $1\.gz [L,QSA]
</IfModule>

Tags: bash, Java Script, Optymalizacja