Pull to refresh

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

Reading time2 min
Views8.8K
Каждый разработчик javascript приложений рано или поздно сталкивается с проблемой большого (относительно конечно) времени загрузки подключаемых js и css файлов. Эта проблема, как известно, происходит из двух причин: большого количества подключаемых файлов (браузер имеет ограничение на количество одновременно скачиваемых файлов, поэтому пока не скачается один, браузер не приступит к скачиванию другого) и большого размера используемых библиотек (prototype, extjs и т.д.)

Решением могло было быть ручное объединение всех подключаемых файлов в один, но это делает неудобным дальнейшие корректировки файлов, поэтому целесообразно использовать автоматическую сборку и компрессию итогового файла. Но, компрессия увеличивает нагрузку на сервер, поэтому желательно использовать кэширование, причем учитывающее возможность изменения файлов…
Разработчик Niels Leenheer (http://rakaz.nl/) предложил реализацию описанной процедуры в своем скрипте: rakaz.nl/projects/combine/combine.phps
Настройка скрипта легка и заключается в расположении файла 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">

Насколько описанное решение эффективно можете решить сами.
Tags:
Hubs:
+5
Comments58

Articles

Change theme settings