Переписал MinifyX
Вчера озадачился улучшением скорости загрузки сайта и решил, что пора сжать скрипты и стили. Попробовал MinifyX - вроде ничего, но страшно уродует стили, а javascript фактически вообще не жмет (ну вырезал он переносы строк, и это все?). Ну хоть склеивает все файлы в один.
Затем в комментариях предложили другой способ. Он сканирует указанные директории на предмет наличия там скриптов и стилей, и пережимает. Только, CSS отчего то не жмет, и нет возможности указать конкретные файлы для обработки.
Да и в пакет не собрано - неудобно будет на другие сайты ставить. В общем, пришлось и от него отказаться.
По старой доброй традиции клонировал исходники MinifyX и принялся за работу. В исходниках, кстати, половины файлов нет - брал из пакета. Видимо репозиторий существет для галочки.
Сжатие
Первым делом выяснил, что в порче css виноват какой то матерый минификатор. В код не глядел, но судя по результатам работы - он анализиарует селекторы из css файлов и вырезает лишние, по его мнению. Конечно, размер файла становится меньше, но и сайт в итоге выглядет совершенно иначе.
Заменил его на библиотеку из проекта Minify, сразу стало хорошо. И минифицирует, и ничего не ломает.
В оригинальном MinifyX javascript вообще не сжимался. Ну то есть, вырезались переносы строк и все. Добавил обработку через JsMin.
Теперь, все сжимается просто прекрасно, никаких глюков не замечено. В этим покончили, надо переделать кэш.
Кэширование
В оригинальном пакете высчитывался хэш из параметров вызова, потом оно чистилось плагином и еще какие-то сложности. В общем, кэш там был странный.
Я решил поступить творчески - выкинул нафиг плагин и сделал нормальные имена у файлов, добавив к ним Unix timestamp параметром.
Если сниппет выполняется не кэшированным - timestamp всегда разный, и вы каждый раз грузите css и js заново. Хорошо для отладки.
Если же сниппет кэшированный - то ссылки на файлы выдаются со старым timestamp, и браузер берет файл из своего кэша.
При очистке кэша сайта чистится и кэш сниппета - а при первой загрузке страницы он выдаст новый timestamp, и вы загрузите новые css и js. Просто и красиво.
Но я пошел дальше. Если сниппет вызывается некэшированным, но файлы-исходники не менялись - то нет смысла их каждый раз обрабатывать, так? Тем более, там зверские регулярные выражения, что очень не быстро.
Поэтому, теперь при склейке файлов проверяется время изменения итогового файла и исходников. Если хоть один из исходных файлов (отдельно для css и jss) изменен - то склеиваем заново. Если нет - ничего не делаем.
Класс, все работает! Но есть проблема - а если юзер раньше не использовал сжатие, а теперь начал, или наоборот? Надо же перегенерировать файлы, но как об этом узнать? Да все просто - делаем сохранение минифицированных версий с суффиксом min.
Теперь, в зависимости от параметров запуска, проверяются те, или иные итоговые файлы, а на выходе мы получаем понятные названия, по которым сразу видно - минифицирован файл или нет.
Да, по поводу имен - добавлено 2 новых параметра:
&jsFilename - базовое имя файла, без расширения. По умолчанию - sсripts
&jcssFilename - базовое имя файла, без расширения. По умолчанию - styles
Вот эти имена в итоге и транформируются в такое:
/inc/min/styles.min.css?1347183340
/inc/min/scripts.min.js?1347183340
В общем, кэширование работает без всяких плагинов, просто, прозрачно и красиво, как я люблю.
По мелочи
В итоге, переписал практически все, добавил сниппету параметры (чтобы в админке было видно, какие есть), отправил изменения автору, упаковал в пакет и выложил в репозиторий - можно качать.
Настройке те же (плюс 2 новые), только теперь оно действительно работает! Например, на этом сайте - загляните в исходный код.
Пакет в репозитории MODX
Страница компонента на RTFM
Исходный код новой версии на Github
Пример вызова на этом сайте:
[[MinifyX?
&minifyCss=`1`
&minifyJs=`1`
&cacheFolder=`/inc/min/`
&jsSources=`
/inc/js/jquery-1.8.1.min.js
,/inc/js/jquery-ui-1.8.23.custom.js
,/inc/js/jquery.cookie.min.js
,/inc/js/jquery.fancybox.min.js
,/inc/js/jquery.mousewheel.min.js
,/inc/js/bootstrap.min.js
,/inc/js/prettify/prettify.js
,/inc/js/main.js
`
&cssSources=`
/inc/css/bootstrap.min.css
,/inc/css/bootstrap-responsive.css
,/inc/css/reboot-landing.css
,/inc/css/reboot-landing-responsive.css
,/inc/css/jqueryui/jquery-ui-1.8.16.custom.css
,/inc/css/font-awesome.css
,/inc/css/fancybox/jquery.fancybox.css
,/inc/js/prettify/prettify.css
,/inc/css/main.css
`
]]
[[+MinifyX.css]]
[[+MinifyX.javascript]]
Javascript советуют переносить в подвал, чтобы резче грузилось.
Как обычно, прошу сообщать о найденных глюках и проблемах.
Важный update
Как оказалось, браузеры не кэшируют скрипты стили, если у них есть параметры в url, типа scripts.min.js?1234567890. А вот изображения с параметрами, почему то, прекрасно кэшируются.
В общем, пришлось переписать генерацию файлов так, чтобы timestamp был в имени - scripts_1234567890.min.js.
Крайне рекомендую обновиться на версию 1.1.2, ваш сайт забегает еще быстрее.
Василий Наумкин
Красота) Вы как всегда на коне
Отличная новость. Попробую поставить.
А как насет плагина для сжатия html кодаа страницы?
Считаю, что не имеет смысла.
Экономия в 5-10 килобайт и лишняя обработка каждой страницы после очистки кэша.
Лучше настроить nginx, чтобы отдавал весь контент в gzip — выхлопа гораздо больше.
Подскажите, сработает путь вида http:// или просто //yandex.ru/example.js?
Неа.
1. У такого файла не измерить filemtime — и будет непонятно, изменен он, или нет.
2. Файл может оказаться недоступен и загрузка страницы подвиснет. Чтобы отваливаться по таймауту, можно, конечно, написать запрос через CURL, но он не у всех есть.
Поэтому, файлы работают только локальные.
У меня ошибка, при включенном jsMin появляется ошибка «Unexpected token ) », если отключить пропадает. Подключенные файлы:
/assets/templates/bs/js/libs/jquery-1.7.2.min.js ,/assets/templates/bs/js/libs/bootstrap/bootstrap.min.js
,/assets/templates/bs/js/libs/jquery-ui-1.8.23.custom.min.js
,/assets/templates/bs/js/libs/jquery.form.js
,/assets/templates/bs/js/libs/jquery.colorbox-min.js
,/assets/components/msearch/js/mfilter.js
,/assets/components/likedislike/js/web/likedislike.js
,/assets/templates/bs/js/script.js
Бывает, пока не понял отчего. Видимо, не все скрипты нормально работаю в куче с другими.
Подключайте по одному скрипту и выясняйте, кто виноват.
У меня сегодня на одном сайте была проблема с jquery.form. Перекачал его с родного сайта, несжатый — заработало.
Спасибо за наводку, буду искать)
Очень советую качать все с родных сайтов. Яндекс на своем cdn явно как то их интересно пережимает, например.
Так и делаю, с Яндекса только кнопка «Поделиться».
Обновил colorbox на полную версию, jquery form, bootstrap не минифицированный указал, ошибка пропала)
Клево!
Выходит, переминифицировать минифицированные скрипты нежелательно =)
Ну и попробуйте не пережимать уже пережатые скрипты (хотя у меня работает, на жтом сайте =))
Скачайте все несжатые, от производителя.
Чтобы не заводить новый вопрос о оптимизации, спрошу здесь.
Запустил PageSpeed от гугла, говорит, что css и js файлы hypercomments можно ужать более чем на 70% если включить gzip или deflate, но как его включить для внешних ресурсов?
Я так понимаю, что никак.
Параметр deflate, думаю, можно указать, а вот gzip зависит от сервера. Попробуйте сохранить у себя и грузить локально.
Следующие кэшируемые ресурсы имеют короткий срок действия.
В дальнейшем следует указать для следующих ресурсов срок действия не менее недели:
../scripts_1347387573.min.js (не указан срок истечения действия)
../styles.min.css (не указан срок истечения действия)
До этого кешировалось все нормально)
Сжатие то тут при чем?
Срок действия выдает веб-сервер, заголовками. Протестируйте этот сайт и посмотрите, что покажет.
У меня этим вопросом занимается nginx. Вот конфиг кэширования статики:
# serve static files directly
location ~* ^.+\.(jpg|jpeg|gif|css|png|js|ico|bmp|woff)$ {
access_log off;
expires 10d;
break;
}
Спасибо, разобрался)
Про: «Вот эти имена в итоге и транформируются в такое:
/inc/min/styles.min.css?1347183340
/inc/min/scripts.min.js?1347183340»
Наткнулся на момент:
Если папка "/inc/min" не существует, то автоматически она не создается и MinifyX не создает файлы.
В логах ошибка есть:
[2012-10-02 10:49:46] (ERROR @ /index.php) [MinifyX] Could not write JS cache file!
[2012-10-02 10:49:46] (ERROR @ /index.php) [MinifyX] Could not write CSS cache file!
Предлагаю создавать папку автоматически.
При установке создается директория /assets/components/minifyx/cache/ каковая является директорией по умолчанию.
Меняете умолчание — создайте и директорию. Совсем уже разленились, блин.
Не соглашусь.
Вопрос не в лени, вопрос в поиске ошибки, когда «все не работает»
Could not write JS cache file! — не информационно
Если бы в логах было «path „/inc/min“ for write JS cache file not found» было бы проще найти в чем косяк. А если компонента сама создаст нужную ей папку, то программисту будет житься проще.
Чем сложнее ошибку найти, тем выше порог вхождения в технологию.
Мне кажется MODX заслуживает гораздо более широкого распространения, чем сейчас. И Вы своими работами можете поспособствовать распространению MODX, а можете и не способствовать.
Цель моего поста отнюдь не «Безумкин, ты офигел так фигово писать»
Его смысл «Давайте сделаем сделаем MODX доступнее.»
Ваши знания на сегодняшний день весьма превышают мои в этом вопросе, Но я хотел помочь. Если мое участие впредь не требуется, дайте, пожалуйста, об этом знать прямо. Спасибо.
Жду ваших коммитов на Github.
Мой уровень прикладное программирование, а не системное.
Я потенциальный пользователь ваших разработок, а не соразработчик. Увы.
Василий День добрый. В тему ускорения работы сайтов Наткнулся на весьма интересную вещь - для меня было в новинку. Использование в CSS вместо ссылок на изображение непосредственно base64 кода самого изображения. Вот статья на хабре, там есть скриптик который конвертирует CSS можно прикрутить к minify если заинтересует.
Из любопытства конвертировал картинку размером 270кб , текстовый файл с кодом 64 1кб.
Не относитесь критично ... просто решил поделится мало ли.)
Спасибо, интересно.
Можно, в принципе, всякие логотипы так сконвертить на досуге.
Отличное дополнение, спасибо! Только вот никак не могу найти настройки, те что указаны на скриншоте.
В настройках системы у меня их нет, все на несколько раз обыскал:
Подскажите, пожалуйста, где находятся настройки?
Это в параметрах самого сниппета.
О, спасибо большое - нашел!
Василий приветствую!
Хороший получился компонент, возможно будет интересно с чем столкнулся в процессе использования MinifyX при адаптации купленного html шаблона.
Есть скрипты которые подключаются в шапке и подвале сайта, снипет в таком случае выдает один и тотже результат, приходится делать "копию" снипета и менять все примерно в таком ключе:
getService('minifyx1','MinifyX', MODX_CORE_PATH.'components/minifyx/model/minifyx/',$scriptProperties); if (!($minifyX1 instanceof MinifyX)) return '';
$minifyX1->minify();
return '';
Тогда вызов работает. Собственно очень интересно узнать следующее:
1) Возможно ли сделать вызов одного и тоже снипета (без копирования и дописывания) но с разными параметрами (списками фалов, папкой кэша, наименованием файла скриптов и стилей)? 2) Возможно ли доработать на раздельные методы, которые бы просто возвращал значение имени "склеенного" js файла и css файла?
Все возможно, но пока я очень занят.
Как дойдут руки - буду делать.
Invalid argument supplied for foreach() in W:\html\aerosystems.ru\www\core\components\minifyx\model\minifyx\minifyx.class.php on line 151
Такая вот ошибка.
да у меня тоже такая есть ERROR @ public_html/core/components/minifyx/model/minifyx/minifyx.class.php : 151) PHP warning: Invalid argument supplied for foreach()
Было бы здорово добавить вот такой функционал:addheaderfilesВ сущности у афтора есть и плагин для минификации.
Добрый день, при минификации вырезаются некотороые пробелы, например строка:
при минификации превращается в :
тут сократился пробел между +, что приводит к ошибке в минифициорованном коде.
есть ли какое-то решение? если не для плагина, то может этот код можно поправить?
Минифицирует Google Minify - все вопросы к нему.
Ну а вообще, в планах есть обновление и переделка пакета, может и эта проблема исчезнет.
Да, не, вроде бы не Google Minify, а вот это используется: https://github.com/rgrove/jsmin-php/
Если кому понадобится, можно просто код поменять:
Я давно делал, уже и не помню.
Но к переписыванию готовлюсь =)
)) спасибо Тут кстати автор порекомендовал на какие минификаторы лучше перейти: https://github.com/rgrove/jsmin-php/может что-то приглянется
Для php там ничего нет, к сожалению.
Я вот сюда поглядывал, вроде перспективная библиотека.
При установке с нуля MS2 и нового бутстрапа с MinifyX темы полностью калечатся. Вот, например, карточка товара выглядит примерно так
Как побороть сей досадный баг ?
Переписать чанки на Bootstrap3?
Было бы очень круто! :) Так как я понятия не имею куда копать ! :(
Василий, подскажите, где именно нужно делать вызов этого сниппета?
Судя по всему в чанке head тут посмотрите http://rtfm.modx.com/extras/revo/minifyx
Если через плейсхолдеры, то понятно дело, в секции head. А так в любом месте. При парсинге все подставится куда нужно.
http://docs.modx.pro/components/minifyx/snippet
Там не ответа на этот вопрос. А для начинающих было бы неплохо написать где нужно вставлять вызов этого сниппета.
Где в шаблоне скрипты и стили? Там и нужно вставлять, по моему - это очевидно.
Чем больше пишу и рассказываю, тем более странные вопросы задают. Скоро будет "а как зайти в админку?", "а что такое логин и пароль?".
Еще древние философы писали: "Чем больше я знаю, тем больше я не знаю!" Чем больше ты рассказываешь, тем человеку интереснее, тем больше он задумывается и больше у него возникает вопросов. :) > Где в шаблоне скрипты и стили? Там и нужно вставлять, по моему — это очевидно.
А можно и не там. ;)
После установки пакета при очистке кеша сайта из админки в консоле начало появляться сообщение об ошибке: PHP warning: mkdir() [function.mkdir]: Invalid argument PHP warning: mkdir() [function.mkdir]: Invalid argument PHP warning: mkdir() [function.mkdir]: Invalid argument PHP warning: mkdir() [function.mkdir]: Invalid argument PHP warning: mkdir() [function.mkdir]: Invalid argument
MODX Revolution 2.2.13-pl (traditional) MinifyX 1.3.0 beta установлена из официального репозитория
Это у меня что не так или устарело где?
И вдобавок файлы в кеше появляются, но появляются пустыми :( Т.е. ссылки в head на файлы вставляются, файлы доступны, но они пусты: и js, и css
Можете подсказать куда смотреть? Спасибо.
Версия php у вас какая?
PHP Version 5.3.13
На счёт пустых файлов прошу прощения - моя ошибка. Ошибся в путях - снипет не находил файлы для сжатия. А сообщение при очистке кеша ещё есть.
Добавлю, что даже при этой ошибке в логе консоли кеш очищается - старые файлы стилей и скриптов удаляются. Если это просто warning и можно на него не обращать внимания, то ладно. Смущает просто.
Покопался в коде minifyX. Заметил вызовы с указанием прав, может дело в них?
mkdir($dir, 0777, true) mkdir($this->cacheDir, 0755, true)
И возник ещё один простой вопрос: а кто и когда удаляет старые файлы скриптов и стилей в кэше?
Ты, когда чистишь кэш сайта.
Если в JS есть 'use strict'; то валится вот такая ошибка
Fatal error: Uncaught exception 'RuntimeException' with message 'Unclosed string. in /core/components/minifyx/munee/tedivm/jshrink/src/JShrink/Minifier.php:409
Судя по пути, вопрос не ко мне.
Добрый день! при любом вызове minifyx 1.3.1 ошибка: minifyx.class.php on line 112 Parse error: syntax error, unexpected T_STRING - не нравится косая черта minifyx.class.php on line 112 Warning: Unexpected character in input: '\' (ASCII=92) state=1. Я так понимаю дело в версии php (у меня PHP Version 5.2.17)???
112 строчка: $Request = new \Munee\Request($options);
Пора обновить свой PHP хотя бы до 5.3.