Webassets do kompresji i łączenia plików statycznych

Share

webassets to aplikacja, moduł do zarządzania plikami CSS i JS w aplikacjach webowych. Potrafi kompresować i łączyć w jeden wynikowy plik szereg plików. Za pomocą zewnętrznych aplikacji może też np. sparsować LESS do CSS i załączyć wynikowy plik. Webassets można używać z różnymi frameworkami, co opisano w dokumentacji.

Kompresja plików statycznych zmniejsza nieco ich rozmiar więc ładują się szybciej. Złączenie plików do jednego ogranicza ilość żądań HTTP potrzebnych do załadowania całej strony - to też poprawia szybkość ładowania się strony.

Instalacja jest standardowa - pip install webassets. By użyć aplikacji w Django należy do INSTALLED_APPS dodać django_assets. Następnie w jednej z naszych aplikacji (np. tej z głównymi szablonami) tworzymy plik assets.py z definicjami bundli, jakie później wykorzystamy w szablonach. Oto przykład:

from django_assets import Bundle, register

js = Bundle('vendor/jquery-1.7.2.min.js', 'vendor/jquery.cookie.js', 'scripts.js',
            filters='jsmin', output='packed.js')
register('nazwa_bundla', js)

Bundle jako listę argumentów przyjmują pliki statyczne do spakowania (danego typu, np. pliki JavaScript, CSS lub LESS - każde w oddzielnym bundlu), a także filtr jaki ma zostać użyty i wynikowy plik ze ścieżką. Ścieżki do plików są względne ścieżki STATIC_ROOT. Lista "filtrów" jest opisana w dokumentacji. Niektóre z nich wymagają dodatkowych pakietów.

Mając gotowe bundle możemy użyć je w szablonie, np:

{% load assets %}
{% assets "nazwa_bundla" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

I gotowe. Cały kod JavaScript w tym przykładzie został skompresowany i umieszczony w jednym pliku. Webassets będzie generował automatycznie nowe pliki, gdy wykryje jakąś zmianę w bundlowanych plikach. Wraz ze zmianą pliku zmienia się jego "numer" wersji, więc użytkownicy nie dostaną skeszowanej starej wersji.

W przypadku testów konieczne będzie wykonanie collectstatic przed odpaleniem testów. W przypadku testów (debug=False) webassets będzie szukało plików w katalogu STATIC_ROOT i jeżeli ich nie znajdzie to rzuci wyjątek. Po to właśnie jest collectstatic.

W przypadku plików CSS, czy LESS bundlowanie może popsuć ścieżki do plików graficznych używanych przez style. Rozwiązaniem problemu jest filtr cssrewrite.

Share

Django, 12 November 2012