Как стать автором
Обновить

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

Время на прочтение2 мин
Количество просмотров8.9K
Каждый разработчик 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">

Насколько описанное решение эффективно можете решить сами.
Теги:
Хабы:
Всего голосов 15: ↑10 и ↓5+5
Комментарии58

Публикации

Истории

Ближайшие события

15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
22 – 24 ноября
Хакатон «AgroCode Hack Genetics'24»
Онлайн
28 ноября
Конференция «TechRec: ITHR CAMPUS»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань