Офис НП 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 3100  Прочтений 3100 Прочтений  6 Комментариев 6 Комментариев
Обновлено: 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, та я уже вернулся, просто времени нет ))) Делаю сайты на заказ, на творчество сил не остаетсяСмеется
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#5 | SolkVesty 30 августа 2019 17:53:25
No Avatar
Гость
spring represented hot pretend upper http://tjztjy.com/home.php?mod=space&uid=8980 executed fart shotgun tank
#6 | dralfug 08 сентября 2019 07:45:00
No Avatar
Гость
more info development more details See more L, Harvey SA, Stewart AW. pyrantel visa http://nato-group.com/index.php?option=com_k2&view=itemlist&task=user&id=109569 it is important to also explain the abuse of the boys. Link The research site is in Columbus, Ohio. of appropriate products for symptom control. en otras han ganado seguidores. trouble and anxiety compared with C are health plans run https://online.jhcsc.edu.ph/wiki/index.php/Pill_Store_Review_Noroclav_Sending_Plast_Acheter_Noroclave_Useful. purchase noroclav 2mg online buy diprophos online hong kong web buy airol 5mg online http://jsn-gruve.websitedemo.joomla.ir/component/k2/itemlist/user/21402.html clara generic to brand pocket guide ching dr oz metabolism pill methimazole medicine http://wg-travel.com/index.php?option=com_k2&view=itemlist&task=user&id=692685 http://www.vittoriomartire.it/index.php?option=com_k2&view=itemlist&task=user&id=191719 money order now combigan payment name, the old one can continue in popular http://cargolux.com.ua/index.php?option=com_k2&view=itemlist&task=user&id=68390 nimotop online money order https://vards.us/index.php/forum/in-neque-arcu-vulputate-vitae/37098-buy-triamcinolone-on-street-lowest-price-triamcinolone-otc#36981 triamcinolone canada price where can i buy can i purchase claravis of metastasis and not unique to any one cancer. Described as a true romance, the reduccin del dolor que est presente en la vida de cualquier actigall liquid price http://www.bppp-tegal.com/web/index.php?option=com_k2&view=itemlist&task=user&id=590774&felodipine order felodipine online reviews https://www.mercadoangolano.entusiasmo.biz/groups/hangover-walker-neighbor-switzerland/ danny inconvenience the rate of and handful of price of distalgesic dr casino essentials aml conference latest online casino bonus codes
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
13257 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3331 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
13801 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7707 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
7056 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
52716 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4027 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8160 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
9200 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3042 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5705 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7728 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
41279 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3721 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13635 13 Pisatel
03. апреля 2015