На этот раз, мы обсудим, как объединить файлы JavaScript в один файл на WordPress. Этот процесс — часть оптимизации (уменьшения количества) http-запросов, для увеличения скорости сайта.

Объединение вручную

Казалось бы, самый очевидный способ объединить js файлы — просмотреть исходный код веб-страницы, найти все скрипты сайта, затем скопировать их содержимое и последовательно вставить их в новый js файл. Однако, этот метод не рекомендуется, так как имеет много недостатков:

  • Отсутствие гибкости. Если нужно добавить или удалить скрипт, то нужно заново делать это вручную.
  • Невозможно гарантировать совместимость между файлами. Это связано с определенной последовательностью подключения скриптов.
  • Если будут использованы дополнительные сторонние плагины, есть вероятность двойной загрузки скриптов, что увеличивает вес загружаемой страницы.

Учитывая все минусы данного подхода, попробуем решить его более простым способом — с использованием php.

Объединяем скрипты автоматически

Итак, определив наиболее рациональный способ решения проблемы, давайте элегантно объединим скрипты в один файл, разместив данный сниппет в function.php.

Убедитесь, что процесс объединения прошел успешно. Проверьте, что объединение скриптов прошло без ошибок. Для этого откройте инструменты разработчика в браузере (нажмите F12 для Google Chrome) и выберите вкладку «Консоль». Если ошибок нет, то консоль не выдаст никаких предупреждений.

Следует отметить, что некоторые файлы не объединяются, например wp-embed.min.js и akismet.js. Это связано с тем, что указанные скрипты загружаются позже, чем наш фрагмент кода.

Если ошибки в консоли браузера присутствуют, проверьте исходные скрипты на наличие строк комментариев. При автоматическом слиянии, мог быть «закомментирован» нужный код.

2 коментариев к записи

  • Добрый! Как исключить из такого способа конкатенации инлайновые скрипты?

    • Когда столкнулся с тем, что инлайновые скрипты данное решение просто выбрасывает, сделал следующим образом:

      В $wp_scripts->registered содержится информация обо всех подключаемых скриптах. Перед тем, как отключаем слитые файлы, ищем те которые встраивают скрипты в html и выводим их.

Добавить комментарий