Метод пактной загрузки стилей и скриптов. Долой лишний код!

Итак, вопрос: а нужны ли пачки строк в шапке вида "<script src="…" type="text/javascript"></script><style type="text/css" media="screen">@import url(‘…’);</style>" и так далее. с увеличением "фишечек" количество их заставляет задуматься – а оно того стоит? у мну когда одни мета-поля стали вырастать более чем за 70 строк (включая php условия) – задумался..
Ведь можно сделать проще – отдавать браузеру весть кантент одним потоком – увеличим скорость загрузки страницы, и добьемся поставленной цели – избавимся от лишнего кода. Формат запроса будет: скрипт.php?режим;файлы, остается лищь сформировать вызов к скрипту и собственно его самого наколбасить.
Плавно переходим к кодингу. В functions.php добавляем:

define('INFINE_FILES_LOADER',   'metaloader.php'); // загрузчик файлов, юзаемый для скриптов и ксс
function infine_include_file($filename) { # эту функцию юзаю и для других целей
  if(file_exists($filename)) include_once($filename);
}
infine_include_file(TEMPLATEPATH.'/'.INFINE_FILES_LOADER);

в корень темы аккуратно ложим файл metaloader.php, со следующим содержанием:

<?php

define('INFINE_METALOAD_BRCHAR',  ';');

function infine_load_files($mode = 'css', $files = '', $echo = false, $printBefore = '') {
  if($files !== '' && is_array($files)) {
    switch ($mode) {
      case 'css':
        $prefix = "<style type=\"text/css\" media=\"screen\">@import url('";
        $postfix = "');</style>\n";
        break;
      case 'js':
        $prefix = "<script src=\"";
        $postfix = "\" type=\"text/javascript\"></script>\n";
        break;
    }
    $request = get_bloginfo('template_url').'/'.INFINE_FILES_LOADER;
    $request .= "?$mode".INFINE_METALOAD_BRCHAR;
    $files = array_unique($files);
    for ($i = 0; $i < count($files); $i++) {
      $request .= $files[$i];
      if($i != count($files)-1)
        $request .= INFINE_METALOAD_BRCHAR;
    };
    $request = $printBefore.$prefix.$request.$postfix;
    if($echo){
      print $request;
    } else {
      return $request;
    }
  }
}

$request = $_SERVER['QUERY_STRING'];

if(isset($request)) {
  static $contentType, $charset;
  $files = array();
  $i = 0;
  $charset = 'UTF-8';

  # выполняем проверку
  $request_files = str_ireplace("..", "", $request);

  # из запроса формируем массив с именами файлов
  $f = strtok($request_files, INFINE_METALOAD_BRCHAR);
  while ($f) {
    $files[$i] = $f;
    $f = strtok(INFINE_METALOAD_BRCHAR);
    $i++;
  }

  $request_mode = array_shift($files);

  foreach($files as $file) {
    #print "/* filename: ".$file." */\n";
    $content .= @file_get_contents($file);
  }

  $content = str_replace(array("  ", "\n", "\r\r"), "", $content); # more compress, but js maybe not work
  //$content = preg_replace("/\/\*+.*?\*\/+/", "", $content); # вырезаем комментарии между /* */

  switch ($request_mode) {
    case 'css':
      $contentType = "text/css";
      break;
    case 'js':
      $contentType = "text/javascript";
      break;
    break;
  }
  ob_start("ob_gzhandler");
  header("Content-type: $contentType; charset: $charset");
  header("Cache-Control: must-revalidate");
  header("Expires: ".gmdate("D, d M Y H:i:s",time() + 3600 /* 60*60 */) . " GMT");
  print $content;
}

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

<?php
$cssfiles = array(); #массив с путями к css-файлам
$js_files = array(); #массив с путями к скриптам
?>

м теперь заменяем цель нашей работы – все вызовы к стилям и скриптам заменяем соответственно:

array_push($cssfiles, get_bloginfo('template_url').'/mozilla.css'); /* CSS */
array_push($js_files, get_bloginfo('template_url').'/swfobject.js'); /* JS */

последний шаг: пора вывести сформированный запрос:

<?php infine_load_files('js', $js_files, true); ?>
<?php infine_load_files('css', $cssfiles, true); ?>

вот вроде и всё. теперь на выходе получим не

<script src="http://www.your-site.com/wp-content/themes/theme/js/script1.js" type="text/javascript">
<script src="http://www.your-site.com/wp-content/themes/theme/js/script2.js" type="text/javascript">
<script src="http://www.your-site.com/wp-content/themes/theme/js/script3.js" type="text/javascript">
<script src="http://www.your-site.com/wp-content/themes/theme/js/script4.js" type="text/javascript">

а

<script src="http://www.your-site.com/wp-content/themes/theme/metaloader.php?js;http://www.your-site.com/wp-content/themes/theme/js/script1.js;http://www.your-site.com/wp-content/themes/theme/js/script2.js;http://www.your-site.com/wp-content/themes/theme/js/script3.js;http://www.your-site.com/wp-content/themes/theme/js/script4.js" type="text/javascript">

из кода будут вырезаны комментарии /* … */, лишние пробелы, лишние переносы строк (повторяющиеся). Проверено, работает без проблем. таким методом подрезал на скриптах ещё порядка 8..12% от общей массы

upd. обновил скрипт. теперь работает как надо
upd. обновил metaloader.php – теперь он ещё и gz-ом жмет. экономим ещё порядка 30-40%

ps. нечто подобное уже встречал в сети, но на момент написания не нашел.

Anonymous
Отправить
Ответ на: