Инструкция по Django Compressor. Как сжимать и минимизировать статические файлы.

Сперва установим на сервере нужное ПО. В дебиан семействе дистрибутивов, это делается так:


 sudo apt install memcached

И активируем службу.


 sudo service memcached start

Теперь в python окружении, в котором работает наш проект устанавливаем библиотеки.


  (venv) pip install  python-memcached


  (venv) pip install  django-compressor


  (venv) pip install  django-htmlmin


  (venv) pip install  pymemcache

Ставим попутно библиотеки, которые ещё нам могут понадобиться для сжатия и оптимизации.


  (venv) pip install  html5lib


  (venv) pip install  calmjs.parse


  (venv) pip install  csscompressor


  (venv) pip install  brotli

После этого добавляем в файле настроек нашего django проекта, в settings.py следующее:

☯

Terminal:

⌕

≡

✕

     DEBUG = False
     COMPRESS_ENABLED = not DEBUG

     Add 'compressor' to your INSTALLED_APPS setting:

     INSTALLED_APPS = (
         # other apps
         "compressor",
     )

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


     CACHES = {
         'default': {
             'BACKEND': 'django.core.cache.backends.memcached.PyMemcacheCache',
             'LOCATION': '127.0.0.1:11211',
         }
     }

     #вначале с MIDDLEWARE первыми строками

    MIDDLEWARE = [

    'django.middleware.gzip.GZipMiddleware', #This one
    'htmlmin.middleware.HtmlMinifyMiddleware', #This one
    ...
    ]

Теперь в файлах шаблонах, добавляем теги компрессии, и оборачиваем все подключаемые файлы css, а также js. скрипты можно оборачивать в теги как подключаемые файлы, так и просто написанные в шаблоне.

Без добавления этих тэгов в шаблоне, ничего не получится запустить.

вначале шаблона

{% load compress %}

и каждое подключение css и js оборачиваем в соответствующим тегом для css, не забывая ставить закрывающие теги.

{% compress css %}
...
{% endcompress %}

для js

{% compress js %}
...
{% endcompress %}

Вот например как это может выглядеть:

☯

Terminal:

⌕

≡

✕

  {% load static %}

  {% load compress %}

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    {% compress css %}
    <link rel="stylesheet" href="{% static 'style.css' %}">
    {% endcompress %}

    {% compress js %}
    <script src="{% static 'script.js' %}"></script>
    {% endcompress %}

    {% compress js %}
    <script src="{% static 'script.js' %}"></script>

    <script>
    console.log('привет мир');
    </script>

    {% endcompress %}

<!-- Вы можете добавить встроенный параметр, если хотите, чтобы содержимое отображалось непосредственно на странице, а не в отдельном файле. -->
{% compress js inline %}
    <script>
    console.log('привет мир');
    </script>
{% endcompress %}

<!-- Вы также можете добавить параметр предварительной загрузки для создания тега предварительной загрузки для сжатого файла в шаблоне. -->

{% compress js preload %}
    <script>
    console.log('привет мир');
</script>
{% endcompress %}


  </head>
  <body>
    <center>
      <h1>Raturi.in</h1>
      <h1 class="heading">Hello Lets compress</h1>
      <p class="para">I am just a para</p>
      <button onclick="change_colors()">Change colors</button>
    </center>
  </body>
  </html>

Теперь выполняем следующие команды

Чтобы создались кэшированные файлы скриптов и стилей.


    (venv) python manage.py  collectstatic

И выполним сжатие.


    (venv) python manage.py  compress --force

Затем может понадобиться установить права, и добавить символьные ссылки, всё зависит от ваших настроек статики. У меня например было сделано так. Находясь в корне проекта, в оболочке сервера.

cd static_root
chown user:www-data -R CACHE
chmod g+w -R CACHE
chmod a+r -R CACHE
cd ..
cd static
ln -s /var/www/html/django_project/static_root/CACHE/ CACHE

Т.е. мы установили нужные права, на созданные статические файлы. И добавили символьную ссылку в каталоге static, указывая источником их. В итоге, вот такого типа имена файлов, будут автоматически сгенерированы и подключены, как стили и скрипты.

☯

Terminal:

⌕

≡

✕


<link rel="stylesheet" href="/static/CACHE/css/output.e5DDsddg3332.css" type="text/css" charset="utf-8">
<script type="text/javascript" src="/static/CACHE/js/base.3dffstdDss12.js" charset="utf-8"></script>

Создано 08.05.2023 13:00:00
Roman Sakhno

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

itDid

Инструкция по Django Compressor. Как сжимать и минимизировать статические файлы.

Terminal:

✕

Terminal:

✕

Terminal:

✕

Комментарии (0):

крипто-донат, на развитие сайта itdid.ru: