Сегодня небольшой урок о том как минимизировать css и js файлы при помощи MinifyX, тем самым мы ускоряем сайт и уменьшаем нагрузки на сервер.
MinifyX можно установить как с основного так и с репозитория modstore (лучше с него).
И так, у нас есть вот такой статический код:
в теге head у нас подключаются все стили:
<!-- CORE CSS --> <link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="/assets/css/essentials.css" rel="stylesheet" type="text/css" /> <link href="/assets/css/layout.css" rel="stylesheet" type="text/css" /> <link href="/assets/css/header-1.css" rel="stylesheet" type="text/css" /> <link href="/assets/css/color_scheme/green.css" rel="stylesheet" type="text/css" />
А в футере все скрипты
<script type="text/javascript" src="/assets/plugins/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="/assets/js/scripts.js"></script>
Вызываем сниппет
[[MinifyX? &minifyCss=`1` &minifyJs=`1` ®isterJs=`default` ®isterCss=`default` &jsSources=` assets/plugins/jquery/jquery-2.1.4.min.js, assets/js/scripts.js, ` &cssSources=` assets/plugins/bootstrap/css/bootstrap.min.css, assets/css/essentials.css, assets/css/layout.css, assets/css/header-1.css, assets/css/color_scheme/green.css, ` ]]
Тут мы подключили все стили и скрипты, осталось их вывести:
[[+MinifyX.css]] [[+MinifyX.javascript]]
Вывод MinifyX при помощи Fenom
Если вы собираете сайта на шаблонизаторе Fenom, тогда вызов будет следующим.
{'!MinifyX' | snippet : [ 'minifyCss' => 1, 'minifyJs' => 1, 'jsSources' => ' assets/plugins/jquery/jquery-2.1.4.min.js, assets/js/scripts.js ', 'cssSources' => ' assets/plugins/bootstrap/css/bootstrap.min.css, assets/css/essentials.css, assets/css/layout.css, assets/css/header-1.css, assets/css/color_scheme/green.css ' ]} {$_modx->getPlaceholder('MinifyX.css')} {$_modx->getPlaceholder('MinifyX.javascript')}
Примечание. Я обычно использую вот такую конструкцию с авторегистрацией стилей перед </head> и скриптов перед </body>
[[MinifyX? &minifyCss=`1` &minifyJs=`1` ®isterCss=`default` ®isterJs=`default` &jsTpl=`<script defer src="[[+file]]"></script>` &jsSources=` assets/plugins/jquery/jquery-2.1.4.min.js, assets/js/scripts.js` &cssSources=` assets/plugins/bootstrap/css/bootstrap.min.css, assets/css/essentials.css, assets/css/layout.css, assets/css/color_scheme/green.css ` ]]
Здесь &jsTpl — шаблон для скомпилированного файла скриптов — указывать не обязательно. Обратите внимание на атрибут defer — отложенная загрузка, можно заменить к примеру на async — асинхронную загрузку или вообще уберите атрибут — в случае если у вас перестает работать js.
На modstore предупреждение: Библиотека Munee давно не развивается, так что использование дополнения на современных сайтах не рекомендуется. Да и сам компонент не обновлялся 4 года как.
Стоит ли его в 23 году использовать?
Еще вопрос, как можно скомпилировать настроенные scss файлы от bootstrap 5 на хостинге? пробовал специальный компонент SCSS из modstore, но он не понимает переменные и обрабатывает все достаточно долго.
Дополнение не перестало выполнять своих функций и работает. А пользоваться им или нет решать вам, я пользуюсь на многих проектах.
Здравствуйте, подскажите есть ли возможность вывести стили прям в тело документа?
Здравствуйте. Да, для этого есть хук cssToPage — &hooks=`cssToPage`. Но я бы не стал код css в тело выводить, если думаете что скорость по гуглу взлетит — ошибаетесь, даже если повысится на пару пунктов, то появится другая проблема — у вас соотношения числа контента к количеству кода резко упадет (что тоже не есть хорошо)!