Несколько файлов javascript/css: рекомендации?

Вот что я делаю: я использую до двух файлов JavaScript и, как правило, один файл CSS для каждой страницы. Я выясняю, какие файлы JS будут общими для всех моих страниц (или их будет достаточно, чтобы они были близки - файл, содержащий jQuery, был бы хорошим кандидатом), а затем я объединяю их и уменьшаю с помощью jsmin-php, а затем кэширую объединенный файл. Если остались какие-либо файлы JS, относящиеся только к этой странице, я объединяю, уменьшаю и кэширую их в один файл тоже. Первый файл JS будет вызываться на нескольких страницах, второй - только на этой или, может быть, на нескольких.

Вы можете использовать ту же концепцию с CSS, если хотите, с css-min, хотя я обнаружил, что обычно использую только один файл для CSS. Еще одна вещь, когда я создаю файл кэша, я вставляю небольшой PHP-код в начало файла, чтобы использовать его в качестве сжатого файла, в котором вы в любом случае получите большую часть своих сбережений. Вы также захотите установить заголовок истечения срока действия так что у браузера пользователя также будет больше шансов кэшировать файл. Я полагаю, что вы также можете включить GZipping через Apache.

Для кэширования я проверяю, не превышает ли время создания файла заданное мной время. Если это так, я воссоздаю файл кэша и обслуживаю его, в противном случае я просто получаю существующий кэшированный файл.

Вы явно не сказали, что у вас есть доступ к серверному решению, но, предполагая, что у вас есть, я всегда использовал метод, включающий использование PHP для выполнения следующих действий:

Jquery.js.php :

<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file)
 {
echo file_get_contents('jquery.' . $file . '.js');
 }
?>

С приведенным выше фрагментом я затем вызываю файл так же, как обычно:

<script type="text/javascript" src="jquery.js.php"></script>

И затем, если я когда-нибудь узнаю о точной функциональности, которая мне понадобится, я просто передам свои требования в виде строки запроса (jquery.js.php?r=ядро, эффекты). Я сделайте то же самое для моих требований CSS, если они когда-либо будут такими же разветвленными.

Я бы не рекомендовал использовать решение на основе javascript (например, PHP Minify) для включения вашего css, так как ваша страница станет непригодной для использования, если у посетителя отключен javascript.

Идея сокращения и объединения файлов великолепна.

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

if (evironment == production) {
  echo "<style>@import(/Styles/Combined.css);</style>"
} else {
  echo "<style>@import(/Styles/File1.css);</style>"
  echo "<style>@import(/Styles/File2.css);</style>"
}

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

Обязательно рассмотрите возможность включения вашего js внизу и css вверху в соответствии с рекомендациями YUI, так как сохранение JS на низком уровне оказывает ощутимое влияние на внешний вид остальной части страницы и ощущается намного быстрее.

Я также склонен копировать+вставлять все мои плагины jquery в один файл: jquery.plugins.js затем перейдите по ссылке

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

Для фактической библиотеки jquery.