Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Подключение нескольких файлов .js и .css одним запросом
Сниппет
Решил тут чуть оптимизировать один из проектов, и сразу обратил внимание на множественные подключения файлов стилей и скриптов: мало того, что это лишняя нагрузка на сервер, весь этот процесс выглядит весьма несимпатично и занимает прилично места в html–разметке. Нашел неплохой способ избавиться от этого.
Подключение нескольких файлов .js и .css одним запросом
Опубликовал  Pisatel Добавлено  07-02-2015 11:22 07 Февраль 2015 11:22:06 1828  Прочтений 1828 Прочтений  4 Комментариев 4 Комментариев
Обновлено: 07-02-2015 11:45 Обновлено: 07 февраля 2015 11:45:48  printer
В данной заметке расскажу, как оптимизировать загрузку скриптов js и файлов css, а точнее — как избавится от дополнительных запросов к серверу, плюс существенно сократить html–код страницы.

На современных проектах используется масса дополнительных симпатичных плюшек, выполнение которых требует подключения дополнительных файлов javascript и таблиц каскадных стилей (CSS). Как выглядит обычно "шапка" нашей страницы? Примерно так:

Код: HTML5
<head>

<link rel="stylesheet" href="web/css/style1.css" />

<link rel="stylesheet" href="web/css/style2.css" />

<link rel="stylesheet" href="web/css/style3.css" />

<script src="web/js/jquery-1.11.1.min.js"></script>

<script src="web/js/modernizr.custom.28468.js"></script>

<script src="web/js/jquery.cslider.js"></script>

<script src="web/js/jquery.quickflip.min.js"></script>

<script src="web/js/imagelightbox.js"></script>

<script src="web/js/jquery.form.js"></script>

<script src="web/js/jquery.validate.min.js"></script>

<script src="web/js/social-likes.min.js"></script>

<script src="web/js/site.js"></script>

</head>




Согласитесь, выглядит ужасно. Есть, конечно, вариант: объединить все файлы в один и загружать его. Но, на мой взгляд, есть один недостаток у этого метода: некоторые скрипты и стили нужны далеко не на всех страницах сайта, поэтому их загрузка будет лишней. Можно, конечно, возразить, сославшись на кэширование этих файлов, но это — отдельная тема для дискуссии. Я же сейчас хочу предложить более простой, но весьма действенный способ, а именно- воспользоваться возможностями сервера и погружать файлы "на лету", не делая дополнительных запросов и не засоряя разметку. Итак, начнем.

Важно!

Перед началом работы проверьте, что на вашем сервере Apache установлены модули mod_include и mod_filter. Сделать это можно, воспользовавшись стандартной функцией phpinfo();

(ищем apache2handler => Loaded Modules), либо воспользоваться функцией apache_get_modules();:

Код: PHP
print_r(apache_get_modules());




Далее мы создаем файл для подключения стилей, например, style.combined.css со следующим содержимым

Код: TEXT
<!--#include file="style1.css" -->

<!--#include file="style2.css" -->

<!--#include file="style3.css" -->




И файл для подключения скриптов, например, script.combined.js со следующим содержимым:

Код: TEXT
<!--#include file="jquery-1.11.1.min.js"-->

<!--#include file="modernizr.custom.28468.js"-->

<!--#include file="jquery.cslider.js"-->

<!--#include file="jquery.quickflip.min.js"-->

<!--#include file="imagelightboy.js"-->

<!--#include file="jquery.form.js"-->

<!--#include file="jquery.validate.min.js"-->

<!--#include file="social-likes.min.js"-->

<!--#include file="site.js"-->


Важно!

Эти файлы кидаем туда, где лежат наши подключаемые файлы .js и .css, иначе устанавливаем правильно пути от корня сайта.

Ну вот, половина дела сделана. Дальше редактируем (или создаем, если его ещё нет) в корневой директории наш файл .htaccess, добавив в него следующее:

Код: APACHE
<IfModule mod_include.c>

<FilesMatch "\.combined\.js$">

Options +Includes

AddOutputFilterByType INCLUDES application/javascript application/json

SetOutputFilter INCLUDES

</FilesMatch>

<FilesMatch "\.combined\.css$">

Options +Includes

AddOutputFilterByType INCLUDES text/css

SetOutputFilter INCLUDES

</FilesMatch>

</IfModule>




В принципе, всё уже готово. Последний штрих — убираем из нашей разметки все лишние подключения, оставив лишь подключение наших комбинированных файлов, то есть теперь "шапка" выглядит так:

Код: HTML5
<head>

<link rel="stylesheet" href="web/css/style.combined.css" />

<script src="web/js/script.combined.js"></script>

</head>




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

На этом пока всё. Всем всех благ и всего доброго.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | Денис 26 марта 2016 00:27:31
No Avatar
Гость
Автор, для какой версии аппач это актуально? что то мне кажется, что на 2.4. уже не работает.Улыбчивый
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Денис, честно говоря, даже не знаю)) Сейчас чуть выпал из вебстроительства
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#3 | Djiga 22 февраля 2017 22:52:00
No Avatar
Гость
Pisatel, когда вернётесь к вебстроительству, может напишите статью-урок, как сделать главную страницу сайта php-fusion: Респонсив или Адаптив видеофон на весь экран на HTML5 с добавлением кнопок-ссылок-текста. (если у вас будет к этому интерес).
#4 | Pisatel 24 февраля 2017 11:37:09
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Djiga, та я уже вернулся, просто времени нет ))) Делаю сайты на заказ, на творчество сил не остаетсяСмеется
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
1563 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
7454 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
6466 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
4584 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
41715 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
3072 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
5883 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
6493 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2290 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
9151 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3942 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
5626 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
28353 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2784 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
11398 13 Pisatel
03. апреля 2015