Версионность js и css

Часто вижу проблему, что разработчики допускают кеширование браузерами устаревших стилей css и скриптов js. Это всплывает, если разметка обновилась, а стили или скрипты подгрузились старые. Получается что верстка "едет". При этом у разработчиков все хорошо отображается из-за локальных настроек. При этом горе-разработчики рекомендуют всем проверяющим нажимать CTRL+R и CTRL+F5 для того чтобы обновить закешированное содержимое. А вот простые пользователи, которые возвращаются на сайт, видят черти что.

Решить данную проблему очень просто, нужно к пути до скрипта дописывать гет параметром версию файла, например:


//обычное подключение скриптов
<script src="/js/main.js"></script>
//подключение скрипта с учетом версии
<script src="/js/main.js?123456789"></script>

Что дает битрикс?

Битрикс при правильном подключении стилей и скриптов дописывает к пути до файла время обновления файла+размер файла:


<link href="/bitrix/cache/css/s1/main/kernel_main/kernel_main.css?14356674393041" type="text/css" rel="stylesheet">

Как правильно подключать свои файлы js и css?

Добавления стилей и скриптов в <head></head>

Чтобы битрикс выводил вместе со своими стилями и скриптами ваши, их нужно добавлять следующим образом:


$APPLICATION->SetAdditionalCSS('/assets/css/bootstrap-select.css');
$APPLICATION->SetAdditionalCSS('/assets/css/style.css');
		
$APPLICATION->AddHeadScript('/assets/js/jquery-1.11.2.min.js');
$APPLICATION->AddHeadScript('/assets/js/bootstrap.min.js');

Этот код нужно писать в некешируемой области сайта, например в шаблоне. Если требуется подключать свои стили/скрипты из компонентов, то нужно использовать файл component_epilog.php

Тогда код подключения ваших стилей/скриптов будет генерироваться вместе со стандартными с помощью функции:


$APPLICATION->ShowHead();

При таком подключении ваши стили/скрипты будут участвовать в стандартном объединении и сжатии, на ряду со стандартными. Эта опция включается в настройках главного модуля.

А если нужно подключать скрипты в самом конце страницы, в footer?

Считается, что для более быстрого отображения сайта браузером, тяжелые скрипты и даже не определяющие файлы стилей нужно подключать в самом конце страницы. Об этом пишет, например, валидатор гугла. Теоретически это конечно верно. А вот какой будет толк на практике, вопрос спорный. Тем более, что сами сайты гугла не подходят под свои же требования.

Если не отвлекаться, то в шаблоне сайта, в файле footer.php нужно вместо непосредственно пути до стилей скриптов писать следующее:


<script src="<?= CUtil::GetAdditionalFileURL('/js/jquery.min.js', true); ?>"></script>

Этот код подставит к пути до файла время обновления + размер.

Комментарии:

Bogan87

10.08.2016 13:59:43

use Bitrix\Main\Page\Asset;

Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/fix.js");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/styles/fix.css");
Asset::getInstance()->addString("
<li nk href='http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic' rel='stylesheet'
type='text/css'>
");

Оставить комментарий:

Представьтесь пожалуйста:
Электронная почта:
Электронный адрес не публикуются
Текст сообщения:
Для подсветки кода, оборачивайте ваш код в теги <code></code>
Введите 5 цифр с картинки:

Рекомендую:

Поддержать проект:

бесполезная кнопка, которую еще никто не нажал:)
Нажали! Кнопку нажали уже 7 человек!!! Спасибо, очень мотивирует!