Офис НП 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 Февраль 2015 11:22:06
14630 Прочтений
Обновлено: 07 февраля 2015 11:45:48
В данной заметке расскажу, как оптимизировать загрузку скриптов js и файлов css, а точнее — как избавится от дополнительных запросов к серверу, плюс существенно сократить html–код страницы.
На современных проектах используется масса дополнительных симпатичных плюшек, выполнение которых требует подключения дополнительных файлов javascript и таблиц каскадных стилей (CSS). Как выглядит обычно "шапка" нашей страницы? Примерно так:
Согласитесь, выглядит ужасно. Есть, конечно, вариант: объединить все файлы в один и загружать его. Но, на мой взгляд, есть один недостаток у этого метода: некоторые скрипты и стили нужны далеко не на всех страницах сайта, поэтому их загрузка будет лишней. Можно, конечно, возразить, сославшись на кэширование этих файлов, но это — отдельная тема для дискуссии. Я же сейчас хочу предложить более простой, но весьма действенный способ, а именно- воспользоваться возможностями сервера и погружать файлы "на лету", не делая дополнительных запросов и не засоряя разметку. Итак, начнем.
(ищем apache2handler => Loaded Modules), либо воспользоваться функцией apache_get_modules();:
Далее мы создаем файл для подключения стилей, например, style.combined.css со следующим содержимым
И файл для подключения скриптов, например, script.combined.js со следующим содержимым:
Ну вот, половина дела сделана. Дальше редактируем (или создаем, если его ещё нет) в корневой директории наш файл .htaccess, добавив в него следующее:
В принципе, всё уже готово. Последний штрих — убираем из нашей разметки все лишние подключения, оставив лишь подключение наших комбинированных файлов, то есть теперь "шапка" выглядит так:
То есть теперь, когда браузер сделает всего один запрос к нашим файлам, сервер выдаст ему подключение сразу всех скриптов и стилей. Думаю, весьма полезная вещь для оптимизации.
На этом пока всё. Всем всех благ и всего доброго.
На современных проектах используется масса дополнительных симпатичных плюшек, выполнение которых требует подключения дополнительных файлов 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>
То есть теперь, когда браузер сделает всего один запрос к нашим файлам, сервер выдаст ему подключение сразу всех скриптов и стилей. Думаю, весьма полезная вещь для оптимизации.
На этом пока всё. Всем всех благ и всего доброго.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
23969 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
79995 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
16465 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
19469 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
161647 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
15807 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
24706 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
28733 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
8156 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
40737 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
12481 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
32472 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
144614 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
9356 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
24273 | 13 | Pisatel 03. апреля 2015 |