Перед погружением в тему сначала разберемся почему не рекомендуется подключать файлы "по-старинке" прописывая link или script аттрибуты.
Если же вы искушенный front-end разработчик и у вас в наборе инструментов уже имеются утилиты объединения/сжатия, не думаю что эта статья будет вам интересна. рагмент документации по использованию Asset'овтруктура расширения. К слову bundle, dist и config.js не так уж и обязательны.
Современный браузер достаточно умный и чтобы не потратить лишние ресурсы (а иногда и деньги за трафик) пользователя умеет кешировать статический контент, о чем многие нерадивые веб-разработчики постоянно забывают, рождая эффект "а у меня все работает". Конечно Битрикс не исключение и чтобы снять с пользователя эту нагрузку разработали собственные инструменты подключения.
В чем же их преимущества?
- Битрикс сам следит за обновлением файлов. К каждому подключенному файлу подключается временная метка и при обновлении файла битрикс сам внесет изменения и файл не закешируется в браузере пользователя. Таким образом проблема отображения старых файлов и необходимость добавлять вручную включь или всякие ?v=1 к имени файла решается сама собой.
- Битрикс умеет объединять в один файл, при соответствующей настройке. Таким образом, если в главном модуле включена опция "Объединять js и css файлы", то файлы подключенные через системные методы будут объединены в один и пользователю уйдут на скачивание как один файл с разделителями, а учитывая пункт выше - за обновлением этого файла будет следить битрикс и вам не нужно будет помнить что и где обновилось.
В новом ядре подключение внешних файлов устроено через singletone класс Asset (\Bitrix\Main\Page\Asset). Для удобства я покажу пример вызова:
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/additional.css");
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/additional.js");
Asset::getInstance()->addString("<link rel='shortcut icon' href='".SITE_TEMPLATE_PATH."/images/favicon.ico' />");
Почему лучше использовать Asset вместо старых и давно привычных AddHeadScript и SetAdditionalCss? Дело в том, что они внутри делают тот же вызов метода Asset, так что использование старых методов избыточно.
С asset разобрались, а что за extension?
С увеличением сложности или объема веб-сайта вы будете сталкиваться с проблемой роста числа js/css файлов. С каким проблемами вы можете столкнуться?
- Файлы css/js будут слишком большого размера. Вам будет сложно в них ориентироваться и править. Вы будете пытаться разбить все на отдельные составляющие.
- Ресурсов станет слишком много и вы будете забывать подключать стили или скрипты. Станет сложно работать с зависимостями и появится дублирование кода и/или стилей.
Для решения этой проблемы битрикс придумал extensions (расширения), которые доступы вместе с модулем ui.
Расширение (экстеншн, extension) — способ организации JS и CSS кода в продуктах 1С-Битрикс: Управление Сайтом и Битрикс24.
Тема расширений очень подробно расписана в документации по продукту и не смотря на то, что материал доступен аж с февраля 2017 года, многие разработчики по-прежнему брезгуют их использовать (а зря).
В своих проектах мы пользуемся именно расширениями, т.к. это решает сразу большинство проблем с обновлением стилей.
P.S. К слову сказать, если все же хотите продолжить использовать нативное подключение через link или script в этом вам поможет системный метод CUtil::GetAdditionalFileURL
<link href="<?=CUtil::GetAdditionalFileURL('/bitrix/templates/new/some.css');?>" type="text/css" rel="stylesheet" / >
