При розробці сайту часто звертають увагу на те, що сайт повинен мати час відгуку на дії користувача, тому застосовують різні методи для поліпшення продуктивності сайту, такі як кешування даних на стороні користувача, використання Cookie файлів, а також мініфікацію CSS і JavaScript файлів. Мініфікація коду цих файлів дозволяє видалити непотрібні прогалини, символи та коментарі, які не потрібні на робочому сервері, а потрібні лише для розробки проекту.
Традиційно до вихідного розширення файлу додається додаткове розширення min, яке означає мініфікований файл.
- style.css -> style.min.css
- scripts.js -> scripts.miin.js
Пропоную налаштувати середовище розробки PyCharm для автоматичної мініфікації всіх цих файлів у вашому проекті Django.
Мініфікація коду css та jsavascript підтримується лише у PyCharm Professional Edition.
Важливий момент, налаштування буде проводиться під Ubuntu-based операційну систему KDE Neon 5.8 . Встановлення необхідних пакетів під Windows я не розглядаю, оскільки вважаю, що розробка проекту Django під цією ОС - це моветон.
Чим проводиться мініфікація?
Мініфікація коду буде здійснюватися двома утилітами:
- YUI Compressor - використовуватимемо його для мініфікації CSS
- Closure Compiler - використовуватимемо його для мініфікації JavaScript
В принципі YUI Compressor може використовуватися і для мініфікації JavaScript коду, але з версією ECMA 6 , який також використовується у мене, він видавав помилки. Тому для мініфікації JavaScript я використав Closure Compiler.
Установка
Для встановлення цих пакетів використовуємо Node Package Manager (npm).
Для цього встановимо NPM , якщо він ще не встановлений.
sudo apt install nodejs npm
Далі з домашньої папки користувача зробимо встановлення пакетів через NPM
npm install yuicompressor npm install closure-compiler
Програми будуть встановлені в каталог node_modules у вашій домашній директорії.
../node_modules ../yuicompressor ../closure-compiler ../google-closure-compiler
Налаштування PyCharm
Для налаштування мініфікації необхідно створити File Watcher , який запускатиме необхідну програму при зміні файлів. При цьому в PyCharm вже є налаштовані спостерігачі файлів, в які необхідно лише додати шляхи до файлів мініфікаторів, що використовується.
Налаштування мініфікації CSS
Для цього переходимо до налаштувань
File | Settings
шукаємо там пункт меню
Tools | File Watcher,
у
File Wather
натискаємо кнопку з плюсом для додавання спостерігача і вибираємо
YUI Compressor CSS.
У Watcher Settings необхідно для поля введення Program вказати шлях до виконуваного файлу
yuicompressor-
Він повинен буде розташовуватися наступним шляхом:
/home/user/node_modules/yuicompressor/buils/yuicompressor-
Підтверджуємо створення спостерігача, застосовуємо налаштування.
Налаштування мініфікації JavaScript
Для цього переходимо до налаштувань File | Settings шукаємо там пункт меню Tools | File Watcher, у File Wather натискаємо кнопку з плюсом для додавання спостерігача і вибираємо Closure Compiler. У Watcher Settings необхідно для поля введення Program вказати шлях до файлу compiler.jar.
Він повинен буде розташовуватися наступним шляхом:
/home/user/node_modules/google-closure-compiler/compiler.jar
Підтверджуємо створення спостерігача, застосовуємо налаштування.
Для підтримки стандарту JavaScript ECMA 6 необхідно в Watcher Settings в полі Arguments додати наступний аргумент, який передаватиметься утиліті при запуску --language_in=ECMASCRIPT6
Для Django рекомендую VDS-сервера хостера Timeweb .
Евгений, вот стал делать новый проект (используя некоторые наработки старого) и снова возникло желание делать автоматом минификации. Полез поглядеть, что у меня в закладках и увидел, что опять судьба меня сталкивает с твоим сайтом. Хочу поблагодарить за действительно качественный контент по теме.
А теперь вопрос. Вот всё-таки, как ни крути, а этот способ на мой взгляд достаточно сложный. Неужели нету вариантов, как-то попроще это делать? Ну там добавить плагин к PyCharm или даже что-нибудь из pip установить для Django. Вопрос: Вы до сих пор пользуетесь именно этим методом? Или нашли что-то более простое?
С уважением
Макар, добрый день.
Да, я до сих пор использую этот способ. На самом деле ничего сложного здесь нет. Тем более, что это достаточно сделать один раз.
Ну и дополнительно ещё настраиваю области Scope, чтобы указать File Wactherу, какие именно файлы минифицировать.
В общем-то я как настроил последний раз год назад PyCharm, так и не возвращался к поиску иных способов минификации, иногда только Scope правлю, если добавляю новые JS, CSS файлы, которые нужно минифицировать.
Может быть, кто-то и заморочился с плагином для PyCharm, но я это не проверял, поскольку данный способ стандартный и является стандартным функционалом в IDE. А так это будет скорее велосипед с диалоговым окном в котором всё равно придётся указывать, где лежит сам минификатор, а его нужно откуда-то взять. В общем, если это как-то и упростит проект, то всего лишь на один абзац туториала, по-моему мнению.
Что касается pip... То есть утилита minify. Сам ей не пользовался, но что-то документация по настройке этой утилиты выглядит ещё больше, чем эта статья. Да и смысл замусоривать проект, если минификация - это всё-таки сторонний процесс, который должен делаться при разработке. Я бы не смешивал это всё.
Спасибо за отзыв.
Евгений, а я вот задумываюсь попробовать вот это решение: https://django-compressor.readthedocs.io/en/latest/
Хотелось бы услышать ваше мнение. Хотя в принципе вы уже ответили на мой вопрос, выше. Ибо я придерживаюсь философии, что "Не трожь рабочую систему" (во времена работы в фирме по продаже и настройке компьютеров, тогда ещё windows 98 и Millenium, у нас такой плакат висел на стене), что означет, если работает, проверено годами и устраивает, не надо оптимизировать.
И ещё вопрос, совершенно не по теме.
Евгений, я вот только задал вопрос, а Вы сразу ответили. У вас какие-то нотификации вас об этом известили? Если почта, то вопрос снят, но если это какие-нибудь сообщения в мессанджер (телеграм через бот или ватсап через что-то) или даже SMS, то хотелось бы посмотреть реализацию таких уведомлений. У вас есть статьи или какие-либо материалы по этой теме?
С уважением
Я вот посмотрел описание той утилиты, о которой вы спросили. И могу сказать, что я не хотел бы её подключать в свой проект.
Во-первых эта утилита и так использует те минификаторы, которые я перечислил в своей статье. Цитирую из описания
То есть что здесь Google's Closure Compiler и YUI CSS Compressor , что там.
Во-вторых нужно прописывать в теги compress настраивать setup.py и т.д. У меня против такого есть два довода.
1) Я не хотел бы смешивать процесс разработки и сам готовый продукт, а минификация файлов - это как раз процесс разработки. Признаки функционала по минификации на мой взгляд не должны присутствовать в готовом продукте.
2) даже если в документации и написано, что можно отключить минификацию в этом модуле с помощью настроек в setup.py, но всё равно же эти теги будут вызываться при рендеринге страницы. А если учесть, что некоторые файлы для минификации будут в главном шаблоне, то получается, что при отдаче каждой страницы у нас будет вызываться этот тег, делаться там какая-то проверка, разрешено ли минифицировать или нет. А если это highload проект? Ну и зачем нам тогда искуственно снижать производительность сайта, когда можно сделать минификацию в IDE, причём в автоматическом режиме. Просто там вызов вспомогательной утилиты, там, там, в итоге набегает на пол секунды, если утрированно говорить.
Вообще нотификации есть, написал их сам. При создании нового контента отсылается email, и уведомление в профиле на сайте. Но push нотификаций или sms я не делал. Поэтому тут подсказать или показать ничего не могу. А в случае с email это делается штатными средствами Django.