Требуется подключить библиотеки jquery, GMap.js в файл MyScript.js (Формальное название для примера). Дело в том что все эти скрипты в html документе выглядят не очень красиво и легко путаешься, хотелось бы вынести пару троек скриптов и подключать и подгружать их. Как это можно сделать?
1 ответ 1
Начнем с того, что именно подразумевается под "эти скрипты в html документе выглядят не очень" Если вы прямо вставляете текст скрипта — то это неправильный выбор, следует делать так:
Учитывайте, что загрузка скрипта останавливает основной поток, поэтому либо ставьте их в конце (но внутри) либо с параметром async .
Если же все-таки вы это знаете, но вам хочется динамически загружать скрипты из своего, то для этого можно либо воспользоваться библиотеками, например Require.JS или самому написать вот такое:
Есть еще один путь, т.к. у вас jQuery — ее можно использовать в качестве загрузчика — у нее есть такой функционал:
Т.к. у вас несколько скриптов, необходимо их загружать с учетом зависимостей.
Первый вопрос, возникающей в начале работы с билиотекой jQuery — как подключить её к сайту? Есть два варианта: подключать с другого сайта или скачать её к себе на сервер.
Подключение JQuery к сайту
1. Первый и самый простой — используете файл с другого сайта. Для этого достаточно одной строки перед закрывающим тегом head Вашей страницы:
В данном коде указано подключение билиотеки с Google API. У данного способа есть и преимущества, и недостатки. Плюсом будет то, что данный тип подключения используется на многих сайтах и, допустим, если пользователь уже заходил на подобный сайт, то она библиотека у него закэширована и не требует новой загрузки. Минусом же является то, что Вы зависите от стороннего сервера — его возможные проблемы с загрузкой становятся Вашими.
2. Вы загружаете на сервер свой файл библиотеки
Последнюю версию jQuery можно скачать с главной страницы официальнго сайта: jquery.com .
Скачиваем файл. В корневой директории (папке) сервера создаём папку js (если её нет) и закачиваем файл туда. Допустим файл называется jquery-1.10.1.js. Пример подключения ниже:
Строка с подключением к файлу jQuery ложна быть первой в списке подключаемых js-файлов (если у Вас имеются другие подключения js).
| Внимание! Желательно не менять название файла библиотека jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете. Если же Вам всё равно нужно изменить название, то можете не беспокоиться — на работоспособности это никак не отобразится. Главное правильно указать новое название в строке с подключение в head Вашей старицы. |
Также хочу обратить внимание на то, что подключение к jQuery должно быть на Всех страницах, где он используется. Подключения на одной из страниц мало.
Как уже говорилось, многие популярные CMS сегодня уже поставляются с jQuery, и ВордПресс не исключение. Однако, если библиотеку не подключают плагины, то jQuery автоматически не подгрузится. Чтобы подключить данный фреймворк корректно, нужно использовать функцию wp_enqueue_script(). Поместите следующий код в файле header.php вашей темы (откройте через редактор):
Как подключить библиотеку jQuery в WordPress?
В настоящее время почти все CMS используют встроенный jQuery. Его остаётся подключить специальной командой. Не всегда плагины подключают библиотеку автоматически, поэтому некоторые блоки и модули могут не работать. Для подключения следует использовать функцию wp_enqueue_script().
Ниже приведён код, который нужно прописать в файле header.php (открыть через редактор)
Данная функция должна быть размещена между тегами head ДО вызова функции wp_head(). Такой порядок сэкономит время загрузки старницы.
Как подключить библиотеку jQuery в Joomla?
Код, который надо вставить в обработчик
В случае с шаблонной версией страницы нужно вставить код PHP
при наличии на сервере HTTP/2 модули из CDN могут загружаться параллельно в отличии от той же webpack-сборки
C webpack-сборкой тоже может всё загружается параллельно и без блокировки контекста.
Так какой же подход все таки является более удачным в современных реалиях?
Современные реалии — современные методы. Но будут ли оправданы эти вложения — зависит от проекта. Если у вас ресурсы разбросаны по множественным серверам — то выгода будет минимальна
Вы немножко не в ту сторону смотрите и не совсем понимаете реальный смысл (и пользу) CDN как сервиса/технологии в целом.
Время, которое уходит именно на скачивание файла с сервера CDN не является главным пожирателем времени. Еще до того, как эта закачка начнется, браузер вынужден отрезолвить DNS, отправить запрос на конкретный сервер, пожаться ручками, сверить сертификат и установить соединение. Именно на это уходит большая часть времени. Плюс сама загрузка, в силу влияния механизма Congestion Control и специфики работы протокола TCP не начинается моментально с максимальной пропускной способности канала, а с минимальных пакетов и растет по мере их успешной доставки. А если еще и канал не очень ок в плане потери пакетов (и отката размера пакета), например мобильный 3G, то в результате скорость скачивания будет не особо высокой. А если у вас еще и каждый скрипт со своего CDN подключается — проблема увеличивается многократно. Частично ситуацию можно улучшить с помощью prefetch / preconnect / preload. Но полностью она не решается.
Также, нужно учесть что утверждение "у пользователя уже закешировано" сильно преувеличено. Кеши не такие уж огромные чтобы все умещать, они чистятся, инвалидируются, устаревают чуть более чем постоянно. А с учетом целого зоопарка версий — вероятность что именно ваша версия будет у пользователя вообще-то не так уж и высока.
В это же время если у вас HTTP/2 и все отдается одним или несколькими файлами (для HTTP/2 это действительно не принципиально до определенного уровня) — DNS, SSL и соединение уже установлены на момент запроса, и предшествующий поток данных уже достаточно раскачал канал. Поэтому загрузка (которая и так не самая медленная часть этого процесса) произойдет быстро. Плюс, еще же можно push сделать, сдвинув время начала загрузки.
А теперь про сам CDN и зачем он нужен.
Если у вас основная целевая аудитория находится в РФ (а еще лучше — в Мск и регионе например, что вполне нормально для локальных бизнесов), ставите сервер в этом же регионе и не паритесь. CDN вам не нужен ни свой, ни сторонние CDN для скриптов, ни Google Fonts какой-нибудь. Со своего сервера по HTTP/2 это будет отдаваться всегда быстрее.
Но если аудитория у вас — весь мир, а сервер всего один — вот тут CDN придет на помощь. Живой пример — клиент из Австралии, 60% аудитории — Австралия. Естественно, сервер мы берем в Мельбурне, прямо под боком у его ЦА. И для этих 60% все работает максимально быстро без каких-либо CDN. На среднем мобильном девайсе и на 3G — пару секунд. А вот для оставшихся 40% — США, Канада и Европа — один только RTT до Мельбурна 400-800ms даже на хорошем офисном вайфае. А на среднем девайсе и 3G — вообще жесть — TTI порядка 30 секунд, иногда до 40-45 проседает. И вот тут на помощь приходит CDN — пользователям из Канады, например, файлы начинают отдаваться с ближайшего сервера в Монреале. Да, мы потеряем 30 мая
