Bei der Entwicklung einer Website wird oft darauf geachtet, dass die Website eine geringe Reaktionszeit auf Benutzeraktionen haben sollte, daher werden verschiedene Methoden verwendet, um die Website-Performance zu verbessern, wie z. B. das Zwischenspeichern von Daten auf der Benutzerseite, die Verwendung von Cookies und das Minimieren CSS- und JavaScript-Dateien. Durch die Minimierung des Codes dieser Dateien können Sie unnötige Leerzeichen, Symbole und Kommentare entfernen, die auf dem Produktionsserver nicht benötigt werden, sondern nur für die Projektentwicklung erforderlich sind.
Traditionell wird der ursprünglichen Dateierweiterung eine zusätzliche Erweiterung unter der Erweiterung min, hinzugefügt, was die minimierte Datei bedeutet.
- style.css -> style.min.css
- scripts.js -> scripts.miin.js
Ich schlage vor, die PyCharm-Entwicklungsumgebung so einzurichten, dass alle diese Dateien in Ihrem Django-Projekt automatisch minimiert werden.
Css- und jsavascript-Code-Minimierung wird nur in PyCharm Professional Edition unterstützt.
Ein wichtiger Punkt, die Einrichtung erfolgt unter dem Ubuntu-basierten Betriebssystem KDE Neon 5.8 . Ich denke nicht daran, die notwendigen Pakete unter Windows zu installieren, da ich es für unhöflich halte, ein Django-Projekt für dieses Betriebssystem zu entwickeln.
Was wird minimiert?
Die Code-Minifizierung wird von zwei Dienstprogrammen durchgeführt:
- YUI Compressor - wir werden ihn verwenden, um CSS zu minimieren
- Closure Compiler - wir werden ihn verwenden, um JavaScript zu minimieren
YUI Compressor kann im Prinzip auch zum Minifizieren von JavaScript -Code verwendet werden, aber bei der von mir ebenfalls verwendeten ECMA 6 -Version gab es Fehler. Also habe ich Closure Compiler. verwendet, um JavaScript zu minimieren.
Installation
Um diese Pakete zu installieren, verwenden Sie Node Package Manager (npm).
Installieren Sie dazu NPM , falls Sie es noch nicht installiert haben.
sudo apt install nodejs npm
Als nächstes werden wir aus dem Home-Ordner des Benutzers Pakete über NPM installieren.
npm install yuicompressor npm install closure-compiler
Die Programme werden im Verzeichnis node_modules in Ihrem Home-Verzeichnis installiert.
../node_modules ../yuicompressor ../closure-compiler ../google-closure-compiler
PyCharm einrichten
Um die Minimierung einzurichten, müssen Sie einen File Watcher erstellen, der das erforderliche Programm startet, wenn Dateien geändert werden. Gleichzeitig verfügt PyCharm bereits über vorkonfigurierte Dateibeobachter, in denen Sie nur die Pfade zu den ausführbaren Minifier-Dateien hinzufügen müssen.
CSS-Minifizierung einrichten
Gehen Sie dazu in die Einstellungen
Datei | Einstellungen
suchen Sie nach dem Menüpunkt
Extras | File Watcher
in
File Wather
drücken Sie die Plus-Schaltfläche, um einen Watcher hinzuzufügen, und wählen Sie
YUI Compressor CSS.
In den Watcher-Einstellungen müssen Sie den Pfad zur ausführbaren Datei
yuicompressor- für angeben Eingabefeld Programm
Es sollte sich in folgendem Pfad befinden:
/home/user/node_modules/yuicompressor/buils/yuicompressor-
Wir bestätigen die Erstellung des Beobachters, übernehmen die Einstellungen.
Einrichten der JavaScript-Minifizierung
Gehen Sie dazu in die Einstellungen Datei | Einstellungen suchen Sie nach dem Menüpunkt Extras | File Watcher drücken Sie in File Wather die Plus-Schaltfläche, um einen Watcher hinzuzufügen, und wählen Sie Closure Compiler aus. Geben Sie in den Watcher-Einstellungen den Pfad zur ausführbaren Datei compiler.jar. für den an Programmeingabefeld.**
Es sollte sich in folgendem Pfad befinden:
/home/user/node_modules/google-closure-compiler/compiler.jar
Wir bestätigen die Erstellung des Beobachters, übernehmen die Einstellungen.
Um den JavaScript ECMA 6-Standard zu unterstützen, müssen Sie das folgende Argument in den Watcher-Einstellungen im Feld Arguments hinzufügen, das beim Start an das Dienstprogramm übergeben wird --language_in=ECMASCRIPT6
Für Django empfehle ich Timeweb-Hoster VDS-Server .
Евгений, вот стал делать новый проект (используя некоторые наработки старого) и снова возникло желание делать автоматом минификации. Полез поглядеть, что у меня в закладках и увидел, что опять судьба меня сталкивает с твоим сайтом. Хочу поблагодарить за действительно качественный контент по теме.
А теперь вопрос. Вот всё-таки, как ни крути, а этот способ на мой взгляд достаточно сложный. Неужели нету вариантов, как-то попроще это делать? Ну там добавить плагин к 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.