Разное

Minifix modx: MinifyX минимизация CSS и JS

Содержание

Вопросы по MinifyX / Русскоязычное сообщество MODX

Каждый раз прежде, когда пытался использовать это дополнение, натыкался на нерешимые преграды и отказывался, так и не исследовав всё до конца.
Но в текущий проект большой и требует серьёзной оптимизации — вот и пытаюсь последние 2 дня разобраться что откуда растёт.
Итак, у меня следующие вопросы по использованию MinifiX:

  1. Можно ли настроить уровень сжатия css? Хотелось бы получить минифицированный в 1 строку файл, а то получается файл из тысяч строк кода… А минифицировать в одну строчку рабочий файл стилей и подключать его минифицированным как-то неправильно — ведь потом с ним ещё работать…
  2. Обрабатывает уже сжатые файлы. Почему-то некоторые минифицированные мною файлы в одну строку с префиксом .min он всё равно разделяет на строки добавляя в общий файл стилей.
  3. минифицированные файлы некоторые обрабатывает. Закономерность такого поведения ещё не нашел.
  4. Иконки fontawesome из уикита при подключении через MinifyX иногда непонятно почему превращаются в иероглифы:
  5. Что делать с необработанными файлами? Хотя системная настройка minifyx_process_registered включена, у меня всё равно не обрабатываются и подключаются в конец head и body следующие файлы:
    <link rel="stylesheet" type="text/css" href="/assets/components/tickets/js/web/lib/prettify/prettify.css">
    <script src="/assets/components/office/js/main/lib/jquery.form.min.js"></script>
    <script src="/assets/components/office/js/main/lib/jquery.jgrowl.min.js"></script>
    <script src="/assets/components/tickets/js/web/lib/jquery.form.min.js"></script>
    <script src="/assets/components/tickets/js/web/lib/jquery.jgrowl.min.js"></script>
    <script src="/assets/components/tickets/js/web/lib/jquery.sisyphus.min.js"></script>
    <script src="/assets/components/ajaxform/js/lib/jquery.form.min.js"></script>
    <script src="/assets/components/ajaxform/js/lib/jquery.jgrowl.min.js"></script>
    <script src="/assets/components/ajaxform/js/lib/jquery.form.min.js"></script>
    <script src="/assets/components/ajaxform/js/lib/jquery.jgrowl.min.js"></script>
  6. Повторяющиеся файлы. И кстати, зачем одни и те же скрипты подключаются каждым компонентом отдельно? В примере из прошлого пункта видно что скрипты jquery.form.min.js и jquery.jgrowl.min.js подключаются 4 раза на одной странице 3-мя разными компонентами!
  7. РЕШЕНО. Не подхватывает сырой код между тегами style и scripts. Все мозги себе сломал, пока не понял, что обрабатывается только тот код в этих тегах, который регистрируется через методы modX::regClientScript, modX::regClientCSS и т.п. Как-то неявно это было описано, а скорее всего это я не совсем понимал и зациклился на описании системных параметров minifyx_processRawJs и minifyx_processRawCss, где не упоминается что код должен быть зарегистрирован этими методами.

    У меня на сайте очень много js-кода разнесено по чанкам, т.к. там подставляются различные переменные системой. В итоге решил эту проблему на феноме путём добавления такой строки для каждого чанка:

    {$_modx->regClientHTMLBlock($_modx->getChunk('scripts.ajax'))}
    {$_modx->regClientHTMLBlock($_modx->getChunk('scripts.modal'))}

P.S. Понятное дело что все системные параметры минификса включены, кроме обработки изображений (они мне не нужны).

Ошибка при работе с MinifyX / Русскоязычное сообщество MODX

Добрый день!
При подключении таблицы стилей страница сайта при первой загрузке в google chrome выкидывает ошибку HTTP ERROR 500. При обновлении с 3 попытки страница отображается нормально.
Журнал ошибок в Modx пустой, а в журнале ошибок хостинга следующее:

PHP Fatal error:  Uncaught exception 'Sabberworm\\CSS\\Parsing\\UnexpectedTokenException' with message 'Identifier expected. Got \xe2\x80\x9c:767p\xe2\x80\x9d' in /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php:178\nStack trace:\n#0 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(402): Sabberworm\\CSS\\Parser->parseIdentifier(true, false)\n#1 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(357): Sabberworm\\CSS\\Parser->parsePrimitiveValue()\n#2 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(189): Sabberworm\\CSS\\Parser->parseValue(Array)\n#3 /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php(114): Sabberworm\\CSS\\Parser->parseIdentifier( in /home/path_to_folder/public_html/core/components/minifyx/munee/vendor/sabberworm/php-css-parser/lib/Sabberworm/CSS/Parser.php on line 178, referer: http://site.ru/

Ошибка возникает при таком подключении таблицы стилей:

[[MinifyX?
	&minifyCss=`1`
	&cssSources=`[[++assets_url]]css/headers/header-v8.css`
]]

и вывод в шаблоне через плейсхолдер [[+MinifyX.css]].
Т.е затык происходит при парсинге файла header-v8.css, а другие файлы (~6 таблиц) в другом шаблоне подкл. нормально.
Вот сам файл header-v8.css
Однако вся эта фигня не была замечена в Mozilla Firefox.

CallBack / Компоненты / docs.modx.pro

Компонент для вывода, обработки и ведения журнала заявок на обратный звонок.

  • При установке подгружает необходимые по умолчанию компоненты — AjaxForm и FormIt.
  • Выводит ссылку «Обратный звонок», по нажатию на которую появляется модальная форма. В этой форме пользователь может указать свой номер телефона и как к нему обратиться при звонке.
  • Отправленная заявка приходит на указанную почту и записывается в журнал.
  • В журнале заявок можно осуществлять поиск по указанному имени и телефону, добавлять комментарии к заявкам.
  • В комплекте идет jQuery Mask Plugin, позволяющий задать маску для телефона. Все стандартное оформление выполнено с помощью Bootstrap.
  • Основная идея и задача компонента — максимально ускорить установку рабочего решения для обратного звонка.

Параметры сниппета

ИмяПо умолчаниюОписание
&tpltpl.callBack.itemОбразец чанка для вывода ссылки на вызов модальной формы.
&targetcallBackModalИдентификатор для связи кнопки с формой.
&registerBootstrap1Определяет нужно ли добавлять скрипты Bootstrap.
&registerCss1Определяет нужно ли добавлять стандартные CSS-стили на Bootstrap.
&wrapperSnippetAjaxFormСниппет для добавления форме Ajax-поведения.
&toPlaceholderИмя плейсхолдера, в который выводить модальную форму отдельно от кнопки.

Параметры сниппетов AjaxForm и FormIt, используемые по умолчанию

ИмяПо умолчаниюОписание
&snippetFormItСниппет для обработки формы.
&formtpl.callBack.formОбразец чанка для вывода формы заявки на обратный звонок.
&hooksemail,callBackLogХуки для FormIt после обработки формы. По умолчанию — отправить письмо и записать в журнал.
&validatephone:required,name:requiredПо умолчанию требуются телефон и имя.
&emailSubject[[%callback.emailSubject]]Сниппет для добавления форме Ajax-поведения.
&emailTpltpl.callBack.emailОбразец шаблона письма администратору.
&successMessage[[%callback.successMessage]]Сообщение об удачной отправке формы.
&emailTo[[++emailsender]]Куда отправлять письмо с данными формы.

Можно использовать и любые другие параметры AjaxForm и FormIt.

Маска для телефона задается параметром data-mask, например:

 <input type="text" name="phone" value="[[!+fi.phone]]" data-mask="+0(000)000-00-00">

Журнал звонков

По умолчанию выводится имя, телефон, все дополнительные текстовые данные из формы, время отправки формы. В дополнительные данные так же заносится Email, на который отправлялась форма.

Чтобы дополнительные данные выводились с русскими заголовками, достаточно создать в Управлении словарями запись вида callback_item_имяполя.

Например, если форма имеет поле city, создаем лексикон callback_item_city со значением «Город».

Для каждой заявки можно оставить комментарий или отредактировать имя и телефон. Ну и, конечно, можно удалить запись или сразу несколько.

Примеры

  • Самый простой вызов, подходит для первоначальной установки на чистом сайте:
[[!callBack]]
  • Если на сайте уже используется Bootstrap, то его подключение следует убрать во избежание ошибок:
[[!callBack? &registerBootstrap=`0` &registerCss=`0`]]
  • При использовании сниппета, например, внутри navbar из Bootstrap’а может возникнуть эффект перекрытия формы фоновым затемнением. Чтобы этого избежать форму нужно вынести как можно выше в DOM. Для этого добавлен параметр &toPlaceholder.
[[!callBack? &registerBootstrap=`0` &registerCss=`0` &toPlaceholder=`modal_form`]]
...
[[+modal_form]]

Дополнения MODX

В этом разделе я собрал дополнения (модули MODX), которые я устанавливаю сразу после разворачивания
дистрибутива при разработке сайтов. Среди этих дополнений есть как обычные сниппеты MODX, выполняющие
те или иные функции, так и полноценныые модули со своей страничкой в разделе «Компоненты» в админке

Рядом с каждым дополнением есть ссылка на его страничку в официальном репозитории и на последнюю сохраненную версию
на моем сайте. По возможности, скачивайте версию из официального репозитория (если он доступен) — ведь я не могу поддерживать
версии всех дополнений в актуальном состоянии.

Надеюсь, я не нарушил никаких лицензий.

pdoTools

Компонент-замена нескольких пакетов для выборки ресурсов или других объектов. От своих аналогов отличается скоростью.
В состав входят следующие сниппеты:

  • pdoResources — Выводит списки ресурсов. Полноценная замена getResources
  • pdoSitemap — Выводит xml-карту сайта. Аналог GoogleSiteMap
  • pdoCrumbs — Добавляет на сайт навигацию в виде хлебных крошек. Заменяет Breadcrumb
  • pdoField — Предоставляет доступ к полям ресурсов. Заменяет одновременно getResourceField и UltimateParent
  • pdoUsers — Выводит список пользователей сайта. Поддерживает фильтрацию по группам пользователей
  • pdoNeighbors — Показывает ссылки на следущий и предыдущий ресурсы
  • pdoPage — Реализует постраничность, так же, как и getPage
  • pdoMenu — Выводит меню на сайте в виде списка ссылок. Аналог Wayfinder

Ace

Подсветка синтаксиса в админке для чанков, сниппетов и пр. Дополнение нереально крутое —
есть даже автодополнение. Если вы пользуетесь CodeMirror или прочими пакетами для подсветки — просто попробуйте 🙂

autoRedirector (модуль MODX)

Компонент отслеживает изменения адресов страниц на сайте и, если вы меняете адрес какой-то страницы,
автоматически проставляет редирект. Можно использовать вместо Redirector, так как позволяет в админке вручную добавить
любое правило редиректа.

Batcher (модуль MODX)

Дополнение позволяет массово переключить у ресурсов шаблон, состояния Показывать/Не показывать, Опубликован/Не опубликован
и пр. Редко когда пригождается, но пару раз он меня очень выручал.

BreadCrumb (сниппет)

На мой взгляд, самое простое дополнение, добавляющее на сайт навигацию в форме хлебных крошек.

Console (модуль MODX)

Добавляет в админ-панель консоль, в которой можно тестировать php-код и сразу же видеть результат его выполнения.
Очень выручает, когда надо сделать какую-нибудь хитрую выборку или отладить какой-то кусок кода.

DirectResize2

Уменьшает вставленные в контент изображения до нужного размера, подключая одну из трех JS-библиотек, которые увеличивают
картинки по клику. В итоге сайт загружается быстрее, так как картинки все «ужаты».

FastUploadTV

Добавляет новый тип ТВ-параметров для упрощенной загрузки картинок контент-менеджером. Этот ТВ представляет из себя
кнопку, при нажатии на которую открывается окно выбора файла. Выбранный файл загружается на сайт в предварительно
указанную папку и прикрепляется к ресурсу.

FormIt (сниппет)

Обрабатывает любые формы. Позволяет сделать валидацию полей форм, после чего передает данные в указанный сниппет для дальнейшей
обработки. Может отправлять почту. Часто используется для создания контактных форм на сайте, но этим его возможности далеко не
органичиваются. Советую уделить этому сниппету много внимания и изучить все его возможности.

AjaxForm (сниппет)

Добавляет возможность реализовать отправку любой формы через AJAX. Хорошо взаимодействует с FormIt и по умолчанию настроен на автоматическую
работу с такими формами.

MinifyX (сниппет)

Объединяет и минифицирует стили и скрипты на сайте. Если вызывать некешированным, то отслеживает изменения файлов и пересобирает
результирующий файл.

Gallery (модуль MODX)

Создавайте альбомы, в которые загружайте любое количество изображений. Очень удобный интерфейс в админке и очень простой
сниппет вывода галереи на сайте. Есть возможность прикрепить к каждому документу на сайте свою галерею (см.
Управление альбомом галереи на странице
ресурса).

impArt (модуль MODX)

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

MIGX (модуль MODX)

Даёт возможность создавать в админке табличные ТВ-параметры с удобным интерфейсом добавления и редактирования строк.

modLastModified

Возвращает пользователям (и поисковикам) заголовки Last-Modified и Not modified. Благодаря этому поисковики смогут чаще
приходить на ваш сайт, чтобы проверить изменения — ведь нагрузка на их серверы будет меньше благодаря этим заголовкам.

phpThumbOn (сниппет)

Позволяет ресайзить картинки на сервере. Создает превьюшки, обрезает картинки, накладывает водяные знаки и пр.

simpleUpdater

Добавляет в раздел «Приложения» пункт «Обновить MODX», в котором вы можете провести апгрейд системы всего одной кнопкой.

CKEditor

Визуальный редактор для ресурсов в админке MODX. Аккуратная и симпатичная панель инструментов, чистый код.

Collections

Создаёт отдельный тип ресурса — коллекцию. Дочерние ресурсы коллекции не показываются в дереве, а отображаются на странице в виде удобной таблички.
Идеально для разделов новостей или блогов

Translit

Транслитерирует названия ресурсов, прежде чем установить в качестве псевдонима. Здесь локальная версия отличается от версии
в репозитории несколько другой таблицей транслитерации. Например, в официальной версии буква «Ц» будет преобразована в «cz»,
а в локальной версии — в «c».

VersionX (модуль MODX)

Создает локальные бекапы всех элементов — от чанков до ресурсов. Вы всегда сможете посмотреть старую версию и, если надо,
восстановить ее. Кроме того, можно узнать, кто именно внес те или иные изменения.

xPoller (модуль MODX)

Компонент для организации AJAX-опросов для вашего сайта

SiteHeart

Добавляет на сайт чат онлайн-поддержки от SiteHeart

MODX MinifyX — ускоряем сайт и уменьшаем нагрузку на сервер

Автор Алексей На чтение 3 мин. 954 Опубликовано Обновлено

Сегодня небольшой урок о том как минимизировать css и js файлы при помощи MinifyX, тем самым мы ускоряем сайт и уменьшаем нагрузку на сервере .

MinifyX можно установить как с основным так и с репозитория modstore (лучше с ним).

И так, у нас есть вот такой статический код:

в теге head у нас подключаются все стили:

 
<ссылка href = "/ assets / plugins / bootstrap / css / bootstrap.min.css "rel =" stylesheet "type =" text / css "/>



 

А в футере все скрипты

   

Вызываем сниппет

 [[MinifyX?
& minifyCss = `1`
& minifyJs = `1`
& registerJs = `по умолчанию`
& registerCss = `по умолчанию`
& jsSources = `
активы / плагины / jquery / jquery-2.1.4.min.js,
активы / js / scripts.js,
`
& cssSources = `
активы / плагины / bootstrap / css / bootstrap.min.css,
активы / css / essentials.css,
активы / css / layout.css,
активы / css / header-1.css,
                активы / css / color_scheme / green.css,
`
]] 

Тут мы подключили все стили и скрипты, осталось их вывести:

 [[+ MinifyX.css]]
[[+ MinifyX.javascript]] 

Вывод MinifyX при помощи Fenom

Если вы собираете сайт на шаблонизаторе Fenom, тогда вызов будет следующим.

 {'! MinifyX' | фрагмент: [
    'minifyCss' => 1,
    'minifyJs' => 1,
    'jsSources' => '
    активы / плагины / jquery / jquery-2.1.4.min.js,
    активы / js / scripts.js
    ',
    'cssSources' => '
    активы / плагины / bootstrap / css / bootstrap.min.css,
    активы / css / essentials.css,
    активы / css / layout.css,
    активы / css / header-1.css,
    активы / css / color_scheme / green.css
    '
]}
{$ _modx-> getPlaceholder ('MinifyX.css')}
{$ _modx-> getPlaceholder ('MinifyX.javascript')} 

Примечание. Я обычно использую вот такую ​​конструкцию с авторегистрацией стилей перед и скриптов перед

 [[MinifyX?
    & minifyCss = `1`
    & minifyJs = `1`
    & registerCss = `по умолчанию`
    & registerJs = `по умолчанию`
    & jsTpl = ``
    & jsSources = `
        активы / плагины / jquery / jquery-2.1.4.min.js,
        активы / js / scripts.js`
    & cssSources = `
        активы / плагины / bootstrap / css / bootstrap.min.css,
        активы / css / essentials.css,
        активы / css / layout.css,
        активы / css / color_scheme / green.css
    `
]] 

Здесь & jsTpl — шаблон для скомпилированного файла скриптов — указывать не обязательно. Обратите внимание на атрибут defer — отложенная загрузка, можно заменить к примеру на async — асинхронную загрузку или вообще уберите атрибут — в случае если у вас перестает работать js.

.

MinifyX MODX Revolution. Уменьшение нагрузки на сервер MODX

MinifyX — это сниппет, позволяющий комбинировать JS и CSS файлы для уменьшения нагрузки на сервер и оптимизации скорости загрузки.

MinifyX создан и поддерживается SCHERP Ontwikkeling

Системные требования

Для работы MinifyX требуется MODX® Revolution 2.2.0 или более новой версии.

История создания

Версия

Дата публикации

Автор

Изменения

1.0,0-PL1

26 марта 2012

Патрик Нийкамп (SCHERP Ontwikkeling)

Первый выпуск

1.1.0-PL

09 сентября 2012

Василий Наумкин

Уменьшен размер и переработан код.

Загрузка и установка

Установка производится с помощью менеджера пакетов MODX®.

MinifyX объединяет файлы в один кэш-файл и загружает их из себя. Если объединяете файлы CSS, нужно использовать абсолютные пути при использовании изображений или других URL-зависимых вызывающих, то же самое касается javascript. Некоторые фреймворки используют бутлоадеры (EXT), которые должны быть в директории до начала работы. Убедитесь в этой ловушки, это сэкономит много времени.

Размещение сниппета.

Разместите основной вызов сниппета [[MinifyX]] на странице.Размещенный сниппет позволяет ассоциировать страницу нижеприведенные плейсхолдеры:

Версия

Дата публикации

Автор

Изменения

26 марта 2012 г.

Патрик Нийкамп (SCHERP Ontwikkeling)

Первый выпуск

1.1.0-PL

09 сентября 2012

Василий Наумкин

Уменьшен размер и код переработчика.

Конфигурирование параметров

Настройка MinifyX может быть произведена с помощью следующих параметров:

Параметр

Описание

Значение

Значение по умолчанию

Необходимость

jsSources

Список (разделитель — запятая) URL к JS файлам из базы сайта.

Строковое значение, разделенное запятой

(пусто)

нет

cssSources

Список (разделитель — запятая) URL к CSS файлам из базы сайта.

Строковое значение, разделенное запятой

(пусто)

нет

minifyCss

Нужно ли уменьшить размер CSS или нет

0 = нет, 1 = да

0

нет

minifyJs

Нужно ли уменьшать размер JS или нет
(разрешено только для блока комментариев, экспериментальная опция! )

0 = нет, 1 = да

0

нет

кэш Папка

Основной URL с сайта к кэша файлов.

Строковое

активов / компонентов / minifyx / кеш /

нет

js Имя файла

Имя базы расположения js файла, без расширения

Строковое

скриптов

css Имя файла

Имя базы расположения css файла, без расширения

Строковое

стилей

Примеры

Ниже вы найдете описание основного вызова сниппета и расположения плейсхолдеров.Каждый параметр опционален, необязателен, мы просто использовали некоторые возможности для настройки.

 



[[MinifyX?
  & jsSources = `
     /assets/myframework.js,
     /assets/lightbox.js,
     / assets / script.js`
  & cssSources = `
     /assets/style1.css,
     / assets / style2.css`
]]

[[+ MinifyX.javascript]]

[[+ MinifyX.css]]


 

 

.

Вопросы по MinifyX / Русскоязычное сообщество MODX

Каждый раз прежде, когда пытался использовать это дополнение, натыкался на нерешимые преграды и отказывался, так и не исследовав всё до конца.
Но в текущий проект большой и требует серьёзной оптимизации — вот и пытаюсь последние 2 дня разобраться что откуда растёт.
Итак, у меня следующие вопросы по использованию MinifiX:

  1. Можно ли настроить уровень сжатия css? Хотелось бы получить минифицированный как-то код, а то получается файл из тысяч строк кода … А минифицировать в одну строчку рабочий файл стилей и подключить его минифицированным как-то неправильно — ведь потом с ним ещё работать…
  2. Обрабатывает уже сжатые файлы. Почему-то некоторые минифицированные мною файлы в одной строке с префиксом .min он всё равно разделяет на строки добавляя в общий файл стилей.
  3. минифицированные файлы некоторые обрабатывает. Закономерность такого поведения ещё не нашел.
  4. Иконки fontawesome из уикита при подключении через MinifyX иногда непонятно почему превращаются в иероглифы:
  5. Что делать с необработанными файлами? Хотя системная настройка minifyx_process_registered включены, у меня все равно не обрабатываются и подключаются в конец head и body следующие файлы:
      
    
    
    
    
    
    
    
    
      
  6. Повторяющиеся файлы. И те же скрипты подключаются отдельно? В примере из прошлого видно что скрипты jquery.form.min.js и jquery.jgrowl.min.js подключаются 4 раза на одной странице 3-мя разными компонентами!
  7. РЕШЕНО. Не подхватывает сырой код между тегами стиль и скрипты . Все мозги себе сломал, пока не понял, что обрабатывается только тот код в этих тегах, который регистрируется с помощью методов modX :: regClientScript, modX :: regClientCSS и т.п. Как-то неявно это было описано, а скорее всего, я не совсем понимал и зациклился на описании системных параметров minifyx_processRawJs и minifyx_processRawCss , где не упоминается что код должен быть зарегистрирован этими методами.
    У меня на сайте очень много js-кода разнесено по чанкам, т.к. там подставляются различные переменные системы. В результате удалось добавить эту проблему для каждого чата:

      {$ _modx-> regClientHTMLBlock ($ _ modx-> getChunk ('scripts.ajax'))}
    {$ _modx-> regClientHTMLBlock ($ _ modx-> getChunk ('scripts.modal'))}  

P.S. Понятное дело, что все системные параметры минификса включены, кроме обработки изображений (они мне не нужны)..

[MinifyX] Версия 1.3.0 — переписано всё / Расширения MODX / Блоги / bezumkin.ru

Хочу представить вам свежую бета-версию MinifyX, в которой я хотел добавить ровно одну функцию, и в итоге переписал всё заново.

Короткий список изменений:

  • Добавлен плагин для автосборки подключенных скриптов и стилей страницы, с предыдущей склейкой, минификацией и заменой оригиналов.
  • Так же плагин умеет обрабатывать изображения, если указана высота \ ширина или специальный атрибут.
  • Переписан основной класс
  • Переписан сниппет
  • Другой формат хранения готовых файлов

В общем, принцип работы тот же, а вот исполнение совсем другое.

Автосбор скриптов и стилей

В MODX существует широкая практика использования методов modX :: regClientScript, modX :: regClientCSS и т.п., которые подключают скрипты и стили на страницу во время работы каких-то сниппетов. Так работают miniShop2, Tickets, mSearch3, AjaxForm и еще много компонентов.

В итоге на странице может быть собрано довольно много дополнительных тегов, которые содержат по 50 строк и тормозить загрузку страницы. Автоматически собрать их нельзя, потому что в MODX нет событий на обработке этих подключений.
То есть, страница парсится — есть событие, страница готова — тоже есть, а вот между ними, когда теги встраиваются в контент страницы, событий нет.

Выходит, что нужно в настройках сниппетов отключить их скрипты и стили, и бережно добавленные в сниппет MinifyX, чтобы он их склеил и добавил на страницу.

Ну так вот, я решил обработать страницу после встраивания тегов. То есть, взять массивы с тегами, разобрать, обработать и заменить ими уже имеющийся контент.

Попутно можно собрать не только теги, но и «сырой» контент — это когда код пишется прямо в тегах скрипт или стиль, а не подключается в файле. В итоге у меня вышло так:

  • Было
  • Стало

Замыкающие файлы для загрузки мы еще и прячем пути к компоненту системы.Конечно, кому нужно — найдёт, но исходный код выглядит намного приятнее.

Итак, для включения этой обработки активируйте системный параметр minifyx_process_registered . Это позволит плагину собирать подключенные файлы, но он будет оставлять сырой код «как есть».
Для того, чтобы обработать его, есть еще 2 параметра: minifyx_processRawJs и minifyx_processRawCss .

Обратите внимание, что обрабатывается не весь код на странице, а только то, что зарегистрировано через методы MODX (отсюда и название настройки).То, что вы указали в шаблоне руками никто не трогает!

Для исключения файлов из обработки используется системная настройка minifyx_exclude_registered . В ней вы можете указать собственное регулярное выражение, которое по умолчанию не обрабатываются зарегистрированные сниппетом MinifyX c дефолтными настройками.

Остальные параметры, влияющие на работу со скриптами и стилями совпадают с таковыми у сниппета:
minifyx_cacheFolder — директория для хранения готовых файлов, которые браузер может закэшировать.
minifyx_cssFilename — базовое имя стилей, по умолчанию all.
minifyx_jsFilename — базовое имя скриптов, по умолчанию тоже все.
minifyx_minifyCss — включить или нет сжатие стилей. если да, к расширению файла добавится суффикс min.
minifyx_minifyJs — тоже самое для скриптов.

Если у вас что-то глючит — первым делом отключайте действие.

Обработка изображений

Как известно, с некоторого времени MinifyX использует дружит с Munee, а тот умеет работать не только со скриптами \ стилями, но и с изображениями.

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

Первым делом нужно включить системный параметр minifyx_process_images — это запустить обработку картинок, которые соответствуют следующим правилам:

  • Отновительный путь к файлу или абсолютный с текущим именем домена. То есть, файлы с чужих доменов нельзя.
  • У тега с картинкой есть атрибут Filters = «»
  • Или ширина
  • Или высота
  • Или сразу все 3 атрибута

На примере моего сайта:

  - не попадает в обработку
 - попадает, ширина 200, высота автоматическая
 - исчезает, высота 200, высота автоматическая
 - попадает, ширина 100, высота 85
 - не попадает в обработку
 

Для дополнительной гибкости обработки изображений есть еще 2 системные настройки:
minifyx_exclude_images — регулярное выражение для исключения произвольных изображений, даже если они подпадают под правила.По умолчанию исключаются картинки со словом большой палец в имени или размером 100х100.

minifyx_images_filters — фильтр картинок, по умолчанию. Он будет использовать, если у изображения нет программы filters = «».

MinifyX разбирает теги подходящих изображений, переправляет путь с картинки на коннектор Munee (по умолчанию он лежит в /assets/core/components/minifyx/munee.php) и к его другим параметрам.
Атрибут Filters = «» удаляется из тега — он нужен только для плагина.

Конечно, в исходном коде страницы будут длинные и некрасивые URL для картинок, но это небольшая плата за удобство.







 

Превращается в:







 

На картинке видно еще одну особенность обработки: если файла нет, то он будет заменён плейсхолдером с надписью MinifyX. Ну, это чтобы вы знали, что ссылка указана некорректная.

Идея не нова, для Revolution уже было несколько подобных плагинов.Наверное, моя версия особо ничем и не отличается, ну может местами сделано получше, но основной мотив — «Это уже есть в Munee, нужно только задействовать!».

Так и сделал. Понятно, вы можете указать такие пути к файлам сразу, без атрибутов и плагина.

Работа с кэшем

От собственного кэша я таки решил отказаться, потому что Munee и так уже всё кэширует: и скрипты, и стили, и картинки, и даже плейсхолдеры для несуществующих изображения.

Предыдщий формат файлов использовал формат

 базовоеимя_времясоздания.суффикс.расширение 

И вот с этим временем создания бывали заморочки.

Мне уже предлагали заменить время на хэш, но длинные файлы меня не устраивали, пока я не придумал их просто сокращать.

Ну в самом деле, какова вероятность, что у вас на сайте сгенерируются два файла со скриптами, у которых будут совпадать 10 первых символов хэша по алгоритму sha1?

А значит хранить длиннющие файлы не нужно, и мы получаем вот такие:

  

Заодно отказался и от удаления старых файлов — были жалобы.

Очистку старых файлов я добавил в тот же плагин, и повешал на событие общего обновления сайта в админке.

Но есть ньюанс: я не знаю, в какую директорию можно сохранить файлы сниппетом, поэтому удаляю старые файлы только в директории, в системной настройке minifyx_cacheFolder .

Это значит, что если вы хотите, чтобы всё аккуратно очищалось — сниппет должен хранить файлы там же, где и плагин.

Значит, убираем у всех сниетов MinifyX указание & cacheFolder, указываем нужную директорию в minifyx_cacheFolder и весь кэш MinifyX удаляется прямо в админке, вместе с остальным кэшем сайта.

Заключение

Ну вот, вроде всё рассказал.

Как видите, изменений очень много, поэтому версия бета . Конечно, я её уже довольно неплохо протестировал, и сейчас мой сайт работает на ней, но всё же.

Еще раз напоминаю, что при каких-либо искажениях скриптов или стилей, первым делом отключайте напряжение. Также можно указывать исходному файлу суффикс .min — тогда Munee его пропустит как есть.

Ах да, еще можно комментировать файлы, приставляя к ним дефис, как у тегов MODX:

[[! MinifyX?
& cssSources = `
/assets/components/themebootstrap/css/bootstrap.min.css,
- / активы / компоненты / themebootstrap / css / add.css
`
]]
 

Файл add.css не будет обработан.

Обновляемся, пишем отзывы!
Мне очень интересно ваше мнение после двух дней бесперерывной работы.

Добавление новых комментариев отключено.

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *