Foren / National / Russian / Модули и плагины / Выборочная загрузка ресурсов CSS и JS

...или ускоряем загрузку страниц.

Macik
#24382 30. April 2010, 07:46

Team
Thanked: 181 mal

Чтобы проще и глубже вникнуть в суть проблемы - зайдите на главную страницу cotonti.com и нажмите "Ctrl-U" (или иную комбинацию, которая позволит просмотреть исходный код страницы).
Смотрим секцию <head></head>. Ничего не смущает? Лично меня тут смущает и напрягает куча не нужных (особенно на главной) скриптов и загрузок.

Давайте глянем:
skins/sed-light/sed-light.css
js/jquery.js
js/base.js
./plugins/chili/js/jquery.chili.js
./plugins/chili/js/jquery.chili.toolbar.js
./plugins/chili/lang/jquery.chili.toolbar.ru.lang.js
./plugins/chili/skins/jquery.chili.toolbar.css

<script type="text/javascript" > 
//<![CDATA[
  [тут вырезана настройка Чили]
//]]>

./plugins/tpltags/style.css
./plugins/slimbox/css/slimbox2.css
./plugins/slimbox/js/slimbox2.js
./plugins/slimbox/js/jquery.jScale.js
	<script type="text/javascript"> 
	//<![CDATA[
  [тут вырезана настройка СлимБокс]
	//]]>
	</script> 
./plugins/tags/style.css

На главной (в зависимости от ваших задач) необходимо только:
skins/sed-light/sed-light.css - однозначно нужен
js/jquery.js - в принципе нужен, особенно если на главной используются какие-либо дополнит. JQuery плагины
js/base.js - 7 кб разнообразных специфических функций, возможно для главной можно и удалить
./plugins/tags/style.css - надо, т.к. Тэги используются практически повсеместно (хотя в таком случае резонно перенести в основной файл).
SlimBox и его скрипты - удалил, т.к. в данном случае на главной он похоже не используется.
Итого из ~ 30 строк кода нам реально нужна (для данной страницы) загрузка 4-5 файлов.
А теперь представьте, что какой-нибудь плагин использует еще 2-3 файла JS/CSS и это тоже оказывается в шапке главной страницы.

Резюмируя: описания в заголовке страницы сильно избыточны и должны меняться в зависимости от загружаемой страницы.

У кого какие мысли?

Я частично вышел из положения таким образом:

1. Подредактировал плагины Chili и markitup так, чтобы они загружались только на необходимых мне страницах - для меня это:
chili - только на pages.php
markitup - pages.php и forums.php
(делается это правкой файлов *.header.php для каждого из плагинов)

2. Написал небольшой плагин автозагрузчик ресурсов для собственных плагинов.
Работает следующим образом: плагин цепляется на header.main с Order=13 (чтобы выполнялся после остальных плагинов) и обрабатывает специальный подготовленный массив, в котором указаны какие файлы надо грузить и на каких страницах и по каким условиям.
Как формируется этот массив? Да очень просто - для нужного плагина создается *.header.php,
Цепляем header.main с Order=10 (обычно его и ставят). Далее в нем пишем примерно такой код (специально разнообразил вариантами):

$plug_name = 'slideshow'; // имя текущего подопытного плагина
if ($e==$plug_name) { // чтобы загрузка файла сработала только для этого плагина
  $header_loads[] = array(
    'file' => "./js/jquery.timers.js",
    'type' => 'JS'
  );
}

  // загрузка сработает для стороннего плагина
  $header_loads[] = array(
    'part' => 'plug' 
    'code' => 'contactus', // сработает в плагине 'contactus'
    'file' => "./js/jquery.slider.js",
    'type' => 'JS'
  );

  // загрузка файла произойдет только в админке в разделе Утилиты IP Search
  $header_loads[] = array(
    'part' => 'tools' 
    'code' => 'ipsearch', // сработает в соотв. плагине 
    'file' => "./js/jquery.slider.js",
    'type' => 'JS'
  );
  
  // Указанный файл будет подгружаться на всех страницах
  $header_loads[] = array(
    'part' => 'all' 
    'code' => '',
    'file' => "./js/wonderfull.css",
    'type' => 'CSS'
  );

  // Указанный файл будет подгружаться на странице с альясом "howto"
  $header_loads[] = array(
    'part' => 'param' 
    'code' => 'al=howto',
    'file' => "./js/wonderfull.css",
    'type' => 'CSS'
  );

  // загрузка файла произойдет на всех страницах сайта, кроме тех, когда определены перечисленные константы
  $header_loads[] = array(
    'part' => '!def' 
    'code' => 'SED_PLUG,SED_INDEX,SED_PFS,SED_POLLS,SED_USERS', // не грузимся в плагинах,главной,ПФС и т.д.
    'file' => "./plugins/chili/js/jquery.chili.js",
    'type' => 'JS'
  );

В идеале - на любой странице сайта у нас загружаются только те ресурсы (JS/CSS), которые необходимы именно для этой страницы.

Вот как-то так. Надеюсь не очень сумбурно.
Если будет интерес могу поделиться плагином.
https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F