topleft topright
 

Уменьшение времени загрузки js и css файлов

Печать E-mail
(0 голосов)
Каждый разработчик javascript приложений рано или поздно сталкивается с проблемой большого (относительно конечно) времени загрузки подключаемых js и css файлов. Эта проблема, как известно, происходит из двух причин: большого количества подключаемых файлов (браузер имеет ограничение на количество одновременно скачиваемых файлов, поэтому пока не скачается один, браузер не приступит к скачиванию другого) и большого размера используемых библиотек (prototype, extjs и т.д.)

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


Разработчик Niels Leenheer (http://rakaz.nl/) предложил реализацию описанной процедуры в своем скрипте: http://rakaz.nl/projects/combine/combine…
Настройка скрипта легка и заключается в расположении файла combine.php в корне вашего сайта, создания отдельных директорий для javascript, css и кэш файлов и прописывания этих путей в файле combine.php

Пример относительных путей от расположения combine.php:

$cachedir = dirname(__FILE__) . '/cache';
$cssdir = dirname(__FILE__) . '/css';
$jsdir = dirname(__FILE__) . '/script';

Далее необходимо или создать или модифицировать файл .htaccess со следующим содержимым:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*.js) /combine.php?type=javascript&files=$1

Если файл .htaccess уже существует и используется RewriteEngine, то первые две строчки не нужны.

Пример использования:

<script type="text/javascript" src="script/yui-utilities.js,ext-yui-adapter.js,ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext-all.css,vista.css,main.css">

Насколько описанное решение эффективно можете решить сами.

Источник: http://terloger.habrahabr.ru/

 
« PHP + AJAX = SACK   Элементы интерфейса в jQuery »

Украинская Баннерная Сеть
PR и тИЦ