Форумы / National / Russian / Скины и дизайн / MyTheme.rc.php Resources

Правильное и упорядоченное подключение JavaScript CSS

webitproff
#1 27.05.2023 15:04

Уже не помню откуда "подцепил",

но сколько себя помню,

в MyTheme.rc.php загрузку JavaScript и CSS подключал таким образом

<!-- HEADER_HEAD -->
cot_rc_add_file($cfg['themes_dir'].'/'.$cfg['defaulttheme'].'/bootstrap/css/bootstrap.min.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$cfg['defaulttheme'].'/css/some-style.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$cfg['defaulttheme'].'/css/my-style.css');

<!-- FOOTER_RC -->
cot_rc_link_footer($cfg['themes_dir'].'/'.$cfg['defaulttheme'].'/bootstrap/js/bootstrap.bundle.min.js');
cot_rc_link_footer($cfg['themes_dir'].'/'.$cfg['defaulttheme'].'/js/some-js.js');
cot_rc_link_footer($cfg['themes_dir'].'/'.$cfg['defaulttheme'].'/js/my-js.js');

 

то есть при помощи cot_rc_add_file  и cot_rc_link_footer  я задавал порядок

что будет и в какой последовательности в HEADER_HEAD и соответственно в FOOTER_RC

но например, в скинах из коробки, я вижу что как бы всё в кучу, и всё уходит в HEADER_HEAD

Resources::addFile($cfg['themes_dir'].'/'.$usr['theme'].'/css/reset.css');
Resources::addFile($cfg['themes_dir'].'/'.$usr['theme'].'/css/extras.css');
Resources::addFile($cfg['themes_dir'].'/'.$usr['theme'].'/css/default.css');
Resources::addFile($cfg['themes_dir'].'/'.$usr['theme'].'/css/modalbox.css');
Resources::addFile($cfg['themes_dir'].'/'.$usr['theme'].'/js/js.js');

то есть и JavaScript и CSS всё вместе и в header.tpl

а мне нужно разделить и упорядочить последовательность.

Правильно ли будет подключить по примеру ниже:

<!-- HEADER_HEAD -->
Resources::addFile(Cot::$cfg['themes_dir'].'/'.Cot::$cfg['defaulttheme'].'/bootstrap/css/bootstrap.min.css');
Resources::addFile(Cot::$cfg['themes_dir'].'/'.Cot::$cfg['defaulttheme'].'/css/some-style.css');
Resources::addFile(Cot::$cfg['themes_dir'].'/'.Cot::$cfg['defaulttheme'].'/css/my-style.css');

<!-- FOOTER_RC -->
Resources::linkFileFooter(Cot::$cfg['themes_dir'].'/'.Cot::$cfg['defaulttheme'].'/bootstrap/js/bootstrap.bundle.min.js');
Resources::linkFileFooter(Cot::$cfg['themes_dir'].'/'.Cot::$cfg['defaulttheme'].'/js/some-js.js');
Resources::linkFileFooter(Cot::$cfg['themes_dir'].'/'.Cot::$cfg['defaulttheme'].'/js/my-js.js');

или лучше прописывать подключение JavaScript файлов именно уже в footer.tpl ?

аккаунт удален - не срослось с разработчиками
ушел на другой движок
Edward
#2 28.05.2023 19:21

Делаю в футер, чтобы не тормозить загрузку страницы скрпитами.

Однако ваш варинант "по примеру ниже" вполне рабочий.

Более того, можно порядок подклбючения указать для скриптов и стилей. А впоследних апдейтах наконец-то запили доп. параметры (async, defer - например)

Resources::linkFileFooter('//www.google.com/recaptcha/api.js?hl=ru&nofonts=true&render='.$cfg['plugin']['grecaptcha']['sitekey'], 'js', 30, 'async');

 

Я встретил только 1 нюанс.

Некоторые плагины требуют инициализации Jquery как можно раньше, поэтому его лучше в heder вынести. По крайней мере для залогиненных.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
webitproff
#3 29.05.2023 08:25
#46698 Edward:

Некоторые плагины требуют инициализации Jquery как можно раньше, поэтому его лучше в heder вынести. По крайней мере для залогиненных.

Как раз от него стараюсь всячески отойти в сторону.

по крайней мере на стороне фронтэнда.

Понимаю, что без него теряются, якобы преимущества Ajax, на что много полярных взглядов.

Но современные JavaScript and CSS фреймворки как Bootstrap5 и UIkit3 решают львиную долю вопросов, позволяющих отказаться от JQuery, если не полностью, то подключать исключительно в конкретных локациях фронтэнда, - как пример при добавлении или редактировании статьи.

аккаунт удален - не срослось с разработчиками
ушел на другой движок
Kopusha
#4 31.05.2023 07:39

по моему мнению стоит разделять css + js только по тому это зареганный юзер или нет, подключение отдельного js на отдельной стр (например jquery только для редактирования) не только не помогает но и мешает. Корректный подход это минимизирования js+css, и его кеширование целиком для зареганного юзера, который постоянно пользуется сайтом. загнал в кеш один - два файла и все. Пусть и больших. Для незареганных - просто сделать это на минималках.

webitproff
#5 31.05.2023 07:55
#46760 Kopusha:

по моему мнению стоит разделять css + js только по тому это зареганный юзер или нет, подключение отдельного js на отдельной стр (например jquery только для редактирования) не только не помогает но и мешает. Корректный подход это минимизирования js+css, и его кеширование целиком для зареганного юзера, который постоянно пользуется сайтом. загнал в кеш один - два файла и все. Пусть и больших. Для незареганных - просто сделать это на минималках.

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

аккаунт удален - не срослось с разработчиками
ушел на другой движок
Kopusha
#6 31.05.2023 10:04

По группам - да. Но смысл по локациям - скорее хуже будет, так как 

1. один раз загрузил все, дальше - кеш. Желательно который можно принудительно обновить у всех.

2. Грузим что то. На другой странице - почти то же самое снова. И все это разными потоками. Интернет летает уже всюду, я в автодом думаю про старлинк.