Подключаем только необходимые скрипты и стили

Когда-то давным-давно CSS и JavaScript-код размещались прямо в HTML-коде. После, когда их стало много — в отдельном файле… в одном отдельном файле. Прошло время, и файлов стало тоже много, прям очень… Много файлов — много запросов к серверу, что плохо… решили объединять их в один, опять проблема — этот файл мало того, что просто огромный по объёму и долго загружается, так ещё он долго и тяжело интерпретируется браузером. При чём, загружается он один раз (на каждом сайте), а интерпретируется на каждой странице. Умные люди задумались, как же уменьшить нагрузку… и придумали, ура! Надо на каждой странице загружать только те файлы с CSS и JavaScript, которые необходимы именно на этой странице.

Как же нам это сделать в Неткэте

Страница сайта на Netcat CMS состоит из компонентов, у каждого из них могут быть необходимые для его работы JavaScript-файлы и для визуальной «красоты» — CSS. Вот их мы и будем подключать в макет дизайна по необходимости. Тем самым уменьшая общий объём стилей и скриптов, которые браузер пользователя будет интерпретировать на каждом хите.

В компоненте, в поле «системные настройки» пишем код:

$thisComponentPath = str_replace(array($DOCUMENT_ROOT, 'Settings.html'), '', __FILE__);
//echo $thisComponentPath;
$GLOBALS["css"][] = $thisComponentPath."styles.css";
$GLOBALS["js"][] = $thisComponentPath."script.js";

В соответствующую папку размещаем файлы стилей и скриптов. Если вы пока не очень хорошо ориентируетесь по файловой системе Неткэта, можете раскомментировать строку с echo, и в публичной части увидите путь к требуемой папке, куда разместить файлы стилей и скриптов, после чего, закомментируйте строку обратно!

В макете дизайна размещаем такой код:

<?=( count($GLOBALS['css']) > 0 ? '<link href="'.nc_minify_file(array_unique($GLOBALS['css']), 'css')[0].'" rel="stylesheet">' : NULL )?>
<?=( count($GLOBALS['js']) > 0 ? '<script src="'.nc_minify_file(array_unique($GLOBALS['js']), 'js')[0].'"></script>' : NULL )?>

В первом включении из глобального массива берём адреса файлов стилей (предварительно уникализировав массив — на одной странице может быть несколько включений одного компонента), минифицируем их, объединяем в один файл и вставляем на страцину HTML-код подключения стилей. Во втором включении то же самое делам с файлами скриптов. Его рекомендуется делать внизу страницы, перед закрывающим тэгом body.