Ускоряем загрузку страниц в Django
20 апреля 2017 г.
djangoДля 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. Устанавливаем его:
В settings.py добавляем в установленные приложения:
# other apps
"compressor",
)
и для статики дописываем:
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# other finders..
'compressor.finders.CompressorFinder',
)
В режиме DEBUG = True компрессия производиться не будет, но ее можно включить принудительно передав значение переменной COMPRESS_ENABLED = True.
Теперь в шаблоне остается только прогрузить метод {% load compress %} и обернуть требуемые строки в такую конструкцию:
<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 %}
<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
Комментарий будет размещен на сайте после прохождения модерации.