Drupal – kompresja plików javascript i css

Drupal pozwala na optymalizację plików CSS oraz JS (JavaScript) poprzez połączenie w jeden plik. Zysk czasowy jest oczywisty, bo przeglądarka pobiera jeden plik zamiast wielu, co znacząco przyspiesza otwieranie strony.

Jednak w sytuacji, gdy plik wynikowy jest duży, dodatkową korzyść może przynieść skompresowanie go przy pomocy gzip. Właściwie wszystkie współczesne przeglądarki są w stanie odebrać skompresowany plik, o ile tylko serwer jest w stanie taki plik wysłać.Drupal potrafi wysłać w postaci skompresowanej treść stron, czyli html, ale wysyłanie w taki sposób plików CSS oraz JavaScript wymaga pewnych zmian w plikach Drupala oraz w konfiguracji serwera www. Bezpośrednie zmiany w kodzie Drupala nie są zalecane, ponieważ ten system zarządzania treścią dysponuje bardzo rozbudowanym systemem modułów i hooków, ale w tym wypadku nie ma innego wyjścia.

Zmiany w Drupalu

Należy otworzyć w edytorze plik includes/common.inc, a następnie znaleźć w nim funkcję o nazwie drupal_build_css_cache. W funkcji tej, wiersz o treści

if (!file_exists($csspath .'/'. $filename)) {

zastępujemy wierszem

if (!file_exists($csspath .'/'. $filename) || (function_exists("gzencode") && !file_exists($csspath . '/' . $filename . '.gz'))) {

W tej samej funkcji, nieco niżej, lokalizujemy wiersz o treści

file_save_data($data, $csspath .'/'. $filename, FILE_EXISTS_REPLACE);

i dodajemy pod nim następujący kod:

if (function_exists("gzencode")) {
file_save_data(gzencode($data), $csspath .'/'. $filename . '.gz', FILE_EXISTS_REPLACE);
}

Po tych zmianach, nadal w pliku common.inc, szukamy funkcji o nazwie drupal_build_js_cache

W tejże funkcji wiersz o treści

if (!file_exists($jspath .'/'. $filename)) {

zastępujemy wierszem

if (!file_exists($jspath .'/'. $filename) || (function_exists("gzencode") && !file_exists($jspath .'/'. $filename . '.gz'))) {

Zaś parę linijek niżej (wciąż w tej samej funkcji) znajdujemy linię

file_save_data($contents, $jspath .'/'. $filename, FILE_EXISTS_REPLACE);

i dodajemy pod nią kod

if (function_exists("gzencode")) {
file_save_data(gzencode($contents), $jspath .'/'. $filename . '.gz', FILE_EXISTS_REPLACE);
}

To już wszystkie zmiany w Drupalu. Powodują one, że oprócz zwyczajnych plików .css i .js tworzone są ich skompresowane wersje. Pozostaje tylko skonfigurować serwer www, aby przeglądarkom obsługującym kompresję podsuwał pliki skompresowane. W tym celu musimy wyedytować plik .htaccess znajdujący się w głównym katalogu Drupala (zakładam, że używany jest serwer Apache, instrukcje dla IdeaWebServer znajdują się niżej).

Konfiguracja serwera Apache

Znajdujemy w nim fragment

<IfModule mod_rewrite.c>
RewriteEngine on

i dopisujemy pod nim

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1.js.gz [L]

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.css$ $1.css.gz [L]

Następnie wyszukujemy poniżej (będzie to prawdopodobnie jedna z ostatnich linii w pliku .htaccess) wiersz o treści

</IfModule>

i pod nim dodajemy następujące dyrektywy:

<FilesMatch "\.js.gz$">
ForceType text/javascript
Header set Content-Encoding gzip
</FilesMatch>

<FilesMatch "\.css.gz$">
ForceType text/css
Header set Content-Encoding gzip
</FilesMatch>

Jeżeli w Drupalu obsługa łączenia plików CSS i JS była uprzednio włączona (co można sprawdzić wchodząc na podstronę administracyjną admin/settings/performance i szukając sekcji Optymalizacja wykorzystania pasma – opcje dotyczące plików CSS i JS są wówczas włączone), należy obydwie opcje wyłączyć, zapisać ustawienia, a następnie ponownie je włączyć i zapisać ustawienia. Wygenerowane zostaną wtedy nowe pliki CSS i JS, zaś oprócz nich wersje skompresowane.

IdeaWebServer

Niektóre firmy hostingowe, np. home.pl, korzystają z niestandardowych rozwiązań. W wypadku home.pl, który jest popularnym hostingiem, jest to IdeaWebServer, w którym konfiguracja wymagana w pliku .htaccess wygląda nieco inaczej.

W pliku .htaccess, w głównym katalogu Drupala, znajdujemy fragment

<IfModule mod_rewrite.c>
RewriteEngine on

i dopisujemy pod nim

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1.js.gz [L]

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.css$ $1.css.gz [L]

(Powyższa część konfiguracji jest identyczna jak w przypadku serwera Apache).

Następnie wyszukujemy poniżej (będzie to prawdopodobnie jedna z ostatnich linii w pliku .htaccess) wiersz o treści

</IfModule>

i dodajemy pod nim dyrektywy

:Location *.js.gz
SetMime text/javascript
Header set Content-Encoding gzip
:Location

:Location *.css.gz
SetMime text/css
Header set Content-Encoding gzip
:Location

Gwoli ścisłości należy dodać, że istnieje moduł mod_gzip przeznaczony dla serwera Apache, ale rozwój tego modułu najwyraźniej zatrzymał się wiele lat temu.

Ten wpis został dodany w Bez kategorii i oznaczony jako , , , . Zapisz niezmienny odnośnik.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>