Подключение файлов js и css

Посмотрим, как правильно подключать дополнительные файлы стилей и скрипты в шаблон сайта, чтобы корректно работала настройка сжатия файлов js и css Настройки -> Настройки модулей -> Главный модуль:

Прямое подключение дополнительных файлов не рекомендуется:

<script type="text/javascript" src="/js/script.js"></script>

Для правильного подключения есть методы:

1. $APPLICATION->SetAdditionalCSS() для добавления файлов стилей
2. $APPLICATION->AddHeadScript() для добавления скриптов
3. $APPLICATION->SetHeadString() для добавления произвольных строк

$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . '/css/style.css');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/js/script.js');
$APPLICATION->SetHeadString('
');

С появлением ядра D7 добавились методы:

1. \Bitrix\Main\Page\Asset::addCss() для добавления файлов стилей
2. \Bitrix\Main\Page\Asset::addJs() для добавления скриптов
3. \Bitrix\Main\Page\Asset::addString() для добавления произвольных строк

use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/style.css');
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/script.js');
Asset::getInstance()->addString('');

Записи равнозначные, можно использовать и запись без обращения к ядру D7 и с обращением.

// подключение служебной части пролога
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php');

Подключение js и css в шаблоне компонента

Для правильного подключения дополнительных файлов, подключаем их из шаблона компонента, а не прописываем в шаблон сайта:

$this->addExternalJS('/local/js/script.js');
$this->addExternalCss('/local/css/style.css');