Не настроена минификация javascript файлов
Хочу поделиться способом автоматической минификации стилей и скриптов. Решение было сделано на БУС, но подойдет для других CMS. Описанное решение может оказаться полезным тем, у кого стили распределены по компонентам и не настроены автоматические сборщики типа gulp или webpack и д.р.
Думаю все знают про настройки Оптимизации CSS и JS в главном модуле, а именно "Подключать минифицированные версии CSS и JS файлов" . К сожалению в Битриксе не заложена функция создания минифицированных файлов ( *.min.css и *.min.js ), но зато заложена опция подключения таких файлов.
После успешной установки узнайте путь нахождения установленного модуля, выполнив команду. К примеру у меня, на боевом сервере был свой путь, а на серверах разработки другой.
В ответе будет строка с путём до uglifycss . В моём случае - /usr/local/bin/uglifycss . Далее мы этот путь будем использовать в классе.
В приведенном выше классе есть метод \CCssMinify::getUglifyCssPath, в котором как раз мы возвращаем путь до uglifycss, полученный через whereis uglifycss. Мы не используем специфических настроек запуска uglifycss , только путь до минифицированной версии, которая будет находится рядом с основной.
Сам Агент реализован методом \CCssMinify::minifyAgent(); Как видно из кода, метод автоматически очищает CSS КЕШ сайта. Пересозданию минификаций подвержены только те файлы css, время изменения которых позже созданных для них минификаций. В Административном разделе агент имеет следующие настройки:
Среднее время выполнения агента на моём проекте: 7-8 секунд, для ПОЛНОГО пересоздания. В режиме обычно работы, при пересоздании только изменённых файлов, не превышает 0.1 секунды. Не берусь говорить точно об объёмах, но проект довольно крупный, так что не сильно беспокойтесь, что всё повиснет. Хотя перестраховаться не мешает.
Пример результата работы агента:
C CSS мы закончили. давай перейдем к JS.
В ответе будет строка с путём до uglifyjs . В моём случае - /usr/local/bin/uglifyjs . Далее мы этот путь будем использовать в классе.
Сам Агент реализован методом CJsMinify::minifyAgent(). Как видно из кода, метод автоматически очищает JS КЕШ сайта. Пересозданию минификаций подвержены только те файлы js, время изменения которых позже созданных для них минификаций. В Административном разделе агент имеет следующие настройки:
Среднее время выполнения агента на моём проекте: 30-32 секундs, для ПОЛНОГО пересоздания. В режиме обычной работы, при пересоздании только изменённых файлов, не превышает 0.1 секунды.
Пример результата работы:
Бонус:
В качестве бонуса поделюсь примером .gitignore, чтобы не засорять репозиторий минификациями:
Про минимизацию javascript и css знают все. Ну если кто не знает, то, вкратце, это уменьшение объема файлов за счет удаления комментариев, разметки, переносов строк и прочего. Особенно актуально оно для интернет сайтов, которые при первом же визите пользователя должны порадовать его своей производительностью. Но наш проект, во-первых, работает в локальной сети, а во-вторых, используется на одних и тех же компьютерах изо дня в день, поэтому мы долгое время совсем не задумывались об оптимизации скриптов и стилей. Пока не стали плотно работать с ExtJS.
Созданная страничка со всеми подключенными скриптами и стилями весит больше 5 Мб (около 200 файлов). Одно только сгенерированное DOM-дерево в коде HTML содержит более 500 000 байт. Работать с системой пользователь может начать не раньше, чем через 5 секунд после загрузки страницы (инициализация скриптов, ExtJS и т.п.).
Как оказалось, несмотря на наличие локальной сети у заказчика и частую работу с одними и теми же страницами (должно же быть встроенное кэширование в браузере), иногда с загрузкой страниц возникают проблемы. Поэтому было решено уменьшить количество запросов к серверу и поработать над общей производительностью ExtJS в IE8.
Для минификации скриптов сначала скачал Google Closure Compiler, как один из самых популярных, да и корпорация добра плохого не сделает…
Google Closure Compiler
Положил файлик compressor.jar в папку со скриптами. Чтобы его запускать, пришлось поставить java. Сделал bat-файлик запуска с двумя командами, последняя из которых всего лишь делает задержку в 10 секунд, чтобы можно было успеть увидеть возможные ошибки и самому закрыть окно командной строки. Вот таким вот образом слил все скрипты в один файл, вес уменьшился примерно в полтора раза (это содержимое bat-файла):
Все просто и элегантно, провозился минут пять. Команда cd %0\..\ в начале файла нужна для того, чтобы дальнейшее выполнение команд происходило внутри директории, в которой расположен сам .bat файл, а не с директории по умолчанию после запуска командной строки.
Но тут возникла идея минимизировать не только JS, но и CSS файлы, а Google Closure этого делать, увы, не умеет. Поэтому решил переделать все на YUI Compressor, о котором много отзывов, и он также сжимает CSS.
YUI Compressor
Для объединения всех файлов проекта был написан батник уже значительно большего объема, потому что этот YUI не умеет воспринимать в строке сразу несколько файлов — ему можно скармливать только по одному файлу. А значит, предварительно нам нужно слепить файлы в один временный файл командой copy, а уже потом его сжать юай компрессором.
Кстати, важное замечание — все объединяемые файлы javascript должны иметь в конце файла точку с запятой, а лучше с переносом на след.строку. Вообще любые операторы должны заканчиваться точкой с запятой, и решарпер люто негодует, когда видит наш javascript.
- Во-первых, нужно тщательно следить за использованием относительных путей к изображениям. Стили ExtJS и других библиотек основаны на относительных путях, а значит они сразу выпадают из нашего объединения (кстати, в большинстве своем они уже минифицированы).
- Во-вторых, в CSS файлах могут встречаться команды @import . Это ад.
- В третьих, можно же создавать минифицированные объединенные стили отдельно в каждой из папок, а потом включать в проект, но, как выяснилось, таких файлов у нас получается не так уж много и прирост производительности будет небольшой. Поэтому решили минификацию CSS пока отложить. (Можно было и на Google Closure Compiler остановиться в таком случае)
А теперь самое интересное — батник у нас есть, объединенные скрипты генерируются успешно, осталось их прописать в релизной версии проекта. Все вроде работает, нужно коммитить…. каждый раз запуская скрипт.
Автоматизация минификации при коммите в релиз
Дело в том, что у нас две ветки в SVN — рабочая (DEV) и релизная. Каждый раз перед выкладыванием версии на сервер мы выполняем merge всех (ну или нужной части) изменений, билдим и только потом (если все нормально) коммитим. И надо, во-первых, не забывать самому постоянно выполнять этот батник перед коммитом в релиз, а во-вторых, следить за всеми разработчиками, чтобы тоже не забывали это делать.
И тут нам на помощь приходят Hook Scripts в TortoiseSVN!
В настройках клиента SVN заходим на вкладку Hook Scripts и выбираем там папку нашего проекта и сам батник. В опциях Hook Type выбираем «Start-Commit Hook«, чтобы скрипт запускался перед тем, как отобразится окно коммита.
Настройка запуска минификации перед коммитом
Вуаля, все работает и не надо ни за кем следить!
Есть, конечно, куча встроенных в visual studio средств объединения и минификации, но их тоже надо устанавливать на каждой машине, а еще в них тоже много тонкостей. До этого у нас использовался встроенный метод Composite Scripts, но он не обладает достаточной функциональностью в сравнении с теми же YUI или Google closure Compiler.
При разработке сайта часто обращают внимание на то, что сайт должен иметь малое время отклика на действия пользователя, поэтому применяют различные методы для улучшения производительности сайта, такие как кеширование данных на стороне пользователя, использование 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 проекта под этой ОС - это моветон.
Как использовать W3 Total Cache с PHP 7
Если у вас есть проблема несовместимости W3 Total Cache и PHP версии 7, то обновите плагин до последней версии.
Вы могли получить такую ошибку:
Или вы не получали ошибку, но W3 Total Cache перестал сохранять изменения и кешировать сайт. Если вы посмотрите в код страницы в режиме Debug, то увидите, что служебные комментарии W3TC не добавляются.
Так или иначе, эта проблема была решена в плагине версии 0.9.5, обновите плагин до последней версии, сейчас это версия 0.9.5.4. На этом сайте работает W3TC этой версии и установлена PHP версии 7.1, никаких проблем нет, все работает нормально.
Если проблема все еще есть, напишите в комментариях, есть инструкция по решению этой проблемы.
Суть решения в том, чтобы либо вернуться на PHP 5.6, либо изменить &$buffer на $buffer в нескольких файлах на сервере. В этом случае после обновления плагина эти изменения будут заменены новой версией файлов.
Настройка минификации CSS
Для этого переходим в настройки File | Settings ищем там пункт меню Tools | File Watcher, в File Wather нажимаем кнопку с плюсом для добавления наблюдателя и выбираем YUI Compressor CSS. В Watcher Settings необходимо для поля ввода Program указать путь к исполняемому файлу yuicompressor- .jar.
Он должен будет располагаться по следующему пути:
/home/user/node_modules/yuicompressor/buils/yuicompressor- .jar
Подтверждаем созданием наблюдателя, применяем настройки.
Настройка минификации 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 .
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Рекомендуемые статьи по этой тематике
По статье задано0 вопрос(ов)
Подписчики
Платёжная система
Евгений, вот стал делать новый проект (используя некоторые наработки старого) и снова возникло желание делать автоматом минификации. Полез поглядеть, что у меня в закладках и увидел, что опять судьба меня сталкивает с твоим сайтом. Хочу поблагодарить за действительно качественный контент по теме.
А теперь вопрос. Вот всё-таки, как ни крути, а этот способ на мой взгляд достаточно сложный. Неужели нету вариантов, как-то попроще это делать? Ну там добавить плагин к PyCharm или даже что-нибудь из pip установить для Django. Вопрос: Вы до сих пор пользуетесь именно этим методом? Или нашли что-то более простое?
Макар, добрый день.
Да, я до сих пор использую этот способ. На самом деле ничего сложного здесь нет. Тем более, что это достаточно сделать один раз.
Ну и дополнительно ещё настраиваю области Scope, чтобы указать File Wactherу, какие именно файлы минифицировать.
В общем-то я как настроил последний раз год назад PyCharm, так и не возвращался к поиску иных способов минификации, иногда только Scope правлю, если добавляю новые JS, CSS файлы, которые нужно минифицировать.
Может быть, кто-то и заморочился с плагином для PyCharm, но я это не проверял, поскольку данный способ стандартный и является стандартным функционалом в IDE. А так это будет скорее велосипед с диалоговым окном в котором всё равно придётся указывать, где лежит сам минификатор, а его нужно откуда-то взять. В общем, если это как-то и упростит проект, то всего лишь на один абзац туториала, по-моему мнению.
Что касается pip. То есть утилита minify. Сам ей не пользовался, но что-то документация по настройке этой утилиты выглядит ещё больше, чем эта статья. Да и смысл замусоривать проект, если минификация - это всё-таки сторонний процесс, который должен делаться при разработке. Я бы не смешивал это всё.
Спасибо за отзыв.
Хотелось бы услышать ваше мнение. Хотя в принципе вы уже ответили на мой вопрос, выше. Ибо я придерживаюсь философии, что "Не трожь рабочую систему" (во времена работы в фирме по продаже и настройке компьютеров, тогда ещё windows 98 и Millenium, у нас такой плакат висел на стене), что означет, если работает, проверено годами и устраивает, не надо оптимизировать.
И ещё вопрос, совершенно не по теме.
Я вот посмотрел описание той утилиты, о которой вы спросили. И могу сказать, что я не хотел бы её подключать в свой проект.
Во-первых эта утилита и так использует те минификаторы, которые я перечислил в своей статье. Цитирую из описания
Django Compressor also comes with built-in support for YUI CSS and JS compressor, yUglify CSS and JS compressor, the Google's Closure Compiler , a Python port of Douglas Crockford's JSmin, a Python port of the YUI CSS Compressor csscompressor and a filter to convert (some) images into data URIs.
То есть что здесь Google's Closure Compiler и YUI CSS Compressor , что там.
Во-вторых нужно прописывать в теги compress настраивать setup.py и т.д. У меня против такого есть два довода.
1) Я не хотел бы смешивать процесс разработки и сам готовый продукт, а минификация файлов - это как раз процесс разработки. Признаки функционала по минификации на мой взгляд не должны присутствовать в готовом продукте.
2) даже если в документации и написано, что можно отключить минификацию в этом модуле с помощью настроек в setup.py, но всё равно же эти теги будут вызываться при рендеринге страницы. А если учесть, что некоторые файлы для минификации будут в главном шаблоне, то получается, что при отдаче каждой страницы у нас будет вызываться этот тег, делаться там какая-то проверка, разрешено ли минифицировать или нет. А если это highload проект? Ну и зачем нам тогда искуственно снижать производительность сайта, когда можно сделать минификацию в IDE, причём в автоматическом режиме. Просто там вызов вспомогательной утилиты, там, там, в итоге набегает на пол секунды, если утрированно говорить.
Вообще нотификации есть, написал их сам. При создании нового контента отсылается email, и уведомление в профиле на сайте. Но push нотификаций или sms я не делал. Поэтому тут подсказать или показать ничего не могу. А в случае с email это делается штатными средствами Django.
Как исключить определенные страницы из кеширования
Если вы хотите исключить какие-то страницы из кеширования, то это можно сделать в разделе Page Cache. Спуститесь в секцию Advanced и найдите поле Never cache the following pages. В этом поле уже есть несколько записей по умолчанию. Укажите адрес страницы, которую вы хотите исключить из кеширования в новой строке без учета домена сайта.
Сохраните изменения, очистите кеш, включите режим Debug, отключите удаление html-комментариев в коде и загрузите страницу, которую вы исключили из кеширования. Откройте код страницы в браузере, спуститесь вниз страницы и вы увидите комментарий W3TC о том, что кеширование для этой страницы выключено.
Теперь каждому посетителю страницы будет показываться динамическая версия страницы с сервера.
Как полностью удалить W3 Total Cache
Если вы хотите полностью удалить W3 Total Cache, то вам понадобится доступ к серверу, так как этот плагин оставляет некоторые файлы после удаления из Вордпресс.
После этого W3TC будет полностью удален с сервера.
Как вручную минифицировать CSS и JS без нарушения работы сайта
Обычно сложно предсказать результат минификации CSS и JS, многие сталкиваются с проблемами при минификации этих файлов. Это зависит от установленных плагинов, темы и их скриптов и стилей. Не существует какого-то общего решения этой проблемы, все зависит от конкретного сочетания CSS и JS.
Как узнать, работает W3 Total Cache или нет
В результате работы плагина код страницы минифицирован (записан в одну строку), комментарии удалены:
Откройте нужную страницу и посмотрите ее код (В браузере Хром, правой кнопкой на странице и выберите Просмотреть код страницы).
Если вы хотите увидеть служебную информацию о работе плагина, включите режим Debugging в разделе General Settings.
В секции Debug находится 6 чекбоксов, но доступны только те чекбоксы, модули которых включены в разделе General Settings.
Например, на этой картинке доступны 4 чекбокса, потому что только эти 4 модуля включены в разделе General Settings.
Включите все доступные чекбоксы, нажмите Save all settings и сбросьте кеш, если потребуется. После этого откройте нужную страницу и посмотрите ее код. Спуститесь вниз страницы и вы увидите отладочную информацию для каждого активированного модуля.
Так как в разделе Minify стоит настройка Удалять комментарии в html-коде, чтобы увидеть эту информацию временно отключите эту функцию или весь раздел Minify.
Налаштування мініфікації 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 .
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Рекомендовані статті на цю тему
По статті запитували0 питання
Підписчики
Платіжна система
Евгений, вот стал делать новый проект (используя некоторые наработки старого) и снова возникло желание делать автоматом минификации. Полез поглядеть, что у меня в закладках и увидел, что опять судьба меня сталкивает с твоим сайтом. Хочу поблагодарить за действительно качественный контент по теме.
А теперь вопрос. Вот всё-таки, как ни крути, а этот способ на мой взгляд достаточно сложный. Неужели нету вариантов, как-то попроще это делать? Ну там добавить плагин к PyCharm или даже что-нибудь из pip установить для Django. Вопрос: Вы до сих пор пользуетесь именно этим методом? Или нашли что-то более простое?
Макар, добрый день.
Да, я до сих пор использую этот способ. На самом деле ничего сложного здесь нет. Тем более, что это достаточно сделать один раз.
Ну и дополнительно ещё настраиваю области Scope, чтобы указать File Wactherу, какие именно файлы минифицировать.
В общем-то я как настроил последний раз год назад PyCharm, так и не возвращался к поиску иных способов минификации, иногда только Scope правлю, если добавляю новые JS, CSS файлы, которые нужно минифицировать.
Может быть, кто-то и заморочился с плагином для PyCharm, но я это не проверял, поскольку данный способ стандартный и является стандартным функционалом в IDE. А так это будет скорее велосипед с диалоговым окном в котором всё равно придётся указывать, где лежит сам минификатор, а его нужно откуда-то взять. В общем, если это как-то и упростит проект, то всего лишь на один абзац туториала, по-моему мнению.
Что касается pip. То есть утилита minify. Сам ей не пользовался, но что-то документация по настройке этой утилиты выглядит ещё больше, чем эта статья. Да и смысл замусоривать проект, если минификация - это всё-таки сторонний процесс, который должен делаться при разработке. Я бы не смешивал это всё.
Спасибо за отзыв.
Хотелось бы услышать ваше мнение. Хотя в принципе вы уже ответили на мой вопрос, выше. Ибо я придерживаюсь философии, что "Не трожь рабочую систему" (во времена работы в фирме по продаже и настройке компьютеров, тогда ещё windows 98 и Millenium, у нас такой плакат висел на стене), что означет, если работает, проверено годами и устраивает, не надо оптимизировать.
И ещё вопрос, совершенно не по теме.
Я вот посмотрел описание той утилиты, о которой вы спросили. И могу сказать, что я не хотел бы её подключать в свой проект.
Во-первых эта утилита и так использует те минификаторы, которые я перечислил в своей статье. Цитирую из описания
Django Compressor also comes with built-in support for YUI CSS and JS compressor, yUglify CSS and JS compressor, the Google's Closure Compiler , a Python port of Douglas Crockford's JSmin, a Python port of the YUI CSS Compressor csscompressor and a filter to convert (some) images into data URIs.
То есть что здесь Google's Closure Compiler и YUI CSS Compressor , что там.
Во-вторых нужно прописывать в теги compress настраивать setup.py и т.д. У меня против такого есть два довода.
1) Я не хотел бы смешивать процесс разработки и сам готовый продукт, а минификация файлов - это как раз процесс разработки. Признаки функционала по минификации на мой взгляд не должны присутствовать в готовом продукте.
2) даже если в документации и написано, что можно отключить минификацию в этом модуле с помощью настроек в setup.py, но всё равно же эти теги будут вызываться при рендеринге страницы. А если учесть, что некоторые файлы для минификации будут в главном шаблоне, то получается, что при отдаче каждой страницы у нас будет вызываться этот тег, делаться там какая-то проверка, разрешено ли минифицировать или нет. А если это highload проект? Ну и зачем нам тогда искуственно снижать производительность сайта, когда можно сделать минификацию в IDE, причём в автоматическом режиме. Просто там вызов вспомогательной утилиты, там, там, в итоге набегает на пол секунды, если утрированно говорить.
Вообще нотификации есть, написал их сам. При создании нового контента отсылается email, и уведомление в профиле на сайте. Но push нотификаций или sms я не делал. Поэтому тут подсказать или показать ничего не могу. А в случае с email это делается штатными средствами Django.
W3 Total Cache большой и сложный плагин. Когда он работает правильно — все в порядке, страницы загружаются быстро. Но когда что-то начинает работать не так, приходится искать источник проблемы, найти который бывает непросто из-за размера плагина.
В этой статье вы узнаете решения для часто возникающих проблем W3TC:
Чем производится минификация?
Минификация кода будет производиться двумя утилитами:
- YUI Compressor - будем использовать его для минификации CSS
- Closure Compiler - будем использовать его для минификации JavaScript
В принципе YUI Compressor может использоваться и для минификации JavaScript кода, но с версией ECMA 6 , который также используется у меня он выдавал ошибки. Поэтому для минификации JavaScript я использовал Closure Compiler.
Установка
Для установки этих пакетов используем Node Package Manager (npm).
Для этого установим NPM , если он у вас ещё не установлен.
Далее из домашней папки пользователя произведём установку пакетов через NPM
Программы будут установлены в каталог node_modules в вашей домашней директории.
Почему это происходит
Есть 3 основные причины, по которым минификация нарушает работу сайта.
1. Нарушена очередность загрузки JS файлов, то есть зависимые файлы загружаются перед главными файлами.
Если у какого-то файла есть обращение к библиотеке jQuery, то он должен загрузиться после файла jquery.js. Поставьте файл jquery.js на первое место в очередности загрузки. Если есть другие файлы, зависимые друг от друга, поставьте их в правильной очередности.
2. Содержимое страницы отображается до того, как загружены важные для отображения контента файлы CSS и JS, из-за чего появляется неровный контент.
Файлы jquery.js и style.css должны быть первыми в списке загрузок. Дайте важным для отображения контента файлам CSS или JS вторые места в приоритете загрузки, даже если это вызывает предупреждение Eliminate render-blocking JavaScript and CSS in above-the-fold content в тесте Гугл.
3. При минификации и объединении файлов возникает ошибка синтаксиса.
Если это случается, то не загружаются все файлы, объединенные в минифицированный файл. В этом случае вам понадобится найти файл, вызывающий ошибку, и исключить его из объединяемых файлов.
Приоритет загрузки и исключение из объединения можно установить вручную в разделе Minify.
- Включите режим Manual для минификации файлов.
В разделе General Settings спуститесь в секцию Minify, выберите режим Manual и сохраните изменения. - Добавьте все JS файлы в ручной список.
Performance ->Minify, нажмите кнопку help наверху страницы. В появившемся окне спуститесь вниз списка JS файлов и нажмите кнопку Check / Uncheck All для выделения всех JS файлов и нажмите Apply & close. Не добавляйте CSS файлы на этом этапе. Сделайте изменения в JS файлах, чтобы сайт начал работать нормально, не затрагивая CSS файлы. - Установите такой порядок загрузки JS файлов, который не нарушает работу сайта
- Поставьте файл jquery.js на первое место загрузки.
- Поставьте все остальные файлы в той очередности, в которой сайт работает правильно.
- Переносите файлы из секции в секцию по одному, используя non-blocking метод.
- После каждого изменения очищайте кеш и проверяйте изменения на сайте.
Поставьте после файла jquery.js файлы, которые используют библиотеку jQuery, например, jquery-migrate.js или jquery-ui.js. Постарайтесь поставить остальные файлы в соответствии с порядком, в котором они влияют на отображение содержимого страницы. Например, файл functions.js должен быть выше в приоритете загрузки, чем comment-reply.js, потому что functions.js содержит основные скрипты / функции, а загружать comment-reply.js можно позже, когда начнет загружаться часть страницы с комментариями.
Критичные файлы должны быть загружены в начале загрузки страницы, более второстепенные должны загружаться ниже в странице после тега
или .Сохраняйте изменения после каждого шага и проверяйте их на сайте.
Если вы хотите начать сначала, удалите все файлы кнопкой Delete и добавляйте их по одному кнопкой help. Тестируйте разное расположение файлов на странице и оставьте лучший результат.
Следуя этой инструкции вы можете добавить все (или почти все) файлы CSS и JS, минифицировать их и расположить в нужной последовательности, чтобы сайт загружался правильно и количество предупреждений в тесте Гугл уменьшилось до минимума.
Как настроить W3 Total Cache для работы с Memcache
Обычно проблема заключается в том, что модуль Memcached установлен на сервере, но не распознается W3 Total Cache, и тест совместимости W3TC говорит, что Memcached не установлен и не предлагает его в качестве модуля кеширования.
Решение проблемы в том, чтобы установить модуль PECL memcache PHP. Модуль Memcached тоже должен быть установлен на сервере, но для Memcache кеширования также нужен модуль PECL memcache PHP.
Установите оба модуля, — модуль кеширования Memcached и PECL memcache PHP (не PECL memcache d PHP). После их установки W3TC распознает этот метод кеширования, и предложит его для работы.
Инструкция по установке обоих модулей находится в разделе Install. Спуститесь ниже для инструкции по установке модуля Memcached (Daemon), после этого установите модуль PECL Memcache PHP.
Как отключить всплывающее окно в настройках W3 Total Cache
Если вы нажмете на «х» в правом верхнем углу, то вы закроете это окно, но оно будет появляться снова.
Чтобы полностью отключить это окно, вместо «х» нажмите Cancel. После этого окно исчезнет и больше появляться не будет.
Налаштування мініфікації CSS
Для цього переходимо до налаштувань File | Settings шукаємо там пункт меню Tools | File Watcher, у File Wather натискаємо кнопку з плюсом для додавання спостерігача і вибираємо YUI Compressor CSS. У Watcher Settings необхідно для поля введення Program вказати шлях до виконуваного файлу yuicompressor- .jar.
Він повинен буде розташовуватися наступним шляхом:
/home/user/node_modules/yuicompressor/buils/yuicompressor- .jar
Підтверджуємо створення спостерігача, застосовуємо налаштування.
Комментарии
Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Timeweb
Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.
При розробці сайту часто звертають увагу на те, що сайт повинен мати час відгуку на дії користувача, тому застосовують різні методи для поліпшення продуктивності сайту, такі як кешування даних на стороні користувача, використання 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 , якщо він ще не встановлений.
Далі з домашньої папки користувача зробимо встановлення пакетів через NPM
Програми будуть встановлені в каталог node_modules у вашій домашній директорії.
Налаштування PyCharm
Для налаштування мініфікації необхідно створити File Watcher , який запускатиме необхідну програму при зміні файлів. При цьому в PyCharm вже є налаштовані спостерігачі файлів, в які необхідно лише додати шляхи до файлів мініфікаторів, що використовується.
Настройка PyCharm
Для настройка минификации необходимо создать File Watcher , который будет запускать необходимую программу при изменении файлов. При этом в PyCharm уже имеются преднастроенные наблюдатели файлов, в которые необходимо лишь добавить пути к исполяемым файлам минификаторов.
Читайте также: