coding

Ускоряем загрузку страниц в Django

20 апреля 2017 г.

Для django существует плагин, позволяющий объединять все css и js файлы в один, тем самым сокращая при загрузки страницы количество обращений к серверу. Если без использования этого плагина подключение стилей к странице выглядела так:

<link rel="stylesheet" href="/static/app/css/style.min.css"/>
<link rel="stylesheet" href="/static/app/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/static/app/css/swiper.min.css"/>
<link rel="stylesheet" href="/static/app/css/animate.min.css"/>

То с включенным плагином код выше будет выглядеть так:

<link rel="stylesheet" href="/static/CACHE/css/2956becbd615.css" type="text/css" /> 

Согласитесь, разница есть!

Плагин называется django-compressor. Устанавливаем его:

$ pip install django_compressor

 В settings.py добавляем в установленные приложения:

INSTALLED_APPS = (
    # other apps
    "compressor",
)

и для статики дописываем:

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)

 В режиме DEBUG = True компрессия производиться не будет, но ее можно включить принудительно передав значение переменной COMPRESS_ENABLED = True.

Теперь в шаблоне остается только прогрузить метод {% load compress %} и обернуть требуемые строки в такую конструкцию: 

{% compress css %}
    <link rel="stylesheet" href="{% static 'app/css/style.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'app/css/font-awesome.min.css' %}"/>
    {% block styles %}
        {# Дополнительные стили, подключаемые на конкретных страницах #}
    {% endblock %}
{% endcompress %}

 

{% compress js %}
    <script src="{% static 'app/js/jquery-3.2.0.min.js' %}"></script>
    <script src="{% static 'app/js/jquery.hoverIntent.min.js' %}"></script>
    <script src="{% static 'app/js/parallax.min.js' %}"></script>
    <script src="{% static 'app/js/jquery.arcticmodal-0.3.min.js' %}"></script>
    <script defer src="{% static 'app/js/inputmask.js' %}"></script>
    <script defer src="{% static 'app/js/jquery.inputmask.min.js' %}"></script>
    <script src="{% static 'app/js/base.min.js' %}"></script>
    <script defer src="{% static 'app/js/map.min.js' %}"></script>
    {% block scripts %}
        {# Дополнительные скрипты, подключаемые на конкретных страницах #}
    {% endblock %}
{% endcompress %}

Документация плагина. 

Просмотров - 333

Оставить комментарий

Комментарий будет размещен на сайте после прохождения модерации.

Комментарии

Еще не оставлено ни одного комментария.