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

Сегодня небольшой урок о том как минимизировать 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`
	&registerJs=`default`
	&registerCss=`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`
    &registerCss=`default`
    &registerJs=`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.